写了一个可以拦截ajax请求并修改返回结果的chrome插件

这个插件可以拦截页面上的 ajax 请求,并把返回结果替换成任意文本。它对 mock 数据、排查一些线上问题等会有很大帮助。(当然 chales 等抓包软件也可以做到,然而使用起来比较繁琐,做成 chrome 插件的形式会方便许多)

以下是使用效果,通过修改 ajax 请求结果,我把第一条文章标题替换成了“这标题特调皮(Σ(゚д゚lll)句内三押×2)”:

使用示例(视频)

http://t.cn/EMvR6pa?m=4347641385182648&u=5352731024

Chrome 商店地址

地址:https://chrome.google.com/webstore/detail/ajax-interceptor/nhpjggchkhnlbgdfcbgpdpkifemomkpg

你也可以直接搜索 Ajax Interceptor 进行安装

注意

  1. 当你不需要使用该插件时,建议把开关关上,以免对页面正常浏览造成影响
  2. 暂不支持由 fetch 发起的请求

大致原理

页面加载时往页面上注入 js 代码,这段 js 会生成一个 XMLHttpRequest 的代理对象,并把 window.XMLHttpRequest 替换成这个对象。该对象又会对 onreadystatechange 和 onload 两个回调函数做特殊处理,把 responseText 和 response 的值覆盖为你设置的值。更详细的原理推荐看下这篇文章:https://www.jianshu.com/p/7337ac624b8e ,该插件实现原理与之基本类似。
其它就是这段页面上的 js 代码和右侧弹出的 iframe (用户界面)以及插件后台代码一些数据交互和存储上的实现,这部分比较杂就不介绍了~