使用declarativeNetRequest对requestHeaders执行append操作报错如何解决？

报错根因 #

Chrome 的 declarativeNetRequest 目前仅支持对响应头（responseHeaders）使用 append 操作，请求头（requestHeaders）的修改仅允许 set 和 remove 两种操作类型，你配置的规则使用了请求头的 append 操作，所以会触发规则校验失败报错。

解决方案 #

方案1：无需保留原有请求头值的场景 #

如果原有请求中不存在目标头，或者允许直接覆盖原有值，直接修改规则的 operation 字段为 set 即可，修改后规则如下：

{
   "id": 1, 
   "priority": 1, 
   "action": {
      "type": "modifyHeaders", 
      "requestHeaders": [{"header": "someHeader", "operation": "set", "value": "newValue"}]
   }, 
   "condition": {
      "urlFilter": "*",
      "resourceTypes": ["main_frame", "xmlhttprequest"]
   }
}

该方案无需额外权限，完全依赖 declarativeNetRequest 实现，性能最优。

方案2：需要保留原有请求头值、实现拼接追加的场景 #

declarativeNetRequest 本身没有读取现有请求头值的能力，这种场景需要配合 webRequest API 实现：

1. 首先在 manifest.json 中添加相关权限配置（Manifest V3 示例）：

{
  "manifest_version": 3,
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

2. 在后台脚本 background.js 中添加请求头修改逻辑：

chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    // 匹配目标请求头，统一转小写避免大小写问题
    const targetHeader = details.requestHeaders.find(item => item.name.toLowerCase() === 'someheader');
    if (targetHeader) {
      // 原有头存在则拼接新值
      targetHeader.value = `${targetHeader.value}; newValue`;
    } else {
      // 原有头不存在则新增
      details.requestHeaders.push({
        name: 'someHeader',
        value: 'newValue'
      });
    }
    return { requestHeaders: details.requestHeaders };
  },
  // 匹配规则和你原配置保持一致
  {
    urls: ["<all_urls>"],
    types: ["main_frame", "xmlhttprequest"]
  },
  ["blocking", "requestHeaders", "extraHeaders"]
);

该方案可以完全实现你预期的保留旧值、拼接新值的需求。

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