Manifest v3 Service Workers：如何为用户定义存储的URL设置webRequest监听器？

实用解决思路 #

• 临时全局监听器+精准监听器切换
  Service Worker启动时先同步注册<all_urls>的临时监听器，同时异步拉取storage里的用户自定义URL。拿到配置后立刻移除临时监听器，换成对应目标URL的精准监听器。为了防止SW在加载配置时休眠，可以通过给自己发空消息或者建立临时Port连接来保持SW活跃，直到配置加载完成。
  代码示例：

  // 保存临时监听器引用，方便后续移除
  const tempListener = async (details) => {
    const { targetUrls } = await chrome.storage.local.get('targetUrls');
    if (targetUrls.some(url => details.url.startsWith(url))) {
      // 处理请求体等核心逻辑
    }
  };
  
  // 同步注册临时全局监听器
  chrome.webRequest.onBeforeRequest.addListener(
    tempListener,
    { urls: ['<all_urls>'] },
    ['requestBody']
  );
  
  // 异步加载配置并切换监听器
  (async () => {
    const { targetUrls } = await chrome.storage.local.get('targetUrls');
    chrome.webRequest.onBeforeRequest.removeListener(tempListener);
    // 注册精准匹配的监听器
    chrome.webRequest.onBeforeRequest.addListener(
      (details) => {
        // 处理请求体逻辑
      },
      { urls: targetUrls.map(u => `${u}/*`) },
      ['requestBody']
    );
    // 主动释放活跃状态，让SW可以正常休眠
    chrome.runtime.sendMessage({ type: 'configReady' });
  })();
  

• 用storage.session做配置缓存
  在用户修改配置时，同时把配置写入chrome.storage.session，SW启动时优先从session读取配置（读取速度远快于local/sync），失败再回源拉取。虽然还是异步，但能大幅缩短临时监听器的运行时间，减少不必要的全局拦截。

关于异步订阅监听器的疑问 #

Manifest V3的Service Worker本质是事件驱动+按需唤醒的轻量级进程，如果允许异步注册监听器，浏览器无法提前知晓SW需要监听哪些事件，也就没法在对应事件触发时准确唤醒休眠的SW——毕竟SW休眠后，之前异步注册的监听器会完全失效，下次唤醒时没有同步注册的话，就收不到事件。这就是Chrome团队要求监听器必须在同步代码中注册的核心原因，虽然确实给动态配置场景添了不少麻烦。

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