Chrome必裝插件

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

• 后端不愿意造數(shù)據(jù)的時候，我用它
• 接口返回的數(shù)據(jù)不理想的時候，我用它
• 測試邊界值的時候，我用它
• 復現(xiàn) bug 的時候，我用它

鐺～鐺～鐺～， 鐺！它就是ajax-interceptor

1. 我是怎么發(fā)現(xiàn)它的？

剛開始寫前后端分離項目時，我碰到了一個脾氣不太好的后端搭檔，他總是不愿意配合造數(shù)據(jù)，于是我萌生了要寫一個響應(yīng)攔截器的想法，在查資料實現(xiàn)的過程中，發(fā)現(xiàn)了這個插件。到現(xiàn)在，我用這個插件有2-3年了，真是愛不釋手??！

2. 作用

你可以用該插件修改頁面上Ajax請求的返回結(jié)果。

用法

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

2. 打開插件

3. 界面介紹
   本身的界面：

修改后的界面：

4. 使用方法看視頻教程：
   這里以修改文章列表中第一篇文章的title為例

注意事項

1. 建議第一次安裝完重啟瀏覽器，或者刷新你需要使用的頁面。
2. 當你不需要使用該插件時，建議把開關(guān)關(guān)上（插件icon變?yōu)榛疑?，以免對頁面正常瀏覽造成影響。
3. 該插件只會在JS層面上對返回結(jié)果進行修改，即只會修改全局的XMLHTTPRequest對象和fetch方法里的返回值，進而影響頁面展現(xiàn)。而你在chrome的devtools的network里看到的請求返回結(jié)果不會有任何變化

如何修改插件添加標簽功能

作為資深用戶，我覺得唯一不好的一點就是，當攔截的請求過多的時候，界面上不能很容易的區(qū)分出每個請求，必須要點到url里面查看才能知道，急需要一個備注或者標簽的功能，所以我找到源碼?)，自己加了一個。在iframe目錄下的main.js中，找到界面：

別忘了修改處理函數(shù)和刪除函數(shù)喲，修改之后重新構(gòu)建添加到chrome 插件中就行啦。最后界面就是上面這個樣子：

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

tips

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

了解了插件能做的事情之后，我自己也寫了一些簡單的小插件：

• 比如隱藏指定頁面?zhèn)冗厵诤蚳eader 因為我不喜歡看廣告，還有不想被經(jīng)過的人發(fā)現(xiàn)我在做什么，所以我寫了這個：

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

chrome extensions 幫助我更好的工作和生活，最重要的是學到了一些解決問題的新思路。查看官方文檔chrome extensions 官方文檔開啟你的插件開發(fā)之旅吧。

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