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 插件的过程中，开发者需要明确拦截器的设计需求，包括支持修改请求 URL 和响应等功能。通过重写 fetch 和 XMLHttpRequest 方法，开发者可以灵活地处理网络请求，满足特定的需求。这样的设计思路不仅提高了插件的功能性，也为后续的扩展提供了基础。
与现有库的比较
文章提到现有的库如 mswjs 和 xhook 在功能上存在局限，无法完全满足开发者的需求。这表明在特定场景下，开发者可能需要自行实现解决方案，以获得更高的灵活性和控制力。这种自定义实现虽然增加了开发成本，但也能更好地适应特定的使用场景。
实现的局限性
尽管文章展示了完整的 fetch 和 xhr 拦截器的实现，但目前的实现仍存在一些局限性，例如未能记录所有事件和请求头信息。这提醒开发者在使用时需注意这些限制，可能需要进一步的优化和完善，以确保拦截器在各种情况下的有效性。
延伸问答
如何在 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、调用原始请求并修改响应等功能。
