前言

作为一个前端开发,

在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有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而不是硬盘了。

好了,不瞎扯了,本篇博客到此结束。如有疏漏之处,还请不吝赐教。

自制Chrome扩展插件:用于重定向js的更多相关文章

  1. 认识Chrome扩展插件

    1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...

  2. BlazeMeter发布chrome扩展插件,支持JMeter脚本创建

    BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

  3. 那些离不开的 Chrome 扩展插件

    虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...

  4. Chrome扩展插件流程

    一.浏览器插件基础步骤: 1.文件最基础的配置 : 一个manifest文件.一个或多个html文件.可选的一个或多个javascript文件.可选的任何需要的其他文件,例如图片:在开发应用(扩展)时 ...

  5. 17 款程序员必备 Chrome扩展插件,爱了爱了!

    整理:小哈学Java 目录 美化 Just Black 午夜黑官方主题 Dark Reader 暗黑主题 为什么你们就是不能加个空格呢? 标签管理 Momentum [新标签页] Tab Manage ...

  6. Do Chrome extensions access iframes? chrome扩展插件访问所有iframes

    32down voteaccepted Yes, a Chrome Extension "content script" can run in all iframes (that ...

  7. chrome 扩展插件提示

    --force-fieldtrials=ExtensionDeveloperModeWarning/None/ ogfahjpoemnbbnlignjbfinfnahmfdlk ahjaciijnoi ...

  8. 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

    Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...

  9. 有哪些可以节省chrome内存的扩展插件?

    不知道从什么时候开始,chrome浏览器就这样不知不觉的超过IE浏览器成为全球第一大浏览器.我们在赞赏chrome浏览器流畅的速度时,更多的是对其chrome插件功能的赞赏.但是我们也发现了一个致命的 ...

随机推荐

  1. QT从入门到入土(八)——项目打包和发布

    引言 新手上路可谓是困难重重,你永远不知道下一个困难会在什么时候出现,在完成了运动控制卡封装发布过程中可谓是举步维艰.因此记录一下qt5+vs2019的打包发布方法. 打包一般分为两步: 将编译后的e ...

  2. Spring全家桶--单数据源的配置

    前言 spring数据源的配置网络上有很多例子,这里我也来介绍一下单数据源配置的例子,基于SpringBoot的方式和原生的Spring的方式. 一.生成项目骨架(SpringBoot),运行一个简单 ...

  3. 【java虚拟机】jvm调优

    转自:https://www.cnblogs.com/starhu/p/6400348.html?utm_source=itdadao&utm_medium=referral 堆大小设置JVM ...

  4. 【IDE】WebStorm常用快捷键

    WebStorm常用快捷键 1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件. 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明 ...

  5. vim conf文件配色

    VIM conf文件配色 一.配置文件 1.下载Nginx配置文件的语法文件:nginx.vim wget http://www.vim.org/scripts/download_script.php ...

  6. 等待唤醒机制----线程池----lambda表达式

    1.等待唤醒机制 1.1线程间通信 概念:多个线程在处理同一个资源,但是处理的动作(线程的任务)却不相同. 比如:线程A用来生成包子的,线程B用来吃包子的,包子可以理解为同一资源,线程A与线程B处理的 ...

  7. MongoDB查询或修改内嵌文档

    作为非关系型数据库中的佼佼者,MongoDB一大优势在于能够在一条文档中存储对象类型的数据,适当增加冗余来让数据库更好用.文档中一个对象类型的字段在MongoDB中被称为内嵌文档(Embedded) ...

  8. 技术调研,IDEA 插件怎么开发「脚手架、低代码可视化编排、接口生成测试」?

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 不踩些坑,根本不是成熟的码农! 你觉得肯德基全家桶是什么?一家人一起吃的桶吗,就那么 ...

  9. validity属性返回对象中的属性值

  10. 786. 第k个数

    题目传送门 一.理解感悟 1.这是快速排序模板的练习题. 2.不一样的地方在于它可以利用快排模板,但却不需要真的把所有数据排序完成,每次一分为二后,只关心自己所有的那一半,就是可以节约一半的递归. 3 ...