Chrome Extension Manifest V3 特定网站图标切换问题求助

问题描述 #

扩展需要在特定网站（如.google.com）切换图标，但当前Manifest V3配置下始终显示默认的gray.png，原Manifest 2的方案在V3中失效。当前配置代码如下：

Manifest (v3) #

{
  "name": "test",
  "description": "test.",
  "version": "0.1",
  "manifest_version": 3,
  "background": {
      "service_worker": "background.js"
    },
  "permissions":[
                  "declarativeContent",
                  "activeTab",
                  "tabs",
                  "storage",
                  "scripting"
                ],
  "host_permissions":[
                      "<all_urls>"
                     ],
  "action" :
  {
    "default_icon" : "/images/gray.png",
    "default_title" : "Test"
  }
}

原background.js（无效） #

let rule1 = {
    conditions: [
      new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { hostSuffix: '.google.com'},
      })
    ],
    actions: [ 
        new chrome.declarativeContent.SetIcon({ path: '/images/red.png' })
    ]
  };

  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
      chrome.declarativeContent.onPageChanged.addRules([rule1]);        
  });

原因分析 #

Manifest V3中移除了declarativeContent.SetIcon动作，原基于声明式内容规则的图标切换方案不再适用，必须通过主动监听标签页状态并调用chrome.action.setIcon实现。

解决方案 #

修改background.js，通过监听标签页的更新和切换事件，判断当前页面URL是否匹配目标网站，动态切换图标：

// 监听标签页加载完成事件，更新图标
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    const isTargetSite = tab.url.includes('.google.com');
    chrome.action.setIcon({
      tabId: tabId,
      path: isTargetSite ? '/images/red.png' : '/images/gray.png'
    });
  }
});

// 监听标签页切换事件，确保切换标签时图标正确
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    if (tab.url) {
      const isTargetSite = tab.url.includes('.google.com');
      chrome.action.setIcon({
        tabId: activeInfo.tabId,
        path: isTargetSite ? '/images/red.png' : '/images/gray.png'
      });
    }
  });
});

注意事项 #

• 确保/images/目录下存在gray.png和red.png两个图标文件，路径配置正确。
• 已有的tabs权限和<all_urls>主机权限足够支持该功能，无需额外添加权限。

内容的提问来源于stack exchange，提问作者Dogen Zenji