一个好玩的浏览器插件-编程知识

一个好玩的浏览器插件

背景

最近抽空开发了一个有意思的浏览器插件。背景是我们在开发过程中有时需要做一些测试验证，需要修改请求头字段和响应头字段的内容，有时需要在页面做测试，反复请求同一个接口，并修改一些字段。
如果此时使用nginx做代理转发再修改的话，那就比较麻烦，还需要在本地配置一个nginx服务，所以就抽时间开发了一个浏览器插件，只需要安装好这个插件，按需将需要修改的请求地址和修改的请求头/响应头配置之后就可以了。

代理请求头

可以在插件请求头面板中点击新增按钮，然后再弹出的弹框中输入期望代理的URL规则。
在这里插入图片描述
比如这里以京东首页为例，新增了一条规则在发出getInfo请求的时候增加一个请求头的字段x-header-token对应的值为x-header-token。配置好之后保存规则

之后在规则列表中点击使用规则，此时该规则已近生效，我们可以看到后续浏览器发出xxx/getInfo请求时都会额外携带一个请求头的字段x-header-token: x-header-value:
在这里插入图片描述
除了新增请求头之外也可以按需设置规则，进行请求的阻断，请求头的替换和请求头的删除，比如我们需要测一下是否支持br压缩的话，可以将Accept-Encoding设置为br。然后再看压缩效果。
再比如我自己遇到的一个场景，代理调用某些服务的时候，网关对请求的Origin进行了校验，这样在开发的时候本地启动的127.0.0.1就会被拦截，此时只需要配置一下修改的规则，就可以把Origin给修改成自己想要的地址，就可以正常使用代理进行开发工作了

代理响应头

和代理请求头一样，也可以按照自己的需要去代理一些响应头，比如某些时候调用某些接口，我们期望返回一些额外的响应头信息帮助前端做一些验证。那就可以在代理响应头面板中进行设置。
比如下面，我们可以按照这样设置增加一个响应头规则。
在这里插入图片描述
同样配置好规则之后，在规则列表中开启这个规则。后面浏览器中接受到的这个接口的响应都会增加一个x-header-response: x-header-response-value的字段：

域名代理

这个功能可以帮我们配置域名的转发，一个很常用的场景就是线上的某些配置文件是从CDN的生产环境获取的(或者其他的一个资源服务)，此时需要从测试环境获取这个配置文件来帮我们快速的做一些验证或者测试的话，那我们就可以使用这个代理，将原本请求A服务的资源重定向到B服务。

发送请求

这个功能可以让我们在页面发送某些指定的请求来方便我们做一些观察或者实验，有时我们可能会使用浏览器的XHR重放请求，但此时请求所携带的Cookie是页面中的，这个插件牛逼的地方就是可以在同源下去发送这个请求，并且这个请求的Cookie是可以自定义的。比如下面这个请求，页面原本有自己的Cookie，但此时发送的这个请求的Cookie被我们设置的my-cookie覆盖了，其他接口没有影响，还是使用页面原本的Cookie这样在一些场景中可以帮我们做一些快速验证和测试。
在这里插入图片描述