Chrome扩展重定向URL时如何附加自定义请求头？

问题分析 #

• 你用chrome.webRequest.onBeforeSendHeaders时，自定义头只出现在OPTIONS预检请求、实际请求缺失，首先代码存在语法错误：const headers = "My Value; 缺少闭合双引号，这会直接导致脚本无法正常执行，是首要问题。
• 其次，chrome.webRequest.onBeforeRequest用法错误：该事件的返回值不支持requestHeaders字段，只能返回redirectUrl或cancel，所以你试图在这里添加请求头的操作完全无效。

正确实现方案 #

要完成「指定URL重定向+重定向后请求加自定义头」的需求，需要结合两个事件：用onBeforeRequest处理重定向，用onBeforeSendHeaders在重定向后的请求中添加自定义头，同时确保权限配置正确。

1. 修正manifest.json权限配置 #

确保在manifest.json中声明必要的权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["<all_urls>"], // 也可指定你需要的目标URL范围
  "background": {
    "service_worker": "background.js"
  }
}

注：Manifest V2中需用background.page或background.scripts配置背景脚本，无需service_worker。

2. 背景脚本（background.js）正确代码 #

// 第一步：处理指定URL的重定向
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 替换成你需要触发重定向的源URL规则
    if (details.url.startsWith("https://oldurl.com/")) {
      return {
        redirectUrl: "https://newurl.com/" // 替换成你的目标URL
      };
    }
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

// 第二步：为重定向后的请求添加自定义头
chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 仅针对重定向后的目标URL添加头
    if (details.url.startsWith("https://newurl.com/")) {
      const customHeader = { name: "New Header", value: "My Value" };
      // 检查是否已存在该头，避免重复添加
      const headerExists = details.requestHeaders.some(h => h.name.toLowerCase() === customHeader.name.toLowerCase());
      if (!headerExists) {
        details.requestHeaders.push(customHeader);
      }
      return { requestHeaders: details.requestHeaders };
    }
  },
  { urls: ["https://newurl.com/*"] }, // 精准匹配目标URL，减少不必要的请求处理
  ["blocking", "requestHeaders", "extraHeaders"]
);

关键注意点 #

• 先修复语法错误：所有字符串、括号必须正确闭合，之前未闭合的引号会直接导致脚本崩溃，自然无法处理实际请求。
• 精准匹配URL：不要用<all_urls>全局匹配，针对重定向后的目标URL添加头，避免干扰其他请求。
• CORS预检兼容：浏览器对跨域请求发送的OPTIONS预检会被监听器处理，实际请求（GET/POST等）也会触发onBeforeSendHeaders，只要代码正确，自定义头会被添加到实际请求中。

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