Chrome扩展Manifest V3无法通过webRequest修改请求头如何解决

问题核心原因 #

1. Manifest V3 中chrome.webRequest的阻塞式修改能力被默认限制，你当前的代码缺少blocking运行标识，也没有配置对应的权限。
2. Origin 属于受浏览器安全策略保护的请求头，原生 webRequest 修改在 Manifest V3 下有额外限制，更推荐使用官方替代方案declarativeNetRequest实现。

可行解决方案 #

方案1：调整webRequest配置（仅适用于企业部署或开发测试场景） #

Manifest V3 中普通公开发布的扩展无法使用webRequestBlocking权限，仅企业政策强制安装的扩展、开发者模式下的测试扩展可正常使用该方案。

步骤1：补充manifest.json配置

在permissions中添加webRequestBlocking权限，修正后配置如下：

"permissions": [
    "tabs",
    "scripting",
    "webRequest",
    "webRequestBlocking"
],
"host_permissions": [
    "https://*.foo.com/*",
    "https://*.bar.com/*"
]

步骤2：修正onBeforeSendHeaders监听逻辑

在第三个参数的extraInfoSpec中添加blocking标识开启阻塞修改能力，同时补充不存在Origin头时的新增逻辑，修正后代码如下：

chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
    let originExists = false;
    for (let i = 0; i < details.requestHeaders.length; ++i) {
        if (details.requestHeaders[i].name.toLowerCase() === 'origin') {
            details.requestHeaders[i].value = "https://bar.com";
            originExists = true;
            break;
        }
    }
    // 若请求原本不带Origin头则主动新增
    if (!originExists) {
        details.requestHeaders.push({
            name: "Origin",
            value: "https://bar.com"
        });
    }
    return { requestHeaders: details.requestHeaders };
}, {
    urls: ["https://*.foo.com/*"]
}, ['blocking', 'extraHeaders', 'requestHeaders']);

方案2：使用Manifest V3官方推荐的declarativeNetRequest API（推荐） #

该方案是Chrome官方为Manifest V3设计的请求修改方案，无发布权限限制，性能更高，无需后台代码常驻。

步骤1：补充manifest.json配置

添加declarativeNetRequest权限，同时配置静态规则引用：

"permissions": [
    "tabs",
    "scripting",
    "declarativeNetRequest"
],
"host_permissions": [
    "https://*.foo.com/*",
    "https://*.bar.com/*"
],
// 静态规则配置，也可通过API动态添加规则
"declarative_net_request": {
    "rule_resources": [
        {
            "id": "modify_origin_rules",
            "enabled": true,
            "path": "rules.json"
        }
    ]
}

步骤2：创建规则文件rules.json

在扩展根目录下创建rules.json，内容如下：

[
    {
        "id": 1,
        "priority": 1,
        "action": {
            "type": "setExtraHeaders",
            "headers": [
                {
                    "name": "Origin",
                    "value": "https://bar.com",
                    "operation": "set"
                }
            ]
        },
        "condition": {
            "urlFilter": "https://*.foo.com/*",
            "resourceTypes": ["main_frame", "sub_frame", "xmlhttprequest", "media", "image", "script"]
        }
    }
]

配置完成后重新加载扩展即可生效，所有匹配https://*.foo.com/*的请求都会自动将Origin头修改为指定值。

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