Chrome扩展MV3：打开Popup后Service Worker停止监听事件求助

问题 #

开发基于Manifest V3的Chrome扩展时遇到以下问题：

• 点击扩展图标打开Popup后，后台Service Worker脚本停止接收chrome.tabs.onUpdated事件
• 关闭Popup后也无法恢复，只能重新加载扩展才能正常工作
• 使用React构建Popup页面时出现此问题，但替换为仅含按钮的普通HTML时功能正常
• 需求是在后台脚本中监听chrome.tabs.onUpdated事件检测URL变化，向内容脚本发送消息以保存数据至Chrome本地存储

manifest.json #

{
  "name": "My Extension",
  "description": "Extension POC",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs", "storage", "activeTab"],
  "action": {
    "default_popup": "build\\index.html",
    "default_title": "Open Pane"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

background.js #

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (!isPageDoneLoading(changeInfo)) {
        return;
    }
    const url = tab.url;
    const ticketId = url.substring(url.lastIndexOf("/") + 1);
    if (isTargetURL(url) && !isNaN(ticketId)) {
        // Update the ID only if it doesn't equal to the previous one or if null
        if (!CURRENT_TICKET_ID || CURRENT_TICKET_ID !== ticketId) {
            CURRENT_TICKET_ID = ticketId;   
            
            const props = getProperties(ticketId);
            chrome.tabs.sendMessage(tabId, { action: {ticketId, props: props}  });
        }
    }
})

根本原因 #

1. Service Worker意外崩溃：React打包的Popup页面可能存在未处理的错误、高频后台通信，或者加载了与扩展环境冲突的资源，触发Chrome的Service Worker回收机制，直接杀死后台进程，导致事件监听失效。
2. 全局变量依赖问题：Service Worker是无状态进程，一旦被终止重启，全局变量CURRENT_TICKET_ID会丢失，但这里的核心问题是监听本身被清除，本质是Service Worker进程已死亡。
3. React构建的兼容性问题：React打包后的代码可能包含自动注入的全局逻辑，或者使用了Service Worker不支持的API，间接导致后台进程异常终止。

解决方案 #

1. 定位Service Worker崩溃原因 #

打开Chrome的chrome://extensions/页面，开启开发者模式，点击扩展的「检查视图」→「Service Worker」，查看Console面板的错误日志，找到导致进程崩溃的具体原因（比如未捕获的Promise异常、非法API调用）。

2. 替换全局变量为持久化存储 #

Service Worker随时可能被回收，全局变量不可靠，改用Chrome的chrome.storage.local存储状态：

chrome.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
    if (!isPageDoneLoading(changeInfo)) {
        return;
    }
    const url = tab.url;
    const ticketId = url.substring(url.lastIndexOf("/") + 1);
    if (isTargetURL(url) && !isNaN(ticketId)) {
        const { CURRENT_TICKET_ID } = await chrome.storage.local.get('CURRENT_TICKET_ID');
        if (!CURRENT_TICKET_ID || CURRENT_TICKET_ID !== ticketId) {
            await chrome.storage.local.set({ CURRENT_TICKET_ID: ticketId });
            
            const props = getProperties(ticketId);
            chrome.tabs.sendMessage(tabId, { action: {ticketId, props: props} });
        }
    }
})

3. 修复React Popup的兼容性问题 #

• 检查React打包配置，禁用会自动注入全局代码的插件，确保生成的代码符合Chrome扩展环境要求。
• 逐步简化Popup页面，移除非必要组件，排查是哪个逻辑触发了后台进程异常（比如频繁的后台通信、非法的window对象操作）。
• 确保Popup与后台的通信都使用chrome.runtime.sendMessage标准方式，并且在通信时处理所有错误，避免未捕获异常扩散到后台。

4. 确保监听的稳定性 #

在Service Worker中添加安装事件，确保每次扩展更新或重启时重新注册监听：

function tabUpdatedHandler(tabId, changeInfo, tab) {
    // 原有的onUpdated逻辑
    if (!isPageDoneLoading(changeInfo)) {
        return;
    }
    const url = tab.url;
    const ticketId = url.substring(url.lastIndexOf("/") + 1);
    if (isTargetURL(url) && !isNaN(ticketId)) {
        chrome.storage.local.get('CURRENT_TICKET_ID').then(({ CURRENT_TICKET_ID }) => {
            if (!CURRENT_TICKET_ID || CURRENT_TICKET_ID !== ticketId) {
                chrome.storage.local.set({ CURRENT_TICKET_ID: ticketId });
                const props = getProperties(ticketId);
                chrome.tabs.sendMessage(tabId, { action: {ticketId, props: props} });
            }
        });
    }
}

// 安装时注册监听
chrome.runtime.onInstalled.addListener(() => {
    chrome.tabs.onUpdated.addListener(tabUpdatedHandler);
});

// 启动时也注册一次，防止进程重启后监听丢失
chrome.tabs.onUpdated.addListener(tabUpdatedHandler);

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