三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

你还在手动粘贴请求头吗?Header Editor 让浏览器请求管理一步到位

你还在手动粘贴请求头吗?Header Editor 让浏览器请求管理一步到位

你还在手动粘贴请求头吗?Header Editor 让浏览器请求管理一步到位

【免费下载链接】HeaderEditorManage browser's requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor

你是否也经历过这样的场景:为了调试一个接口,反复在开发者工具里手动粘贴请求头;被跨域报错卡住大半天;想模拟手机访问某个网站,只能改完代码再刷新,如此循环。Header Editor(简称 HE)正是为这类浏览器请求管理问题而生的免费开源扩展——修改请求头、修改响应头、修改响应体、重定向请求、取消请求,它全部包办。

把每一次网络请求想象成一票快递:浏览器发货,服务器回执。Header Editor 就是坐在两者之间的分拣调度员——要不要给包裹换面单、改派收件地址、还是直接拒收,全都由你提前写好的"分拣规则"说了算。接下来,我们先看清它管什么,再亲手写完第一条规则。

一张表看懂:Header Editor 能替你管哪些请求

能力打个比方典型用途
修改请求头给发出的包裹换一张新面单自动附加登录令牌、伪装 User-Agent、反防盗链
修改响应头在回执单上补盖几个章补上 CORS 头解决跨域、给静态资源加缓存策略
修改响应体开箱换掉里面的内容测试页面渲染、本地 mock 数据
重定向请求中途改派收件地址公共库走镜像加速、HTTP 强制跳 HTTPS
取消请求连包裹一起拒收屏蔽统计脚本、广告追踪请求
规则管理整理分拣手册规则分组、导入导出、云同步

注意到没有?这六项能力背后其实是同一种设计:Header Editor 本身不内置任何功能,它只负责一件事——让你编写规则,再用规则去改造请求。这种"规则驱动"的极简思路,让所有行为都可预测、可导出、可分享,这也是它和许多写死功能的扩展最大的不同。

能力拆解①:给请求头换"面单",规则是这样写出来的

在 HE 里,一条规则由"匹配条件 + 执行动作"组成。匹配条件决定"管谁",执行动作决定"怎么管"。条件可以按网址前缀、完整域名、正则表达式、请求方法、资源类型来圈定;如果你勾选了多个条件,它们必须同时满足才生效。反过来说,只要命中任何一条排除条件,规则就会跳过这个请求——这个"一票否决"的设计,让精准放行变得非常省事。

比如说,你想让开发环境的所有接口请求都自动带上鉴权令牌,规则可以这样描述:

// 规则名:开发环境自动鉴权 // 匹配条件:网址前缀为 https://api.example.com/ // 执行动作:添加请求头 Authorization: Bearer your-token // 保存启用后,所有命中条件的请求都会自动"贴上新面单"

为什么这样设计?因为把"匹配"和"动作"拆成两个独立维度,你就能用同一套动作去服务几十个不同域名,也能为同一个域名叠加多套动作,互不干扰。

能力拆解②:让请求改道或直接拒收,两种拦截写法

请求重定向是 HE 的招牌能力之一,它的巧妙之处在于支持正则表达式的占位符。下面这条规则能把 Google 公共库的请求改道到镜像站点,一条规则同时覆盖多个子域名:

// 匹配条件:正则表达式 ^http(s?)://(ajax|fonts)\.googleapis\.com/(.*) // 重定向至:https://$2.proxy.ustclug.org/$3 // $1、$2、$3 会按顺序替换为正则里捕获到的分组

如果你想把请求直接拦下来,也不必新建特殊规则——在自定义函数里返回一个约定好的值即可:

// 自定义函数:拦截带广告追踪参数的请求 if (val.includes('utm_source')) { return '_header_editor_cancel_'; // 返回该值即取消请求 }

类似的约定还有_header_editor_remove_:把它填到头内容里,就能删掉某个头信息。用"特殊返回值"代替"再造一套规则",正是 HE 保持配置极简的秘诀。

能力拆解③:连响应体都能改,自定义函数的一键换装

前两条规则都属于"配置即用",而完整版(Full 版)还额外开放了自定义函数,相当于给了你一把 JavaScript 逃生舱。比如把某个网页返回内容里的所有 "baidu" 替换成 "Google":

// 修改响应体:接收解码后的文本,返回修改后的文本 return val.replace(/baidu/g, 'Google');

再比如给请求头动态打标记:

// 修改请求头:val 是头信息数组,直接修改它即可生效 for (const a in val) { if (val[a].name.toLowerCase() === 'user-agent') { val[a].value += ' HE/2.0.0'; // 在 UA 后追加版本号 break; } }

