寫了個chrome插件：攔截ajax請求並修改返回結果！

用空閒時間搞了這個插件，能夠攔截頁面上的 ajax 請求，並把返回結果替換成任意文本。它對 mock數據、排查一些線上問題等會有很大幫助。（固然 chales 等抓包軟件也能夠作到，然而使用起來比較繁瑣，作成 chrome 插件的形式會方便許多）

如下是使用效果，用掘金這個網站示例。經過修改 ajax 請求結果，我把第一條文章標題替換成了「這標題特調皮（Σ（ﾟдﾟlll）句內三押×2）」：

（不瞞大家說，其實我是個rapper σ`∀´)σ  （不

使用示例（視頻）

https://weibo.com/tv/v/HlVZD8cR9?fid=1034:4352275389595232

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 的值覆蓋爲你設置的值。
其它就是這段頁面上的 js 代碼和右側彈出的 iframe (用戶界面)以及插件後臺代碼的一些數據交互和存儲上的實現，這部分比較雜就不介紹了~ 

0.4版本開始也支持修改fetch發起的請求了，稍微複雜一些，感興趣的能夠看一下源碼。

源碼在這裏：github.com/YGYOOO/ajax…

核心代碼在這個文件裏：github.com/YGYOOO/ajax…

更新：

0.4版本：

fetch發起的請求也支持了。

0.3版本：

主要新增了 JSON 編輯功能，編輯 JSON 數據方便了不少~示例以下：

本人不按期寫點可能有養分的文章，歡迎關注 σ`∀´)σ