当扩展的内容脚本处于活动状态时设置图标

Set icon when content scripts of extension are active

本文关键字：活动状态 设置 图标 脚本 扩展      更新时间：2023-09-26

My Extension适用于特定的站点，我希望用户知道它何时工作。我已经在清单中为我的内容脚本指定了特定的页面

当内容脚本处于活动状态时，如何更改扩展图标？

（根据作者评论编辑）
尽管我的应用程序可以在特定页面上运行，但我仍然希望用户能够查看弹出窗口。

我只是为我的扩展Grooveshark Control实现了这一点。这很简单。我将脚本注入到我需要的页面，并从注入的脚本中定期调用带有一些数据的扩展。

// content.js
setInterval(dataCollector, 1000)
function dataCollector() {
    data = {} // collect something from page
    chrome.extension.sendRequest(data);
}

在我的分机中，我只是听…

// background.js
chrome.extension.onRequest.addListener(function(request) {
    chrome.browserAction.setIcon(...)
})

但有了这个，你可能会遇到一些麻烦。例如，有人可以禁用并再次启用您的扩展。然后最好是content.js也注册responseCallback，您将在其中删除该间隔。因为那时会有两个请求。这个问题主要发生在开发过程中，当您需要重新加载扩展时。

另一件事是，用户可以用你们的页面关闭选项卡，现在你们需要再次更改图标。为此，您需要在background.js脚本中使用另一个侦听器：

// background.js
chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
    // check if your page is still there
    // if not, change icon
})

Grooveshark Control的代码在GitHub上，所以你可以查看它：

  • contentscript.js
  • background.js
  • 一些已使用的函数

希望这就是你想要的。

虽然在意识形态上是正确的，但这不是一个好答案，因为它没有回答OP真正的问题。如果有人能提供一个强大的解决方案来更改特定页面的浏览器操作图标，那将是受欢迎的

根据Chrome UI指南，当您的扩展仅对特定网站有意义时，您应该使用页面操作。

最简单的解决方案是从内容脚本向后台脚本发送消息，以显示特定选项卡的页面操作，并向选项卡报告点击：

// content.js
chrome.runtime.sendMessage({showAction : true});
chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if(message.actionClicked) {
      /* Do stuff */
    }
  }
);

// background.js
chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if(message.showAction) {
      chrome.pageAction.show(sender.tab.id);
    }
  }
);
chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {actionClicked : true});
});

您需要将所需的字段添加到清单中，但这就是它的要点

您还可以考虑另一种途径：不是每次都注入脚本，而是使用declarativeContentneneneba API检测要注入的页面以显示页面操作，并在单击时以编程方式注入。这将节省一些资源，但如果您需要在页面上进行准备，则不适用。

相关文章：