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

Question

我见过像Adblocks这样的插件，几乎可以立即更改标签，将插件图标切换为灰度。

我该如何实现？ 目前，我正在通过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!
    });
});

（阅读文档以查看details对象中的可用details 。）

Answer 2

默认情况下，您的内容脚本在"document_idle" ，表示“文档完全加载且JS引擎空闲后的一段时间”

如果您的“检测器脚本”不需要访问DOM来决定图标，则可以将其设置为在加载DOM之前在"document_start"运行 ：

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

有关更多详细信息，请参见Content Script文档 。

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