如何立即更改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 ）。