在选项卡开关/更改上更新Chrome扩展程序图标

Question

我的扩展名仅与几个网站有关。 因此，它具有一个正常的图标，该图标显示在工具栏上（浏览器操作），并且当用户打开受支持的网站时，该图标应更改为其他图标以进行指示。 用户切换选项卡时，应该发生相同的事情。 我尝试设置背景页面并将消息发送到弹出页面，如下所示，

background.js

chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab) {         
  chrome.runtime.sendMessage({msg: 'supported'});
}); 

弹出

chrome.extension.onMessage.addListener(function(message, messageSender, sendResponse) {
  updateIcon();
});

但这是行不通的。 从弹出页面调用updateIcon（）函数可以正常工作。 我是chrome扩展开发的新手，因此不确定在这里做错了什么，将不胜感激。 谢谢。

Answer 1

您可以使用消息传递来使它通过内容脚本完成，以检测受支持页面上的切换，然后通知后台页面以显示该页面的浏览器操作图标。 您的内容脚本应使用chrome.runtime.sendMessage发送一条消息，而后台页面应使用chrome.runtime.onMessage.addListener进行chrome.runtime.onMessage.addListener ：

我创建了示例代码，并对其进行了测试：

内容脚本：

if(onSupportedPageNeedChangeIcon) {
    // send message to background script
    chrome.runtime.sendMessage({ "newIconPath" : "newicon.png" });
}

背景页面：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        // read `newIconPath` from request and read `tab.id` from sender
        //alert("good");
        chrome.browserAction.setIcon({
            path: request.newIconPath,
            tabId: sender.tab.id
        });
    });

还请记住在清单中注册您的内容脚本代码，例如：

"content_scripts": [
    {
      "matches": ["http://www.supportedwebsiteone.com/*", "http://www.supportedwebsitetwo.com/*"],
      "js": ["myscript.js"]
    }
  ]