获取URL并保存| Chrome扩展程序

Jam*_*mie 30 html google-chrome local-storage google-chrome-extension

基本上在我的窗口(当你点击图标时)它应该打开并显示选项卡的URL,然后在它旁边我希望它说"保存",它会将它保存到localStorage,并在下面显示到保存链接区域.

像这样:

替代文字http://i42.tinypic.com/dma7x5.png

像书签:)

Moh*_*our 49

如果您想这样做,可以使用Chrome扩展程序API轻松完成.要寻找的领域是:

现在第一步是创建你的popup.html文件并记住它是瞬态的,也就是说,它只存在于你点击浏览器动作时,如果它退出(关闭)就会死掉.我想说的是,如果你有很多计算并且你希望它在后台发生并且即使弹出窗口关闭也会发生,将所有内容移动到后台页面.在弹出窗口中,您可以使用chrome.extension.getBackgroundPage()轻松访问后台页面

在popup.html中,您需要获取当前选项卡的URL,为此,Tab API具有" getSelected "功能,允许您获取所选选项卡的Tab对象.

所以像这样:

popup.html

<html>
<body>
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

popup.js

chrome.tabs.getSelected(null, function(tab) {
    document.getElementById('currentLink').innerHTML = tab.url;
});
Run Code Online (Sandbox Code Playgroud)

您无法在HTML文件中放置JavaScript代码的原因是Chrome无法保护其JavaScript攻击用户:

不允许使用内联脚本和事件处理程序

现在,这将允许您在弹出窗口中将当前页面中的Url显示为浏览器操作.下一步是使用简单的HTML5功能,例如localStorage或Webdatabase(在我看来会更好).要将保存的页面存储到,可以在savedLinks页面上渲染它们,就像我对currentLink所做的那样.

祝好运!

  • 只有在清单中设置了正确的权限时,上述脚本才有效:"权限":["tabs"] (4认同)
  • 从**manifest_version**2开始,上面的代码将不起作用.应将所有脚本放在单独的文件中,然后将其包含在主html中.新版本明确指出**内联脚本和事件处理程序不允许** (4认同)

tha*_*ger 13

我想更新这个答案,因为API已经改变了.

chrome.tabs.getSelected()方法现已弃用.获取当前选项卡的URL的推荐方法是使用chrome.tabs.query():

chrome.tabs.query({'active': true}, function (tabs) {
    var url = tabs[0].url;
});
Run Code Online (Sandbox Code Playgroud)

这仍然要求您chrome.tabs在扩展程序清单中请求访问API:

"permissions": [ ...
   "tabs"
]
Run Code Online (Sandbox Code Playgroud)

您可以在此处阅读有关弃用的更多信息:chrome.tabs.getSelected()

希望这可以帮助!


pho*_*x24 10

要获取当前URL,您需要获取当前选项卡,然后提取所有参数.

用于获取当前选项卡,chrome.tabs.getSelected().然后,要从选项卡对象中获取参数,请参阅选项卡api

你的代码片段应该是这样的,

chrome.tabs.getSelected(null, function(tab) {
  //properties of tab object
  tabId = tab.id;
  tabUrl = tab.url;

  //rest of the save functionality.
});
Run Code Online (Sandbox Code Playgroud)

您还需要在扩展程序清单中声明"tabs"权限,以使用选项卡API.例如

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}
Run Code Online (Sandbox Code Playgroud)