浏览器用户脚本一般是小型的 JavaScript 程序，可用于向网页添加新功能或修改现有功能，允许用户自定义并增强网页功能，
当我们使用浏览器打开网页的时候，前端资源都会被下载到用户的电脑中，并通过浏览器解析展示出来。此时整个网页的前端部分已经与部署在服务器中的代码无关，可以在用户端随意修改（当然刷新一下就会被恢复）。因此，我们既可以通过f12打开浏览器开发者工具进行代码查看与修改，也可以通过执行 js 脚本在页面中实现各种各样的功能。
Tampermonkey
Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。
创建脚本
在安装 Tampermonkey 浏览器扩展后，（以Chrome为例）可以通过点击浏览器右上角的 Tampermonkey 图标打开界面，点击添加新脚本进入脚本编辑器。
### 脚本配置
在创建脚本之后，会默认生成一段初始代码。
其中，顶部的注释用于声明脚本的配置信息
比较重要的字段：
- @match | @include
用于声明该脚本运行的网页
// @match /^https?://(www)?.?(juejin|zhihu).(com|cn)/ 使用正则匹配知乎或掘金
- @require
用于在脚本运行前引用 js 第三方库
// @require https://code.jquery.com/jquery-2.1.4.min.js
- @resource
通过GM_getResourceURL 和 GM_getResourceText预加载可访问的资源
// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css// 引入bootstrap的css文件并加入html中const css = GM_getResourceText(“customCSS”);GM_addStyle(css);
- @connect
定义可以被GM_xmlhttpRequest访问的网站，用于调用一些API接口。
// @connect ://.test.com/
- @grant
声明将会用到的GM_* API
// @grant GM_addStyle// @grant GM_getResourceText
- @run-at
声明脚本运行时机
// @run-at document-start 以最快速度注入脚本// @run-at document-body 当body元素挂载时// @run-at document-end 在DOMContentLoaded时/后// @run-at document-idle 在DOMContentLoaded后// @run-at context-menu 点击了右键菜单
脚本开发
- 更改网页样式
// 使用原生js实现const heads = document.querySelector(‘head’);const style = document.createElement(‘style’);style.setAttribute(‘type’, ‘text/css’);style.innerHTML = pre,code.signin;heads.append(style);// 使用GM api实现GM_addStyle(pre,code.signin)
- 添加右键菜单栏功能
GM_registerMenuCommand(“GitHub 搜索”, function () `, ); }});
工程化开发
使用 vite-plugin-monkey 创建项目
1
pnpm create monkey# npm create monkey# yarn create monkey
创建项目后，可以在 vite.config.ts 文件中配置 tampermonkey
1
import from 'vite';import react from '@vitejs/plugin-react';import monkey, from 'vite-plugin-monkey';// https://vitejs.dev/config/export default defineConfig(, build: , }, }), ],});
与各种框架一样，拥有便捷的本地部署和模块热更新
### 使用 GM_ API
ESM 模块
1
import from '$';// $ is the default alias of vite-plugin-monkey/dist/client// if you want use 'others', set monkeyConfig.clientAlias='others'
设置为全局变量
1
// vite.config.tsimport from 'vite';import monkey from 'vite-plugin-monkey';export default defineConfig(, }), ],});// main.tsconsole.log(GM_cookie == globalThis.GM_cookie);console.log();
自动导入
1
// 使用unplugin-auto-import插件// vite.config.tsimport from 'vite';import monkey, from 'vite-plugin-monkey';import AutoImport from 'unplugin-auto-import/vite';export default defineConfig(), monkey(), ],});// main.tsconsole.log();