如何实现Chrome扩展在切换标签页时自动触发图标变色

问题分析 #

你的现有代码只在扩展初始化时执行了一次检测，而且popup页面错误引入了background.js（service worker脚本不能在普通页面里运行），所以只有点击图标打开popup时才会触发检测。要实现切换标签页自动触发，得监听标签激活和更新的事件。

修改方案 #

1. 修正popup.html #

删掉popup里对background.js的引用，service worker脚本没法在popup页面运行，要是popup不需要交互，直接改成空白就行：

<html>
  <head>
  </head>
  <body>
    <!-- 不需要引入background.js -->
  </body>
</html>

2. 重构background.js #

添加标签激活和标签内容更新的监听事件，把检测URL和更新图标的逻辑封装成可复用的函数：

const good_urls = ["https://www.google.com/", "https://www.youtube.com"];

// 封装检测URL并更新图标的函数
async function checkAndUpdateIcon(tabId) {
  try {
    // 获取指定标签页的信息
    const [tab] = await chrome.tabs.get(tabId);
    const currentURL = tab.url;
    
    // 判断URL是否在列表中，切换对应图标
    if (good_urls.some(url => currentURL.startsWith(url))) {
      console.log("URL在列表中");
      await chrome.action.setIcon({ path: "icon-on-list.png", tabId });
    } else {
      console.log("URL不在列表中");
      await chrome.action.setIcon({ path: "icon.png", tabId });
    }
    
    // 1秒后恢复默认图标
    setTimeout(async () => {
      await chrome.action.setIcon({ path: "neutral.png", tabId });
    }, 1000);
  } catch (error) {
    console.error("检测URL失败:", error);
  }
}

// 监听标签激活事件（切换标签页时触发）
chrome.tabs.onActivated.addListener((activeInfo) => {
  checkAndUpdateIcon(activeInfo.tabId);
});

// 监听标签更新事件（同一标签页跳转URL时触发）
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅当标签加载完成且是活跃标签时触发检测
  if (changeInfo.status === "complete" && tab.active) {
    checkAndUpdateIcon(tabId);
  }
});

// 扩展初始化时，检测当前活跃标签
chrome.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
  if (tabs[0]) {
    checkAndUpdateIcon(tabs[0].id);
  }
});

3. 确认manifest.json配置 #

你的现有配置基本没问题，确保permissions里包含tabs就行，不用额外修改：

{
    "manifest_version": 3,
    "name": "Icon Changer",
    "version": "1.0",
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "tabs",
        "activeTab"
    ],
    "action": {
        "default_icon": "neutral.png",
        "default_popup": "popup.html"
    }
}

关键说明 #

• 用chrome.tabs.onActivated监听标签切换，每次切标签自动触发检测。
• 用chrome.tabs.onUpdated监听同一标签页的URL跳转，覆盖更多场景。
• 用async/await替代回调，让异步代码更易读。
• 更新图标时指定tabId，确保只修改当前活跃标签的图标，不会影响其他标签。

内容的提问来源于stack exchange，提问作者Václav Kasan