使用浏览器插件修改request请求header头

前言

最近遇到了一个疑似header头引发的bug，需要修改header头来验证，于是写了个插件来实现

一、插件结构

浏览器插件相关的东西我这里就不说了，简单说下结构

background.js: 实现修改header头的逻辑，插件加载即运行
manifest.json: 插件的一些配置项

二、代码

1.插件配置项

manifest.json代码如下：

{
  "name": "editHeader",
  "description": "edit header",
  "version": "1.0.0",
  "manifest_version": 2,
  "permissions": ["webRequest", "webRequestBlocking", "http://*/*", "https://*/*"],
  "background": {
    "scripts": ["./background/background.js"],
    "persistent": true
  }
}

每个参数对应的含义我就不多说了，manifest.json的配置项很多，可以自己百度
其中比较关键的是permissions中的webRequest，这个配置了插件才能有拦截请求的权限

2.功能代码

background.js代码如下：

let targetUrl = 'https://gitee.com/' //要修改的目标url
let headerObj = {
  test: '123456',
  'User-Agent': '456'
} //要修改的header头参数，有则修改，无则添加
chrome.runtime.onInstalled.addListener(function () {
  console.log('插件已被安装')
})
function replaceHeader(url, requestHeaders) {
  if (url === targetUrl) {
    for (let key in headerObj) {
      const idx = requestHeaders.findIndex(x => x.name === key)
      if (idx !== -1) {
        // 有，则修改
        requestHeaders[idx].value = headerObj[key]
      } else {
        // 无，则添加
        requestHeaders.push({ name: key, value: headerObj[key] })
      }
    }
  }
  return requestHeaders
}
function updateListeners() {
  if (!listener)
    listener = function (details) {
      var header_map = { requestHeaders: details.requestHeaders }
      if (details && details.url && details.requestHeaders && details.requestHeaders.length > 0) {
        header_map = { requestHeaders: replaceHeader(details.url, details.requestHeaders) }
      }
      return header_map
    }
  chrome.webRequest.onBeforeSendHeaders.addListener(listener, { urls: ['<all_urls>'] }, ['requestHeaders', 'blocking', 'extraHeaders'])
}
var listener = null
updateListeners()

大致逻辑的话就是通过chrome提供的onBeforeSendHeaders钩子来修改header头

项目地址

github: https://github.com/Ceslsius/editHeader

总结

目前每修改一次参数就需要重新加载一次插件，后续的话准备做成可配置