如何将网站的 JS 替换成本地内容

312 阅读1分钟

背景

最近在做 type chanllenge 9616 - Parse URL Params 的时候其引入的三方包经常报错:

import type { Equal, Expect } from '@type-challenges/utils'

Cannot find module '@type-challenges/utils' or its corresponding type declarations.(2307)

最后调试发现是通过 cdn.jsdelivr.net 引入的 dts,但是某些情况该 cdn 访问不了,但是我们知道国内有速度特别快的替代即 cdn.jsdmirror.com

image.png

我们如何将其修改成这个速度更快的 cdn 呢?

将其 host 修改成可以访问的 cdn?不行浏览器会因为安全策略拦截。

Tampermonkey 行不?倒是可以通过拦截 fetch 函数做 path 重写,但是比较麻烦,好处是做一次其他网站立即使用。

要是我们能直接修改源代码就好了。

override content

找到源文件 apis.js 后右键点击“override content”,随便选择一个文件夹。 然后直接浏览器修改 js 文件,ctr + s 后刷新页面,即可看到我们的文件被替换成相应的 cdn 地址了。

image.png

注意修改 js 文件而非 ts

image.png

总结

无需三方工具我们直接利用浏览器的能力就能完成源码的替换,可以做的事情就很多了,大家可以自行试试。