Chrome扩展Manifest V3：如何修改网络请求与响应的Cookie头？

需求：在Web请求到达Web应用前，为响应的Set-Cookie头添加Tab ID作为前缀；同时在Web请求发往服务器前，移除请求Cookie头中的该前缀。
遇到的问题：declarativeNetRequest API不支持设置动态（运行时）值，且Manifest V3已调整原V2中webRequestBlocking的使用方式。
原V2实现代码：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    const { tabId, responseHeaders } = details;
    responseHeaders.forEach((responseHeader) => {
      if (
        responseHeader.name.toLowerCase() === 'set-cookie'
      ) {
        responseHeader.value = `${tabId}_${responseHeader.value}`;
      }
    });
    return { responseHeaders };
  },
  { urls: allowedURLs },
  [
    'blocking',
    'responseHeaders',
    chrome.webRequest.OnBeforeSendHeadersOptions.EXTRA_HEADERS
  ].filter(Boolean)
);

实现思路 #

Manifest V3中，chrome.webRequest的blocking模式并未完全移除，但需要在Service Worker中使用，同时需在manifest中声明对应权限。我们可以通过注册两个监听器分别处理响应头和请求头：

• onHeadersReceived：拦截响应，为Set-Cookie添加Tab ID前缀
• onBeforeSendHeaders：拦截请求，移除Cookie头中的Tab ID前缀

步骤1：配置manifest.json #

确保添加必要的权限和Service Worker入口：

{
  "manifest_version": 3,
  "name": "Cookie Tab ID Handler",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["<all_urls>"], // 替换为你需要的目标URL范围
  "background": {
    "service_worker": "background.js"
  }
}

步骤2：编写Service Worker代码（background.js） #

const allowedURLs = ["<all_urls>"]; // 替换为你的目标URL

// 处理响应：为Set-Cookie添加Tab ID前缀
chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    const { tabId, responseHeaders } = details;
    // 过滤并修改Set-Cookie头
    const modifiedHeaders = responseHeaders.map(header => {
      if (header.name.toLowerCase() === 'set-cookie') {
        return {
          name: header.name,
          value: `${tabId}_${header.value}`
        };
      }
      return header;
    });
    return { responseHeaders: modifiedHeaders };
  },
  { urls: allowedURLs },
  ["blocking", "responseHeaders", "extraHeaders"]
);

// 处理请求：移除Cookie头中的Tab ID前缀
chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    const { requestHeaders } = details;
    const modifiedHeaders = requestHeaders.map(header => {
      if (header.name.toLowerCase() === 'cookie') {
        // 移除每个Cookie键前的Tab ID前缀（格式：tabId_xxx=yyy）
        return {
          name: header.name,
          value: header.value.replace(/(\d+)_([^=]+)=/g, '$2=')
        };
      }
      return header;
    });
    return { requestHeaders: modifiedHeaders };
  },
  { urls: allowedURLs },
  ["blocking", "requestHeaders", "extraHeaders"]
);

关键说明 #

1. 权限声明：必须在permissions中添加webRequest和webRequestBlocking，同时host_permissions指定目标URL范围，不能省略。
2. Service Worker环境：所有webRequest监听器必须注册在Service Worker中，V3不再支持在普通背景页中使用blocking模式。
3. extraHeaders参数：添加该参数确保能处理所有类型的头（包括某些默认不暴露的头），和V2中的EXTRA_HEADERS作用一致。
4. 请求头处理：使用正则表达式匹配并移除Cookie键前的tabId_前缀，确保服务器收到的是原始Cookie名称。

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