1. 背景
如果你想在当前的页面，试一下某个 JS 工具库，而这个工具库恰好你没安装。（如 lodash）如果你想分享一段脚本给别人，而又不希望别人在执行的过程太过麻烦。（如你写了一段恢复复制和右键功能的脚本）
那下面的方法你可以尝试一下。
2. 常用方法
主要方法有如下。
2.1. 工具包的注入
复制如下代码，在 DevTools 中执行就可以了：
function ls(src, callback, prefix = "https://unpkg.com/") {
var _script = document.createElement("script");
_script.src = prefix + src;
_script.onload = (e) => {
console.log("===> 加载完成", src);
callback && callback();
};
document.head.appendChild(_script);
}
ls("工具包名");
如 lodash、jquery、dayjs：
ls("lodash", () => {
console.log('load:', _)
});
ls("jquery", () => {
console.log('load:', $)
});
ls("dayjs", () => {
console.log('load:', dayjs)
});
使用其他源：
ls("react/umd/react.production.min.js", () => {
console.log('load:', React)
}, 'https://unpkg.zhimg.com/');
ls("xstate@4/dist/xstate.js", () => {
console.log('load:', XState)
}, 'https://cdn.jsdelivr.net/npm/');
2.2. 脚本的注入
如下面这段清除水印及恢复右键、选取的脚本：
[document, ...document.getElementsByTagName("*")].map((item) => {
if (item.style) {
item.style.cssText += "user-select:auto!important;";
if (item.style.cssText.indexOf("url(") >= 0) {
item.style.cssText += "background:unset!important;";
}
}
item.oncontextmenu =
item.oncopy =
item.onselectstart =
item.οnpaste =
item.oncut =
item.onmousedown =
function (e) {
e.stopPropagation();
return true;
};
});
如果想分享给其他人使用，有如下方法：
2.2.1. 直接 DevTools 执行
就是直接粘贴到 DevTools 的 Console 下，直接执行就可以了。
但这个比较麻烦，每次都要打开 DevTools 和 复制。
2.2.2. 直接在地址栏执行
在脚本前面加上 javascript:，然后直接粘贴在地址栏中，回车即可执行。
比 2.2.1 少了一步打开 DevTools 的过程，但还是需要复制，且如果复制的内容包含 javascript:，地址拦会自动给你清除掉，除非你手动再输入一遍。
2.2.3. 书签执行
地址栏执行的优化版。不过 只需要复制一次就可以了，后面不用再去复制。
打开浏览器的书签管理：右上角设置 -> 书签 -> 书签管理器 （或者直接在地址栏中输入 chrome://bookmarks/ 进行打开）点击 添加新书签 ，打开弹窗名称 自行输入，网址 就是那段 javascript: 拼合的代码，保存。 然后，每次需要的时候，只需要点击一下书签就可以了：
好文阅读
发表评论