更新选项卡开关/更改上的Chrome扩展图标 [英] Update chrome extension icon on tab switch/change

问题描述

我的扩展只与少数网站有关。所以，它有一个正常的图标显示在工具栏上（浏览器操作），当用户打开一个支持的站点时，图标应该改变为另一个来表示它。用户切换选项卡时应该发生同样的事情。我尝试设置一个背景页面并将消息发送到如下所示的弹出页面，

background.js

  chrome.tabs.onActivated.addListener（function（tabId，changeInfo，tab）{
 chrome.runtime.sendMessage（{msg：'supported'} ）; 
}）; 
  

弹出 $ b pre $ chrome.extension.onMessage.addListener（function（message，messageSender，sendResponse）{
updateIcon（）;
}）;


但它不起作用。 updateIcon（）函数很好，因为它在从弹出页面调用时起作用。我是铬扩展开发新手，所以我不确定我在这里做错了什么，感谢任何帮助。感谢。

解决方案

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


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



内容脚本：

$ b $ pre $ if（onSupportedPageNeedChangeIcon）{
//发送消息到后台脚本
chrome.runtime.sendMessage（ {newIconPath：newicon.png}）;

$ / code $ / pre
$ b pre

  chrome.runtime.onMessage.addListener（
 function（request，sender，sendResponse）{
 //从请求中读取`newIconPath`并读取`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.supportedwebsitettw.com/*]，
js：[myscript.js] 
} 
] 
  

My extension is relevant only for a few websites. So, it has a normal icon that is shown on the toolbar (browser action) and when user opens a site that is supported the icon should change to a different one to indicate it. Same thing should happen when the user switches tabs. I tried setting up a background page and sending message to the popup page like below,

background.js

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

popup

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

But it is not working. The updateIcon() function is fine as it works when called from popup page. I am new to chrome extension development, so I am not sure what I am doing wrong here, would appreciate any help. Thanks.

解决方案

You can use message passing to get it done by content scripts to detect the switch on a supported page, then notify the background page in order to display a browser action icon for that page. Your content script should send a message using chrome.runtime.sendMessage, and the background page should listen using chrome.runtime.onMessage.addListener:

I created the sample code and tested it works with me:

Content script:

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

Background page:

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
        });
    });

Also keep in mind to register your content script's code in manifest like:

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

这篇关于更新选项卡开关/更改上的Chrome扩展图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！