前端請(qǐng)裝上這個(gè) Chrome 插件

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

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

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

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

2. 作用

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

用法

1. 點(diǎn)擊上面的chrome商店地址就能直接安裝。
2. 打開(kāi)插件

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

修改后的界面：

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

注意事項(xiàng)

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

如何修改插件添加標(biāo)簽功能

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

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

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

tips

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

了解了插件能做的事情之后，我自己也寫(xiě)了一些簡(jiǎn)單的小插件：

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

• 給另一半的生日驚喜 給他安裝一個(gè)插件，在他生日當(dāng)天打開(kāi)瀏覽器的第一時(shí)間，彈出這樣的畫(huà)面：

想想，還是挺浪漫的吧！

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

參考資料