Chrome Extension V3如何读取网络请求及响应头（不修改）

不需要用declarativeNetRequest（它确实主打修改规则），你可以用**webRequest API**来监听并读取请求和响应头，完全不需要修改内容。具体步骤如下：

1. 配置Manifest权限 #

在manifest.json中添加必要的权限：

{
  "manifest_version": 3,
  "name": "Request Reader",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webRequest"],
  "host_permissions": ["<all_urls>"] // 或者指定你需要监听的特定域名，比如"https://*.example.com/*"
}

• webRequest权限：允许扩展访问网络请求监听API
• host_permissions：指定你需要监听的请求域名范围，<all_urls>表示所有域名，按需缩小范围更安全

2. 在Service Worker中监听请求事件 #

在background.js中添加监听逻辑，获取请求URL和响应头：

// 监听出站请求，获取请求URL
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 这里可以获取请求URL、请求方法等信息
    console.log("请求URL:", details.url);
    console.log("请求方法:", details.method);
  },
  { urls: ["<all_urls>"] }, // 和host_permissions对应，限制监听范围
  [] // 不需要额外参数，因为我们只读信息
);

// 监听响应头接收事件，获取响应头
chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 这里可以获取响应头、状态码等信息
    console.log("响应状态码:", details.statusCode);
    console.log("响应头:", details.responseHeaders);
    // 比如获取特定响应头，比如Content-Type
    const contentType = details.responseHeaders.find(h => h.name.toLowerCase() === "content-type");
    if (contentType) {
      console.log("Content-Type:", contentType.value);
    }
  },
  { urls: ["<all_urls>"] },
  ["responseHeaders"] // 指定需要获取responseHeaders参数
);

关键说明 #

• onBeforeRequest事件：在请求发送前触发，适合获取请求的URL、方法、请求体（如果需要的话，要加requestBody参数）等信息
• onHeadersReceived事件：在响应头返回时触发，通过指定["responseHeaders"]参数可以拿到完整的响应头列表
• 所有监听逻辑都要放在Service Worker中（Manifest V3要求），不能放在普通页面脚本里

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