rxliuli blog
·
在 Chrome 插件中拦截网络请求
内容提要
本文介绍了如何在 Chrome 插件中拦截网络请求，主要针对 fetch 和 XMLHttpRequest 的实现。通过重写这两种方法，开发者可以修改请求和响应，并记录请求头信息。最终，作者将代码发布在 npm 上，供开发者使用。
关键要点
-
在实现 Chrome 插件 Mass Block Twitter 时，需要拦截网络请求以记录请求头信息。
-
现有的库无法满足需求，因此决定自己实现一个请求拦截器。
-
设计需求包括拦截 fetch/xhr 请求、支持修改请求 URL、调用原始请求并修改响应等。
-
实现 fetch 拦截器时，通过重写 globalThis.fetch 方法来运行中间件并调用原始 fetch。
-
实现 xhr 拦截器时，需要重写多个方法（如 open、send），并在调用 send 方法前运行中间件。
-
目前已实现完整的 fetch/xhr 拦截器，并发布至 npm 上的 @rxliuli/vista 包中。
延伸问答
如何在 Chrome 插件中拦截网络请求？
可以通过重写 fetch 和 XMLHttpRequest 方法来拦截网络请求，记录请求头信息并修改请求和响应。
为什么需要自己实现请求拦截器？
现有的库无法满足需求，特别是在 Chrome 插件的 Content Script 中无法使用 service worker，因此决定自己实现。
实现 fetch 拦截器的基本思路是什么？
通过重写 globalThis.fetch 方法，运行中间件并在合适的时机调用原始的 fetch。
xhr 拦截器与 fetch 拦截器有什么不同？
xhr 拦截器需要重写多个方法（如 open、send），而 fetch 拦截器只需重写一个函数，且 xhr 的请求参数是分步传递的。
如何使用实现的请求拦截器？
可以通过 npm 安装 @rxliuli/vista 包来使用已实现的 fetch/xhr 拦截器。
实现的请求拦截器有哪些功能？
支持拦截 fetch/xhr 请求、修改请求 URL、调用原始请求并修改响应等功能。
