如何实现兼容Chrome与Firefox的扩展webRequest cookie操作

解决方案 #

核心思路是动态构建监听器的第三个参数数组，根据浏览器运行环境决定是否加入extraHeaders参数，避免硬编码导致的兼容问题。

实现代码 #

// 构建基础参数数组
const extraInfoSpec = ['blocking', 'requestHeaders']
// 判断是否为Chromium内核浏览器，仅这类浏览器需要extraHeaders参数
// 通过检测webRequest对象下是否存在EXTRA_HEADERS常量实现精准判断，无需依赖UA识别
if (chrome.webRequest.OnBeforeSendHeaders.hasOwnProperty('EXTRA_HEADERS')) {
  extraInfoSpec.push(chrome.webRequest.OnBeforeSendHeaders.EXTRA_HEADERS)
}

chrome.webRequest.onBeforeSendHeaders.addListener(
  data => { /* cookie manipulation logic */ },
  { urls: ['https://*/*'] },
  extraInfoSpec
)

兼容逻辑说明 #

• Chromium内核浏览器（Chrome、Edge等）的webRequestAPI会暴露EXTRA_HEADERS常量，对应值为extraHeaders，加入该参数后才能正常修改请求中的Cookie字段
• Firefox没有定义该常量，因此不会将extraHeaders加入参数数组，避免触发参数不支持的报错

如果遇到部分老旧Chromium版本不支持上述常量检测的情况，也可以通过navigator.userAgent判断浏览器类型作为兜底方案：

if (/Chrome|Edg/.test(navigator.userAgent)) {
  extraInfoSpec.push('extraHeaders')
}

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