- A+
前言
作为一个前端开发，
在调试生产环境的代码时，是否苦于生产环境代码被压缩，没有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这两个属性，你看不懂代码就别动，只替换值即可。
大概修改完这两个地方就可以使用了
演示
修改完之后我们用百度翻译这个网站看下具体的效果，加载完扩展插件后，左键点击我们的扩展插件图标（就是那个写轮眼的图标），可以呼出弹窗：
此时我们可以看到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而不是硬盘了。
好了，不瞎扯了，本篇博客到此结束。如有疏漏之处，还请不吝赐教。
