Manifest V3中Service Worker向Content Script传递webRequest详情失败

尝试使用chrome.webRequest.onBeforeSendHeaders将特定请求的头信息从Service Worker发送到Content Script，已在浏览器网络面板确认请求发起，但Content Script的控制台未打印接收到的消息。相关代码如下：

manifest.json #

{
  ...,
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "webNavigation",
    "webRequest"
  ]
}

background.js #

async function getCurrentTab() {
  let [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  return tab;
}

chrome.webRequest.onBeforeSendHeaders.addListener(
  async (details) => {
    let tab = await getCurrentTab();
    chrome.tabs.sendMessage(tab.id, 
      {message: "request_headers", payload: details.requestHeaders}
    );
  },
  {urls: ["https://api.example.com/resource.json"]},
  ['requestHeaders']
);

content.js #

chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.message === "request_headers") {
      console.log(request.payload);
    }
  }
);

核心问题1：标签页定位错误 #

原代码用getCurrentTab()获取当前激活的标签页，但发起请求的标签页可能处于后台未激活状态，导致消息发送到了错误的标签页，Content Script自然收不到。

应该直接使用details.tabId（webRequest回调参数自带的发起请求的标签页ID），无需额外查询。

核心问题2：权限与错误处理缺失 #

• 扩展需要明确拥有目标域名的访问权限，否则无法向对应标签页发送消息或监听请求
• chrome.tabs.sendMessage可能因标签页未加载完成、Content Script未注入等原因失败，需添加错误捕获

修正后的代码 #

background.js

chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 排除非标签页发起的请求（如扩展自身请求）
    if (details.tabId === -1) return;

    chrome.tabs.sendMessage(details.tabId, {
      message: "request_headers",
      payload: details.requestHeaders
    }).catch(err => {
      console.error("消息发送失败:", err);
    });
  },
  {urls: ["https://api.example.com/resource.json"]},
  ['requestHeaders']
);

manifest.json

补充host_permissions确保扩展能访问目标域名：

{
  ...,
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs",
    "webNavigation",
    "webRequest"
  ],
  "host_permissions": [
    "https://example.com/*",
    "https://api.example.com/*"
  ]
}

content.js

添加初始化日志，确认脚本已加载：

console.log("Content Script已加载，监听消息中");

chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    console.log("收到消息:", request);
    if (request.message === "request_headers") {
      console.log("请求头信息:", request.payload);
    }
  }
);

1. 重新加载扩展，确保修改后的配置生效
2. 打开https://example.com/页面，查看控制台是否打印初始化日志
3. 触发目标请求https://api.example.com/resource.json，检查Content Script控制台是否输出请求头信息

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