为什么这样设计?因为普通规则覆盖不了"根据请求内容动态计算"这类场景。但文档也反复提醒:能用普通规则解决的,就别用自定义函数——它的执行时机并不保证,多个函数之间的顺序也不确定。这种"先简单、后复杂"的克制设计,正是 HE 好用的底层原因。

从零开始的搭建流程:5 步写下第一条规则

现在,我们打开 HE 的管理面板,亲手走一遍完整流程:

  1. 安装扩展:在 Chrome、Firefox 或 Edge 的应用商店搜索 "Header Editor",按需选择 Lite 精简版或完整版。
  2. 打开管理面板:点击浏览器工具栏上的 HE 图标。
  3. 新建规则:点击右下角的"+"按钮。
  4. 配置匹配条件:先选一个网址前缀或域名,确认它能覆盖你的目标请求。
  5. 配置执行动作并保存:选好动作(比如"修改请求头"),填入头名称和值,保存并开启开关。

如果你不确定某个条件写没写对,可以先建一条"全部 URL + 修改 User-Agent"的规则验证流程,确认能生效后再收窄匹配范围。改完规则记得刷新页面,请求管理类规则只对刷新后发出的请求起作用。

新手最容易卡住的 4 个问题

Q1:我写的规则怎么不生效?简短答案:九成是匹配条件没写对,或者开关没开。 解决要点:先确认规则开关是打开状态;再用"全部"这种宽泛条件做对照实验;检查排除条件有没有误伤;最后确认是否在隐私模式下使用(Chrome 需要在扩展详情里开启"以隐身模式启用")。

Q2:为什么"头名称"自动变成小写了?简短答案:这是 4.0.0 起的正常行为。 解决要点:HTTP 规范(RFC 2616)明确规定头名称不区分大小写,HE 统一转小写,反而避免了大小写不一致带来的匹配问题。

Q3:开发者工具里看不到修改后的响应头,是失败了吗?简短答案:不是,开发者工具显示的是原始响应头。 解决要点:把content-type改为text/plain做个实验,如果页面变成纯文本显示,就说明修改真实生效了。

Q4:只想删掉某一个头,该怎么办?简短答案:把该头的值填成_header_editor_remove_。 解决要点:这是 HE 内置的"删除约定",比新建一条删除规则更省事。

玩法不止于此:云同步、规则分享与更多组合拳

  • 云同步兜底:自 4.0.5 起,规则和分组会自动备份到你的浏览器账号(如 Firefox Sync、Chrome 同步),换台电脑登录即可恢复,HE 自己不留存你的任何数据。
  • 规则即资产:规则支持导入导出 JSON,方便你在团队内分享、在不同浏览器间迁移;官方还提供了从其他同类扩展一键迁移的小工具。
  • 环境切换:把开发、测试、生产环境的规则放进不同分组,切换环境时一键启用对应分组。
  • 防盗链小技巧:很多图片防盗链的本质是检查Referer,把匹配到图片域名的请求的Referer改成可访问的页面即可。

动手体验或参与开发:clone、安装与构建

想先看看源码再决定怎么用?项目完全开源,本地跑起来只需几步:

git clone https://gitcode.com/gh_mirrors/he/HeaderEditor cd HeaderEditor pnpm i --frozen-lockfile npm run build:chrome_v2 # 构建 Chrome 完整版 npm run build:chrome_v3 # 构建 Chrome 精简版

开发模式下直接运行npm run start,浏览器会从dist_*目录加载扩展,改完代码即时生效。想深入研究实现,可以重点看两个位置:请求处理的核心逻辑在src/pages/background/request-handler/,规则与自定义函数的实现集中在src/share/core/;完整的使用文档在docs/docs/zh-CN/guide/,规则说明、自定义函数和云同步都有专门章节。

最后几句

从给请求头换面单,到让请求改道、拒收、甚至开箱换货,Header Editor 用"规则驱动"的简洁设计,把浏览器请求管理这件事变成了一张可以随时编辑的分拣手册。它免费、无广告、不收集任何数据,配置全部留在本地,还同时覆盖 Chrome、Firefox、Edge。

  • 🚀 规则即写即用,5 分钟上手第一条规则
  • 🔧 请求头、响应头、响应体、重定向、拦截一应俱全
  • ⚡ 精简版 DNR 模式性能出色,完整版开放自定义函数
  • 🔒 开源免费,数据本地存储,隐私无忧
  • 🌐 多浏览器支持,规则可导出可同步

下一次再遇到"这个接口怎么老报跨域""这个网站怎么老识别错设备"的烦恼,不妨先打开 Header Editor,写一条规则试试——你会发现自己也能成为网络请求的调度员。

【免费下载链接】HeaderEditorManage browser's requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

← 返回列表