Manifest V3 Chrome扩展：打开选项页时内容脚本收重复消息

问题描述 #

开发首个Manifest V3版本Chrome扩展时遇到如下bug：

• 仅当在其他标签页打开选项页（或多个选项页）时，内容脚本会收到重复消息
• Service Worker监听tabs.Updated事件，按严格过滤规则向内容脚本发送消息，正常场景运行符合预期
• 打开1个选项页，内容脚本收到2条消息；打开2个选项页，收到3条消息，以此类推
• 后台脚本控制台仅显示发送1次消息，但选项页控制台会多一条额外的消息发送记录
• 已确认Chrome开发者工具中无多个Service Worker实例同时运行

Manifest配置 #

{
    "manifest_version": 3,
    "icons": {
        "16": "images/favicon.ico",
        "192": "images/icon-192-maskable.png",
        "512": "images/icon-512-maskable.png"
    },
    "action": {
        "default_title": "Target Site Dev Tools",
        "default_icon": "images/icon-512-maskable.png",
        "default_popup": "pages/popup.html"
    },
    "options_page": "pages/options.html",
    "permissions": [
        "activeTab",
        "identity",
        "storage",
        "webRequest"
    ],
    "background": {
        "service_worker": "scripts/background.js",
        "type": "module"
    },
    "content_scripts": [
        {
            "css": [
                "css/contentScript.css"
            ],
            "matches": [
                "https://Target-Site.com/*"
            ],
            "js": [
                "scripts/contentScript.js"
            ],
            "run_at": "document_end"
        }
    ],
    "host_permissions": [
        "https://app.Target-Site.com/Target/*",
        "https://api.Target-Site.com/2.0/*"
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "images/*.*",
                "injectedHTML/*.html"
            ],
            "matches": [
                "https://app.Target-Site.com/*"
            ]
        }
    ]
}

排查方向与解决思路 #

1. 选项页重复触发消息发送 #

从选项页控制台的额外发送记录来看，问题大概率出在选项页代码中：

• 检查选项页JS代码，是否每次加载时都执行了消息发送逻辑
• 若选项页中注册了tabs.Updated监听，需确保仅注册一次，避免多选项页实例重复触发：

  // 选项页中防止重复注册监听
  if (!window.hasTabUpdateListener) {
      const listener = (tabId, changeInfo, tab) => {
          // 此处需添加严格过滤，仅向目标站点tab发送消息
          if (changeInfo.status === 'complete' && tab.url.match(/https:\/\/Target-Site\.com\//)) {
              chrome.tabs.sendMessage(tabId, { type: 'YOUR_MSG_TYPE' });
          }
      };
      chrome.tabs.onUpdated.addListener(listener);
      window.hasTabUpdateListener = true;
      // 页面卸载时移除监听
      window.addEventListener('beforeunload', () => chrome.tabs.onUpdated.removeListener(listener));
  }
  

2. 后台消息发送目标未精准限制 #

确认Service Worker中发送消息时是否指定了目标tab ID，避免消息广播到所有匹配标签：

// 后台脚本中明确指定目标tab发送消息
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && tab.url.match(/https:\/\/Target-Site\.com\//)) {
        console.log('Sending message to tab:', tabId);
        chrome.tabs.sendMessage(tabId, { type: 'YOUR_MSG_TYPE' });
    }
});

3. 选项页误引入内容脚本逻辑 #

检查选项页的HTML文件，是否意外引入了contentScript.js或包含相同消息发送逻辑的脚本，导致选项页成为消息发送源之一。

内容的提问来源于stack exchange，提问作者Matt Nulton