Chrome扩展Service Worker中Fetch事件未触发？是否为预期行为？

核心原因：Chrome扩展后台Service Worker无法监听网页的fetch事件 #

是的，这是Chrome扩展平台的明确限制。扩展的后台Service Worker运行在扩展自身的隔离上下文中，仅能捕获扩展内部发起的fetch请求（比如后台脚本、扩展弹窗/选项页的请求），完全无法监听第三方网页的fetch事件——这和常规网站的Service Worker逻辑不同，网站SW仅能监听自身域名下的请求，而扩展后台SW的作用域与网页上下文完全独立。

替代方案：通过Content Script拦截并修改网页请求体 #

要实现修改第三方网站的fetch请求体，最可靠的方式是使用Content Script注入到目标网页的上下文，重写原生fetch函数来完成拦截和修改。

具体实现步骤： #

1. 在扩展的manifest.json中配置Content Script，确保在网页加载早期注入：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你需要拦截的目标网站域名
      "js": ["content.js"],
      "run_at": "document_start" // 确保在网页脚本执行前完成注入
    }
  ]
}

2. 在content.js中重写fetch函数，拦截并修改请求体：

// 保存原生fetch方法
const originalFetch = window.fetch;

// 重写fetch实现拦截逻辑
window.fetch = async (...args) => {
  let [resource, options] = args;
  
  // 仅对目标请求做处理，可根据URL、请求方法等条件筛选
  if (options?.method === 'POST' && resource.includes('target-api-path')) {
    if (options.body) {
      // 解析请求体（示例为JSON格式，可根据实际格式调整）
      const bodyText = await new Response(options.body).text();
      let bodyData = JSON.parse(bodyText);
      
      // 修改请求体内容
      bodyData.targetKey = "modified-value";
      
      // 重新构造请求体
      options.body = JSON.stringify(bodyData);
      
      // 更新Content-Length请求头（若原请求有设置）
      if (options.headers) {
        options.headers.set('Content-Length', options.body.length.toString());
      } else {
        options.headers = new Headers({
          'Content-Length': options.body.length.toString()
        });
      }
    }
  }
  
  // 调用原生fetch发送修改后的请求
  return originalFetch(resource, options);
};

补充说明： #

• 若目标网站使用XMLHttpRequest而非fetch，需额外重写XMLHttpRequest的send方法以覆盖这类请求。
• 务必将run_at设为document_start，否则网页可能已提前调用fetch，导致拦截逻辑失效。
• 需根据目标网站的请求体格式（如FormData、纯文本等）调整解析和修改的代码逻辑。

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