自制Chrome擴展插件：用于重定向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: 'https://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: 'https://s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js',
      framework: 'https://s1.hdslb.com/bfs/static/blive/live-region/libs/area-tags/vue_2.6.14.js'
  };

上面的origins寫上被重定向的js，redirects寫上重定向的目標js，至于common和framework這兩個屬性，你看不懂代碼就別動，只替換值即可，

大概修改完這兩個地方就可以使用了