Chrome扩展Manifest V3如何获取请求头？（附Manifest V2旧代码）

针对你的需求，以下是适配Manifest V3的完整解决方案，基于你提供的Manifest V2代码修改：

1. Manifest.json 配置 #

Manifest V3对结构、权限和背景脚本做了核心调整，修改后的配置如下：

{
  "author": "hoseinx1225@gmail.com",
  "background": {
    "service_worker": "/src/js/background.js"
  },
  "description": "This extension is only available on some job boards.",
  "manifest_version": 3,
  "name": "my-extension",
  "permissions": [
    "cookies",
    "storage",
    "tabs",
    "webRequest"
  ],
  "host_permissions": [
    "*://*.linkedin.com/*"
  ],
  "version": "3.0.6",
  "action": {
    "default_icon": {
      "16": "/src/assets/icon.png",
      "32": "/src/assets/icon.png"
    },
    "default_title": "This extension is only available on some job boards."
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+1"
      },
      "description": "This extension is only available on some job boards."
    }
  },
  "options_ui": {
    "page": "/src/html/popup.html"
  },
  "icons": {
    "320": "/src/assets/icon.png"
  }
}

核心变化：

• 将manifest_version设为3
• 背景脚本从多文件scripts改为单服务工作者service_worker
• browser_action更名为action，对应命令_execute_browser_action改为_execute_action
• 目标站点权限从permissions移至单独的host_permissions字段
• 仅保留必要的webRequest权限，webRequestBlocking仅在需要修改请求头时才需添加

2. 背景服务工作者脚本 #

Manifest V3使用Service Worker作为背景逻辑载体，需将原多脚本合并引入：

// /src/js/background.js
importScripts(
  "/src/js/httpTrackerConstants.js",
  "/src/js/httpTrackerUtils.js",
  "/src/js/httpTrackerOpen.js",
  "/src/js/httpTrackerDomEvents.js"
);

3. 请求头监听逻辑适配 #

修改httpTrackerDomEvents.js以适配Manifest V3的webRequest API：

// /src/js/httpTrackerDomEvents.js
const trackUrls = {
  urls: ["*://*.linkedin.com/*"] // 限定监听目标站点，与host_permissions一致
};

const r = httpTracker.browser.webRequest;

// 配置监听参数：仅读取请求头无需blocking，Chrome需额外添加extraHeaders以获取受保护头
const reqHeadersOptions = ["requestHeaders"];
if (!httpTracker.isFF) {
  reqHeadersOptions.push("extraHeaders");
}

r.onBeforeSendHeaders.addListener(
  function(details) {
    console.log("请求头信息:", details.requestHeaders);
    // 在此处理读取到的请求头，例如存储到本地或传递至popup
    // 仅读取操作无需返回内容，若需修改请求头才需返回{requestHeaders: details.requestHeaders}
  },
  trackUrls,
  reqHeadersOptions
);

关键注意事项 #

• 受保护请求头访问：若需读取Cookie、Host等受保护头，必须添加extraHeaders参数，同时确保扩展已声明对应权限（如cookies）
• Service Worker限制：Service Worker无法访问DOM，若原代码有DOM操作需迁移至Popup或Content Script
• 浏览器兼容性：Firefox的Manifest V3实现与Chrome存在差异，保留原isFF判断可适配双平台

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