chrome插件:拦截ajax请求并修改返回结果

31,461 阅读2分钟

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

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

(不瞒你们说,其实我是个rapper σ`∀´)σ  (不

使用示例(视频)

weibo.com/tv/v/HlVZD8…

Chrome 商店地址

地址:chrome.google.com/webstore/de…

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

注意

  1. 建议第一次安装完重启浏览器,或者刷新你需要使用的页面。

  2. 当你不需要使用该插件时,建议把开关关上(插件icon变为灰色),以免对页面正常浏览造成影响。

  3. 该插件只会在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 数据方便了很多~示例如下:

本人不定期写点可能有营养的文章,欢迎关注 σ`∀´)σ