如何为Chrome扩展的每个请求添加自定义请求头？

核心修复：补充拦截权限与必要参数 #

Manifest V3中，使用webRequest.onBeforeSendHeaders修改请求头时，必须指定blocking权限（用于拦截并修改请求流程），同时添加extraHeaders选项以支持自定义请求头的修改。你的原有代码缺少这两个关键参数，导致头信息无法生效。

修改后的代码示例：

browser.webRequest.onBeforeSendHeaders.addListener(
  function (details) {
    const headers = details.requestHeaders ?? [];
    // 先移除已存在的同名请求头，避免重复
    const filteredHeaders = headers.filter(h => h.name.toLowerCase() !== 'x-devqaly-request-id');
    filteredHeaders.push({
      name: 'x-devqaly-request-id',
      value: uuidv4()
    });
    return { requestHeaders: filteredHeaders };
  },
  { urls: ['https://api.codotto.com/*'] },
  ['requestHeaders', 'blocking', 'extraHeaders'] // 补充blocking和extraHeaders参数
);

验证Manifest配置完整性 #

确保manifest.json的权限配置覆盖需求，你当前的配置已满足基础要求，可优化host_permissions为目标域名以提升精准性：

{
  "name": "devqaly",
  "description": "Record your screen while we record network requests, clicks, and events in your backend",
  "manifest_version": 3,
  "...": "...",
  "permissions": [
    "storage",
    "webRequest",
    "scripting",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "https://api.codotto.com/*" // 直接指定目标域名，比<all_urls>更精准
  ]
}

额外排查点 #

• 确认uuidv4()函数可生成有效字符串：在控制台打印uuidv4()结果，确保不是空值或无效格式。
• 限定请求类型：若仅需拦截AJAX/Fetch请求，可在监听配置中添加types字段：types: ['xmlhttprequest', 'fetch']。
• 清除浏览器缓存：在开发者工具"网络"面板勾选"保留日志"，查看最新请求的头信息，避免缓存干扰。

关于替代方案的说明 #

declarativeNetRequest无法实现动态生成每个请求的唯一ID（规则中的头值为静态配置），因此webRequest是实现该需求的唯一可行方案。若上述修复后仍有问题，可尝试重启Chrome并重新加载扩展（开发模式下点击"重新加载"按钮）。

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