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

背景

最近在做 type chanllenge 9616 - Parse URL Params 的时候总是发现其引入的三方包报错:

ts 复制代码
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

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

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

Tampermonkey 行不?倒是可以通过拦截 fetch 函数做 path 重写倒也是可以,但是比较麻烦。

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

override content

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

注意修改 js 文件而非 ts

总结

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

相关推荐
To_OC8 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
小林ixn10 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面12 小时前
手搓最简前后端协作-node
javascript·数据库
kyriewen13 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜13 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
sugar__salt14 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
SmartBoyW15 小时前
CSS弹性布局(Flexbox)学习笔记:从零开始搞懂弹性布局
前端·javascript
用户9385156350715 小时前
写了这么久 useState,你真的知道它在干什么吗?
前端·javascript
烬羽15 小时前
递归老写崩?一个"退回"公式,把回溯题变成填空题
javascript·深度学习·算法
浮江雾17 小时前
Flutter第十七节-----路由管理(3)
android·开发语言·前端·javascript·flutter·入门