今天给大家分享一个浏览器插件------ModHeader。
ModHeader，顾名思义，就是一个用来修改 Http 请求 Header 内容的浏览器插件。最初笔者也是在需求开发过程中需要修改请求头才发现并使用了它。不过最近一段时间，笔者突然在网页上看到一个悬浮球样式，点开后发现里面有不少实用的功能，因此决定分享一波～
这个插件的 chrome 插件市场链接是这个，看官网介绍，FF 和 Edge 也都有插件，有需求的同学可以自行下载。
看 chrome 插件市场中对该插件的评价，它有可能会在控制台留下很多报错，也可能会植入脚本给某 AI 打广告。笔者确实也遇到过几次在谷歌中搜索内容被篡改的情况，不过笔者平时都是把这个插件关小黑屋的，只会在用的时候启用。介意的同学请慎重考虑是否下载。
功能介绍
下面，笔者简单对这个插件做个介绍，并尝试学习一下里面部分功能的实现～
修改请求头、响应头
这个插件的最核心功能就是修改请求头和响应头了（这也是笔者最开始下载它的原因）。以 chrome 为例，当你安装完插件后，鼠标单击这个插件的 icon，就会弹出一个如下的设置页面，点击「+ Mod」，就可以选择要修改的内容，并往里面填充内容后，勾选前面的复选框，下一次发送的请求里面，就会带上你要添加/修改的内容啦。
你也可以添加一个过滤，来限制哪些页面/网页的哪些请求需要修改 Header。
上网查了一下，该能力是是利用了浏览器扩展（Extensions) API 中的 webRequest 相关的 API 实现的。从 MDN 的介绍可以看到，插件主要利用的是onBeforeSendHeaders和onHeadersReceived事件来分别修改请求头和响应头。利用 webRequest 相关的 API，还可以做一些取消、重定向请求的操作，看起来有很大的修改空间。有时间有兴趣的小伙伴可以开发个类似的插件玩玩～
点击页面上的悬浮球，可以看到里面显示了很多实用的信息和好用的工具，如网页统计信息、请求统计信息等，下面笔者对其中一些数据的获取做一些介绍：
网页内存占用
网页内存相关的信息获取，可以利用 performance 的 memory 属性获取了相关的数据（这个属性是非标准且已弃用，目前只有 chromium 系支持，官方推荐另一个 measureUserAgentSpecificMemory 方法，不过也是个实验性能力，兼容性也不太好，我用某度测试了一下没发现这个方法，不知道是不是姿势问题）。
下面介绍一下 performance.memory 的使用：
javascript
const memoryInfo = performance.memory;
const webMemory = memoryInfo.usedJSHeapSize;performance.memory属性返回的是一个MemoryInfo对象，其中，里面的usedJSHeapSize属性表示的是网页使用的内存的信息，以字节（byte）为单位，经过可读性优化得到的数据就和插件显示的数据接近啦。
DNS 解析时间、TCP 连接时间等
这些都可以通过读取performance.timing 属性得到（emmm，它也被废弃了，不过还有其他获取方式，下面介绍）。该属性返回的是一个PerformanceTiming对象，里面记录了一大堆从请求开始到页面触发onload事件结束的很多关键节点触发的时间点，是衡量网页性能的重要参考 。MDN 上有对该属性字段的详细解释，笔者也在 github 上找到了一篇相关内容的中文介绍，里面也对如何通过这些数据获取一些指标做了介绍，感兴趣的小伙伴可以看看～
javascript
//! 已废弃，建议用后面的方式获取
const timingInfo = performance.timing;
// 建议使用的方式，兼容性也不错
const timingInfo = performance.getEntriesByType('navigation');
const domainLookupTime = timingInfo.domainLookupEnd - timingInfo.domainLookupStart; // DNS 解析时间，如果为 0 就是读取了缓存
const TCPLinkTime = timingInfo.requestStart - timingInfo.connectStart; // TCP 连接时间，为 0 说明是复用了 TCP 连接还有一些其他的指标，上面提到的 github 博客中介绍得比较详细了，感兴趣同学直接看博客就好～
便捷工具
Mod Header 插件除了提供修改请求响应头、提供一些统计信息外，也提供了一些便捷的使用工具，如「允许网页复制」、「网页标尺」、「取色器」等，非常实用。这里笔者挑一些有些实现思路的讲讲，其他的等笔者研究研究，后面有时间再更新吧。
允许网页复制
允许网页复制换个词大家会更熟悉一些------解除网页复制限制。常用某猴脚本的小伙伴一定不会陌生，因为上面太多与之相关的脚本了。阻止用户复制一般有三种方式：（通过 CSS）阻止用户选中内容，（通过 JS）阻止用户选区，（通过 JS）阻止用户复制。那么相应的解除方式也就对应上：把阻止用户选中内容的 CSS（user-select: none;）移除，移除复制、选区相关的阻止事件，或在阻止事件前把内容获取到。
实际的场景可能会复杂一些，这就看插件作者怎么去匹配规则高效处理了。
网页标尺
个人感觉应该就是做了一个可以穿透事件（CSSpointer-events: none;）的遮罩，然后通过监听鼠标移动获取鼠标当前所在的target，通过ele.getBoundingClientRect()获取位置尺寸信息，然后封装组件实现标尺的能力。
二维码访问
就是把网站链接生成二维码。现在已经有不少现场的二维码生成库了，比较出名的有 QRCode.js，直接把要生成二维码的内容丢进去，配置一些参数，然后导出 canvas 或者 base64 图片数据就完事儿了。
导出网页 SVG
可能就是匹配所有的 svg 元素（然后可能会去个重），然后把这些 svg 元素列出来，点击下载时下载即可。
禁用样式
可以使用document.styleSheets这个属性，它能获取所有通过引用或者嵌入页面的 CSS 样式，然后遍历样式，分别切换禁用属性即可，属性介绍可见 MDN。下面是一个简单的实现：
javascript
let disabled = false;
function toggleCSSDisabled() {
disabled = !disabled;
for (const styleSheet of document.styleSheets) {
styleSheet.disabled = disabled;
}
}美化滚动条
直接给滚动条加上样式即可。就是插入了一个style标签，把相关样式注入进去，删除时再把这个节点移除。
查看复制样式
这个不确定实际的实现。个人感觉应该是利用了getComputedStyle这个 API 做的，但是怎么能得到比较精确的设置内容呢？这里不太了解，有时间还得钻研一下。
编辑网页内容
（这我可太熟了），就是给节点加上contenteditable=true属性即可，退出编辑时把这个属性重置回去。不过我用某度首页测试了一下，进入编辑时链接点击不会跳转，应该也是做了一些处理。
总结
- 笔者主要分享了一个个人感觉不错的浏览器插件------ModHeader。不过插件本身可能有些恰饭行为，建议小伙伴按需使用；
- 笔者对这个浏览器插件的功能进行了介绍，并对其中部分能力的实现进行了探索和学习，帮助感兴趣的小伙伴们和自己一起学习成长～