前端好幫手，請務必裝上這個 Chrome 外掛

chrome 瀏覽器上有很多外掛，我最喜歡的只有這一個，因為它解決了我工作中的很多麻煩。相信我，裝上它，你的工作會容易很多。

• 後端不願意造資料的時候，我用它

• 介面返回的資料不理想的時候，我用它

• 測試邊界值的時候，我用它

• 復現 bug 的時候，我用它

鐺～鐺～鐺～， 鐺！它就是 ajax-interceptor ^[1]

1. 我是怎麼發現它的？

剛開始寫前後端分離專案時，我碰到了一個脾氣不太好的後端搭檔，他總是不願意配合造資料，於是我萌生了要寫一個響應攔截器的想法，在查資料實現的過程中，發現了這個外掛。到現在，我用這個外掛有2-3年了，真是愛不釋手啊！

2. 作用

你可以用該外掛修改頁面上Ajax請求的返回結果。

用法

1. 點選上面的chrome商店地址就能直接安裝。

2. 開啟外掛

3. 介面介紹

修改後的介面：

4. 使用方法看影片教程：

注意事項

1. 建議第一次安裝完重啟瀏覽器，或者重新整理你需要使用的頁面。

2. 當你不需要使用該外掛時，建議把開關關上（外掛icon變為灰色），以免對頁面正常瀏覽造成影響。

3. 該外掛只會在JS層面上對返回結果進行修改，即只會修改全域性的XMLHTTPRequest物件和fetch方法裡的返回值，進而影響頁面展現。而你在chrome的devtools的network裡看到的請求返回結果不會有任何變化

如何修改外掛新增標籤功能

作為資深使用者，我覺得唯一不好的一點就是，當攔截的請求過多的時候，介面上不能很容易的區分出每個請求，必須要點到url裡面檢視才能知道，急需要一個備註或者標籤的功能，所以我找到 原始碼 ^[2] )，自己加了一個。在iframe目錄下的main.js中，找到介面：

別忘了修改處理函式和刪除函式喲，修改之後重新構建新增到chrome 外掛中就行啦。最後介面就是上面這個樣子：

這樣是不是直觀一些？哈哈。

tips

要感謝當年那位同事，我為了自己方便也造了些輪子學到些東西(搞懂了nginx配置解決頁面重新整理404，寫nodeServer做請求轉發解決跨域等)。

瞭解了外掛能做的事情之後，我自己也寫了一些簡單的小外掛：

• 比如隱藏指定頁面側邊欄和header 因為我不喜歡看廣告，還有不想被經過的人發現我在做什麼，所以我寫了這個：

• 給另一半的生日驚喜 給他安裝一個外掛，在他生日當天開啟瀏覽器的第一時間，彈出這樣的畫面：

想想，還是挺浪漫的吧！

chrome extensions 幫助我更好的工作和生活，最重要的是學到了一些解決問題的新思路。檢視官方文件 chrome extensions 官方文件 ^[3] 開啟你的外掛開發之旅吧。

幫助他人就是幫助自己，好東西當然要分享給大家。如果大家有有趣的點子也希望分享給我，一起做有趣的事啊！希望文章能對你有所幫助。關注我，定能有一點點收穫！