如何立即更改Chrome扩展程序图标？

Question

我已经看过像Adblock这样的插件，它可以将插件图标切换到灰度，几乎可以立即切换标签。

我如何实现这一目标？目前，我正在使用content.js检测特定URL，然后向background.js发送消息以更改图标。但这很慢，并且在页面加载后2-3秒后发生。

我该怎么做？我有一个特定的URL通配符列表，其中必须更改图标。

Answer 1

chrome.pageAction和chrome.browserAction API允许扩展指定特定于选项卡的状态（按钮工具提示，图标，弹出窗口等）。

您可以使用chrome.webNavigation API来检测导航，也可以使用chrome.tabs API来检测标签状态更改。将事件侦听器绑定到任一API并更新回调中的徽章状态：

chrome.webNavigation.onCommitted.addListener(function(details) {
    chrome.browserAction.setBadgeText({
        text: 'whatever',
        tabId: details.tabId  // Important for tab-specific state!
    });
});

（阅读the documentation以查看details对象中可用的内容。）

Answer 2

默认情况下，您的内容脚本运行在"document_idle"，意思是＆＃34;文档完全加载并且JS引擎空闲后的某个时间＆＃34;

如果你的＆＃34;探测器脚本＆＃34;不需要访问DOM来决定图标，你可以在加载DOM之前设置它to run at "document_start"：

"content_scripts": [
  {
    "matches": ["*://*.example.com/*"],
    "js": ["detect_url.js"],
    "run_at": "document_start"
  }
],

有关详细信息，请参阅Content Script docs。

或者，如果您拥有"tabs"权限，则可以收听相关标签事件（onCreated，onUpdated，onReplaced）。