Question

基本上在我的窗口上（当你点击图标时）它应该打开并显示标签的URL，然后在它旁边我希望它说“保存”，它会将它保存到localStorage，并在下面显示进入保存的链接区域。

像这样：

alt text http://i42.tinypic.com/dma7x5.png

像书签一样：）

Answer 1

如果你想做类似的事情，可以使用Chrome扩展程序API轻松完成。要寻找的领域是：

Chrome扩展程序Tab API
Chrome扩展程序Browser Action API
HTML5 localStorage或HTML5 webdatabase

现在第一步是创建你的popup.html文件并记住它是暂时的，也就是说，它只在你点击浏览器动作时才存在，如果它退出（关闭）就会死掉。我想说的是，如果你有很多计算并且你希望它在后台发生并且即使弹出窗口关闭也会发生，将所有内容移动到background page。在弹出窗口中，您可以使用chrome.extension.getBackgroundPage（）

轻松访问背景页面

在您的popup.html中，您需要获取当前标签的网址，为此，标签API有一个“getSelected”功能，可让您获取Tab object选中的标签。

这样的事情：

<强> popup.html

<html>
<body>
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>

<强> popup.js

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

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

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

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

祝你好运！

Answer 2

我想更新此答案，因为API已更改。

现在不推荐使用chrome.tabs.getSelected()方法。获取当前标签网址的推荐方法是使用chrome.tabs.query()：

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

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

"permissions": [ ...
   "tabs"
]

您可以在此处详细了解弃用：chrome.tabs.getSelected()

希望这有帮助！

Answer 3

要获取当前网址，您需要获取当前标签，然后提取所有参数。

获取当前标签使用chrome.tabs.getSelected()。然后，要从选项卡对象中获取参数，请参阅tabs api

您的代码段应该如下所示，

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

  //rest of the save functionality.
});

您还需要在扩展程序清单中声明“tabs”权限才能使用标签API。例如

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}

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

3 个答案: