自製Chrome擴展插件：用於重定向js
- 2021 年 9 月 26 日
- 筆記
- Chrome擴展插件, javascript, js, 前端工程化, 開發工具, 有點秀
前言
作為一個前端開發，
在調試生產環境的程式碼時，是否苦於生產環境程式碼被壓縮，沒有sourcemap？
有沒有想過將生產環境的js直接重定向為本地開發環境的js？
玩微前端時，有沒有想過用本地的子應用js去替換線上的子應用js？
或者有沒有想過修改別人網站的文件，直接完成某些非常規操作？
最近因為項目開發中有這麼一個小需要，我寫了個chrome擴展插件解決這個問題，當然Edge瀏覽器也能用。
這個擴展插件安裝後，可以直接將一個js重定向為另一個js。
先給上這個擴展插件的倉庫地址：Demo
周六在家半天寫完的程式碼，糙了些，但還算能看。
原理
chrome擴展插件是什麼或者解壓縮的擴展插件怎麼玩，想要了解直接百度，這裡不會講這些。
這裡直接默認大家對擴展插件有一些基礎了解。
現在讓我們進入正題，本擴展插件使用的是Manifest V2的一個API：chrome.webRequest，Manifest V3中的declarativeNetRequest是不支援js重定向的。
直接貼簡化後的關鍵程式碼：
// 識別的所有js
let origins = {
common: 'nodeModules_eeb5887.js',
};
// 重定向的js
let redirects = {
common: '//s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js',
};
chrome.runtime.onInstalled.addListener(() => {
// 請求時回調
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// 如果請求的js，以origins.common結尾
if(details.url.endsWith(origins.common)){
// 直接將這個js替換為redirects.common
return { redirectUrl: redirects.common };
}
},
{
types:["script"],
urls: ["*://*/*.js"] // 進一步過濾js，這裡沒做進一步篩選
},
["blocking"]
);
});
我們在程式碼中直接監聽請求，在請求前看請求js的url是否以nodeModules_eeb5887.js結尾，如果是的話直接替換為vue_2.6.14.js。
有的朋友可能要問了，這個nodeModules_eeb5887.js和那個那麼長的一串vue_2.6.14.js是啥啊？
我是直接用百度翻譯那個頁面調試的擴展插件，所以nodeModules_eeb5887.js是百度翻譯的一個js文件，而很長的那個vue_2.6.14.js是B站隨便找的的一個js文件。
使用之後可以直接將百度翻譯頁面這個js文件，重定向為B站的這個js文件。
使用
其實這個擴展插件只是個demo，所以大家使用的時候可能要替換一點東西才能用，總共兩個地方：
-
第一點找到manifest.json這個文件，可以看到有這麼兩行程式碼：
"permissions": [ // ... "*://fanyi.baidu.com/", "*://fanyi-cdn.cdn.bcebos.com/" ],這是因為我調試時用的百度翻譯頁面，所以要申請訪問許可權，這裡要把你想要修改的頁面的域名和想要重定向的js的域名都替換上去。
-
第二點找到background.js這個文件，可以看到下面這個配置：
// 識別的所有js let origins = { common: 'nodeModules_eeb5887.js', framework: 'public_10b9d27.js' }; // 重定向的js let redirects = { common: '//s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js', framework: '//s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js' };上面的origins寫上被重定向的js，redirects寫上重定向的目標js。至於common和framework這兩個屬性，你看不懂程式碼就別動，只替換值即可。
大概修改完這兩個地方就可以使用了
演示
修改完之後我們用百度翻譯這個網站看下具體的效果，載入完擴展插件後，左鍵點擊我們的擴展插件圖標（就是那個寫輪眼的圖標），可以呼出彈窗：
此時我們可以看到common那一行選擇的是線上，此時它不會重定向百度翻譯這個頁面里js的請求。
我們可以看到這個頁面的nodeModules_eeb5887.js這個js仍然是請求的原地址。
當我們操作彈窗，選擇本地這個選項後：
再去刷新百度翻譯這個頁面：
我們可以看到頁面在請求nodeModules_eeb5887.js這個js文件時直接重定向，去請求vue_2.6.14.js這個js文件了。
總結
寫這個東西自己查查開發文檔看看資料就寫完了，就是最開始的方案是使用Manifest V3中的declarativeNetRequest，這玩意看文檔看到最後才發現特別標註js不能重定向，浪費了不少時間。
另外一個特別有感觸的點就是，寫這個擴展插件要用原生js。
我一直在寫react，已經很久沒寫原生js了，當我想著單選框radio應該用哪個元素時，一時竟然完全想不起來了，最後靠百度才知道要用input元素。
我又想起了一個月前面試的時候，別人問我js繼承有哪些，我知道他想問的是寄生式組合式這些鬼東西，但是我卻完全回憶不起來了，只能跟他說原型和class，只能說當時非常尷尬。
我曾經還專門寫了篇部落格講這個東西：【JS複習筆記】03 繼承（從ES5到ES6），最終的結果還是記憶模糊。
很多東西長期不用，真的就忘了。
說到部落格，最有趣的是，我自己寫的部落格，自己做的東西很多都忘記了。
比如那個看react的useEffect源碼的部落格，完全沒什麼印象了。
只能安慰自己是個CPU而不是硬碟了。
好了，不瞎扯了，本篇部落格到此結束。如有疏漏之處，還請不吝賜教。
