如何立即更改Chrome擴展程序圖標？

Question

我見過像Adblocks這樣的插件，可以通過即時標籤更改操作將插件圖標切換爲灰度。

我該如何做到這一點？目前我正在用content.js檢測特定的URL，然後發送消息到background.js來更改圖標。但是這是緩慢的，並且在頁面加載後2-3秒發生。

我該怎麼做？我有一個需要更改圖標的URL通配符的具體列表。

Answer 1

你的內容腳本運行時，默認情況下，在"document_idle"，意爲「一段時間後，該文件被完全加載和JS引擎空轉」

如果你的「檢測腳本」並不需要訪問DOM來決定圖標，可以將其設置to run at "document_start"，被載入DOM前：

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

詳情請參閱Content Script docs。

或者，如果你有"tabs"許可，您可以收聽到相關選項卡事件（onCreated，onUpdated，onReplaced）。

Answer 2

chrome.pageAction和chrome.browserAction API允許擴展指定特定於標籤的狀態（按鈕工具提示，圖標，彈出等）。

您可以使用chrome.webNavigation API檢測導航，或使用chrome.tabs API檢測選項卡狀態更改。事件綁定一個監聽要麼API和回調更新徽章狀態：（讀the documentation，看看有什麼在details對象提供）

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