用空闲时间搞了这个插件,可以拦截页面上的 ajax 请求,并把返回结果替换成任意文本。它对 mock数据、排查一些线上问题等会有很大帮助。(当然 chales 等抓包软件也可以做到,然而使用起来比较繁琐,做成 chrome 插件的形式会方便许多)
以下是使用效果,用掘金这个网站示例。通过修改 ajax 请求结果,我把第一条文章标题替换成了“这标题特调皮(Σ(゚д゚lll)句内三押×2)”:
(不瞒你们说,其实我是个rapper σ`∀´)σ (不
使用示例(视频)
Chrome 商店地址
地址:chrome.google.com/webstore/de…
你也可以直接搜索 Ajax Interceptor 进行安装
注意
-
建议第一次安装完重启浏览器,或者刷新你需要使用的页面。
-
当你不需要使用该插件时,建议把开关关上(插件icon变为灰色),以免对页面正常浏览造成影响。
-
该插件只会在JS层面上对返回结果进行修改,即只会修改全局的XMLHTTPRequest对象和fetch方法里的返回值,进而影响页面展现。而你在chrome的devtools的network里看到的请求返回结果不会有任何变化。
大致原理
页面加载时往页面上注入 js 代码,这段 js 会生成一个 XMLHttpRequest 的代理对象,并把 window.XMLHttpRequest 替换成这个对象。该对象又会对 onreadystatechange 和 onload 两个回调函数做特殊处理,在它们执行时把 responseText 和 response 的值覆盖为你设置的值(不过这两个值不是writeable的,要单独处理下)。
其它就是这段页面上的 js 代码和右侧弹出的 iframe (用户界面)以及插件后台代码的一些数据交互和存储上的实现,这部分就不多介绍了~
0.4版本开始也支持修改fetch发起的请求了,稍微复杂一些,感兴趣的可以看一下源码。
源码在这里:github.com/YGYOOO/ajax…
核心代码在这个文件里:github.com/YGYOOO/ajax…
更新:
0.4版本:
fetch发起的请求也支持了。
0.3版本:
主要新增了 JSON 编辑功能,编辑 JSON 数据方便了很多~示例如下:
本人不定期写点可能有营养的文章,欢迎关注 σ`∀´)σ