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

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

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

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

使用示例（視頻）

weibo.com/tv/v/HlVZD8…ajax

Chrome 商店地址

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

你也能夠直接搜索 Ajax Interceptor 進行安裝瀏覽器

注意

建議第一次安裝完重啓瀏覽器，或者刷新你須要使用的頁面。markdown
當你不須要使用該插件時，建議把開關關上（插件icon變爲灰色），以避免對頁面正常瀏覽形成影響。app
該插件只會在JS層面上對返回結果進行修改，即只會修改全局的XMLHTTPRequest對象和fetch方法裏的返回值，進而影響頁面展示。而你在chrome的devtools的network裏看到的請求返回結果不會有任何變化。函數

大體原理

頁面加載時往頁面上注入 js 代碼，這段 js 會生成一個 XMLHttpRequest 的代理對象，並把 window.XMLHttpRequest 替換成這個對象。該對象又會對 onreadystatechange 和 onload 兩個回調函數作特殊處理，在它們執行時把 responseText 和 response 的值覆蓋爲你設置的值（不過這兩個值不是writeable的，要單獨處理下）。
其它就是這段頁面上的 js 代碼和右側彈出的 iframe (用戶界面)以及插件後臺代碼的一些數據交互和存儲上的實現，這部分就很少介紹了~ oop

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

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

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

更新：

0.4版本：

fetch發起的請求也支持了。

0.3版本：

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

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