背景介绍
油猴脚本（Tampermonkey）是一个非常流行的浏览器扩展，它可以运行由广大社区编写的扩展脚本，来实现各式各样的功能，常见的去广告、修改样式文件、甚至是下载视频。安装油猴插件非常简单，直接在浏览器的扩展商店中安装即可。
新建脚本
首先在浏览器右上角找到并点击油猴插件，选择添加新脚本。
然后就会打开如图所示的编辑器窗口，我们就可以在其中编辑自己的脚本文件了。如果你喜欢的话，还可以将脚本内容复制到合适的编辑器中编辑，完成之后再复制回来。
编写脚本
功能注释
首先来看看脚本的内容，上面是一大排注释，这些注释可以非常有用的，它表明了脚本的各个属性。下面来简单介绍一下。
| 属性 | 作用 | 使用技巧 |
|---|---|---|
| @name | 脚本的显示名称 | 加后缀实现国际化，例如，@name:zh-CN 指定在浏览器语言为中文时显示的名称 |
| @namespace | 脚本的命名空间，可以理解为脚本的标识 | 为了避免冲突一般使用 github 仓库地址 |
| @version | 与更新相关，当前版本 | |
| @description | 简短介绍 | 同样可以加后缀实现国际化 |
| @author | 作者名字 | |
| @homepage | 主页地址 | 如果未设置并且 @namespace 是仓库地址，默认导向仓库地址 |
| @grant | 声明 GM_xxx 函数的使用列表 | 必须先指定权限才能正常使用 |
| @require | 在脚本运行前引入外部 JavaScript 文件 | 例如，引入 jQuery |
| @resource | 声明外部资源文件，搭配 GM_getResourceText 使用 | 例如引入 html、icon |
| @connect | 声明 GM_xmlhttpRequest 可访问的域 | 必须指定才能正常请求 |
| @updateURL | 检查脚本是否更新地址 | 配合 @version 和自动更新使用 |
| @downloadURL | 检测到更新时，去哪下载脚本 | |
| @supportURL | 遇到问题时，用户去哪反馈 | |
| @include | 脚本在哪些页面运行 | 可使用正则，不支持 hashtag，多个页面的地址声明多个 @include 即可 |
| @match | 只有匹配的网址才会执行对应的脚本 | 例如 *、http://*、http://www.baidu.com/* 等，与 @include 类似，参见谷歌开发者文档 |
| @exclude | 脚本禁止在哪些页面运行，优先于 @include | |
| @run-at | 指定脚本运行时机 | document-start: 尽快执行。document-body: 当 body 挂载时执行。document-end: DOMContentLoaded 触发时执行。document-idle: DOMContentLoaded 触发后执行，也是默认设置项。context-menu: 右键菜单项被点击时执行 |
| @icon | 脚本 icon | |
| @icon64 | 64x64像素的脚本 icon | |
| @antifeature | 脚本是否有广告、挖矿、数据收集等商业行为 | |
| @noframes | 声明脚本不在 iframe 中运行 |
GM_XXX 函数
核心逻辑通过一个立即执行函数包裹，避免和全局作用域相互干扰。Tampermonkey 将浏览器的部分能力封装为 GM_XXX 函数以供调用。
| API | 作用 | 使用技巧 |
|---|---|---|
| unsafeWindow | 访问页面的 Window 对象 | |
| GM_addStyle(css) | 创建全局样式的快捷方式，向页面插入 style 元素 | 也可以用 DOM 操作手动创建 |
| GM_addElement(tag_name, attributes) | 向 DOM 新建元素的快捷方式 | 也可以用 DOM 操作手动创建 |
| GM_addElement(parent_node, tag_name, attributes) | 向 DOM 新建元素的快捷方式 | 也可以用 DOM 操作手动创建 |
| GM_log(message) | 在 console 中打印信息 | console.log 的快捷方式 |
| GM_setValue(name, value) | 持续化存储数据 | |
| GM_getValue(name, defaultValue) | 从存储体中获取数据 | |
| GM_deleteValue(name) | 从存储体中删除数据 | |
| GM_listValues() | 列举存储体中所有数据项 | |
| GM_addValueChangeListener | 监听数据更新 | 例如要使 Tab 间数据同步，可以用监听 value 达成同步 |
| GM_removeValueChangeListener | 移除监听 | |
| GM_getResourceText(name) | 获取 @resource 中已声明的资源 | |
| GM_getResourceURL(name) | 获取 @resource 中已声明的资源（base64 URI 形式） | |
| GM_registerMenuCommand(name, fn, accessKey) | 在 Tampermonkey 的 popup 中增加选项 | |
| GM_unregisterMenuCommand(menuCmdId) | 移除选项 | |
| GM_openInTab(url, options) | 新开一个 tab 页 | |
| GM_xmlhttpRequest(details) | 使用后台脚本进行请求，自动带上 cookie，无跨域问题，目标域需要在 @connect 中提前声明 | |
| GM_download(details) | 下载资源到本地 | |
| GM_getTab(callback) | 获取当前 tab 的 object 对象 | |
| GM_saveTab(tab) | 通过 tab 的 object 对象重新打开一个 tab | |
| GM_getTabs(callback) | 获取当前存活的所有 tab 的对象，以便和其他脚本实例偶同学 | |
| GM_notification | 使用插件 notification API 弹出桌面通知 | |
| GM_setClipboard | 复制内容到剪贴板 | |
| GM_info | 获取脚本的油猴插件的信息 |
完整的说明文档：Tampermonkey documentation
Demo
// ==UserScript==
// @name Hello
// @namespace http://tampermonkey.net/hello
// @version 0.1
// @description try to take over the world!
// @author You Name
// @match https://zhihu.com/*
// @match https://juejin.cn/*
// @grant GM_log
// ==/UserScript==
(function() {
'use strict';
GM_log("Hello World");
})();
调试脚本
编写脚本很难一次成功，大部分时间都花在了调试上面。调试油猴脚本的话有几种调试方法。
第一种方法就是最原始的打印日志，可以利用 console.log 和 GM_log 来将关键信息打印出来，上面的脚本就是我靠打印日志一点点发现各种参数错误的。说实话这种办法有点笨。
第二种就是利用浏览器的调试功能，在脚本需要调试的地方插入 debugger; 语句，然后在打开 F12 开发者工具的情况下刷新页面，就会发现网页已经暂停在相应位置上。这样就可以利用 F12 开发者工具进行单步调试、监视变量等操作了。
发布脚本
更新 URL
脚本做完了，自然是要共享出来让大家一起使用的。当然既然要发布，自然要支持更新方便日后维护。方法也很简单，直接在上面的注释部分添加 updateURL 即可，然后设置脚本访问地址。例如我要将脚本发布到 Github 上，就添加下面的注释。
// @updateURL https://raw.githubusercontent.com/techstay/myscripts/master/tampermonkey/remind_me_vagrant_update.js
上传脚本
油猴脚本支持好几个网站，其中目前最主流的是 GreasyFork ，登录这个网站注册一个账号，然后进入用户页面选择提交脚本，然后填写脚本代码和各项信息。
这样脚本就提交上去了，其他人也可以搜索到并安装脚本了！
