自制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这两个属性，你看不懂代码就别动，只替换值即可。

大概修改完这两个地方就可以使用了