ChromeLocalOverride本地文件替换

1. 背景

当我看到一个好看或者有意思的网站的时候，会习惯性地打开开发者工具，看一下是什么技术栈，怎么开发的。

不过我今天看到了一个网站，流光卡片，做的是卡片的分享功能的工具网站。

我习惯性的看了一下右上角的Wappalyzer和Vue Telescope，发现是Vue3开发的。然后准备打开 F12 查看一下控制台，但是发现快捷键被禁用了，有意思。

我直接点击鼠标右键，然后选中“检查”，打开了开发者工具，但是突然，就被跳转到了一个 404 页面。浏览器 history 也没有记录，又有意思了。然后我又打开一个控制台，约不到 1s 的时候，页面被关闭了。

哈哈，然后就激发了我的好奇心，怎么搞这一出哈哈。

2. 直接使用 Chrome Local Override 解决

我本来认为直接禁用 JavaScript 就可以的，不过我尝试了一下，不到 1s 的时候，页面就被关闭了。那这么短的时间我根本选不中禁用 JavaScript 的选项。要是提前禁用，页面就打不开了。

然后就想到了 Chrome Local Override 这个功能，既然网站是会监听控制台，然后直接关闭，那么肯定执行了 window.close() 这个方法。那我直接注释这个代码不就好了。

小插曲： 其实在跳转 404 页面的时候，能看到这个 404 页面的开发是 https://github.com/theajack/disable-devtool 这个项目的。所以这个网站应该是直接引入的 disable-devtool 这个包，并没有做太多的处理。

Chrome Local Override 文档: https://developer.chrome.com/blog/new-in-devtools-65?hl=zh-cn#overrides

1 开启 Chrome Local Override

这里其实很简单，我的浏览器好像默认就是开启的。点击控制台右上角 齿轮 按钮，然后往下拉，找到 Local overrides 选项，开启。

2 提前操作

因为那个页面会监听控制台，直接关闭，所以我们要提前操作，不能让它顺利执行。

所以我们先打开一个空白页面，然后打开控制台，找到 Event Listener Breakpoints 选项，然后找到 Script 选项，将其选中。

这样我们进入什么页面，都会在运行事件的时候被卡住。

3 选择文件夹

还是继续上一步的操作，在控制台左侧，找到 Overrides 的 Tab 选项，点击后，下面有个 Select folder for overrides 按钮，点击后，选择一个文件夹，然后系统顶部会弹出 DevTools 的请求权限的提示，点击 Allow 按钮，给其权限。

这一步就是选择一个文件夹，在浏览器中操作线上的文件，点击保存的时候，就是将这个文件和其路径保存到本地的文件夹中。假如本地只有文件，路径不对，其实线上也是没法替换的。所以直接在浏览器中操作修改文件，保存的时候会直接保存，再刷新，那本地的文件就会生效。

4 替换文件

我这里其实就是一步一步走断点，逆向 https://fireflycard.shushiai.com/explore 这个页面的使用的 disable-devtool 这个包。因为有关闭浏览器的代码，所以我在运行到的每个js文件中，搜索一下 window.close() 这个方法，然后注释掉，最后再 Ctrl + S 保存，刷新页面，其实就可以了。

然后再放开第二步的 Event Listener Breakpoints 的 Script 选项，刷新页面，就可以看到页面正常打开了。

可以从 DOM 上的 n-config-provider 知道，这个网站使用的 UI 库是 Naive UI。再看其它的 class 类名，CSS 库是 Tailwind CSS。