注：本文的油猴特指 Tampermonkey。

油猴脚本运行于油猴插件之上，油猴插件本质上对浏览器能力的再封装。既然如此，我们先来简单了解一下浏览器插件。

浏览器插件（Browser Extension）：浏览器的扩展应用
说的直白一点，就是拿着浏览器开放的能力（插件 API），去实现一些小型应用。

浏览器插件主要由四部分构成：background scripts、content scripts、全局 UI 元素、options page。

background scrips: 后台脚本，一个后台脚本是一个独立线程，是游离于各个页面之外的“上帝之眼”。具有访问各类插件 API 的能力，但同时也丧失了直接操作页面的能力；

content scripts：内容脚本，具有直接操作页面的能力。其实就是在页面中运行 js 脚本，可以使用 DOM API。content script 只能直接访问少量插件 API，但能和 background script 进行双向通信完成数据交换；

全局 UI 元素：浏览器层的 UI 交互，包括

在 Toolbar 显示 icon，定义点击 icon 后显示的 Popup 或其他效果

增加右键选项

增加全局快捷键

改造新 Tab 页、历史记录页、书签页

options page：插件配置页

浏览器插件的核心机制可以用下图简单概括


想必，大家最好奇的还是有哪些 API 以及能用这些 API 做什么，这里例举几个：

contextMenus：增加右键选项

使用选中文本，例如：划词翻译、文本收集

快速调用插件功能，例如：打开 DevTool，页面剪藏

cookies：增删改查 cookie（任意域名），直接拿着本地 cookie 发送请求，不必再做授权。同时由于后台脚本不是 Web 页面，在发送请求时没有跨域限制。：

多平台信息聚合

多平台信息分发

devtools.panels：增加 Devtool 面板，这个对前端开发者来说应该很熟悉，React Developer Tools、Vue.js devtools

notifications：浏览器通知，未打开页面的情况下进行通知，可以辅助一些工具类应用

storage：全局保存数据，可跟随浏览器账户同步

这里例举的只是我常用的一些，只是沧海一粟，更多 API 可以查阅

Chrome Extension API Reference

支持用于扩展 Microsoft Edge API

Mozilla WebExtensions API

浏览器插件就简单介绍到这里，如果有兴趣继续了解，推荐：Chrome，Edge，Mozilla 三家的文档。

油猴插件（Tampermonkey）
浏览器插件可以实现各式各样的功能，但有时候开发者只是想对某一个站点加一点点小功能，如果这也要构建环境打包上架分发，未免就太麻烦了一些；从应用市场角度来看，充斥着颗粒化的应用，市场也会拥挤繁杂不堪。

油猴插件为轻量化脚本提供了一个平台，在线编辑器中编写油猴脚本即时生效，通过 Github、GreasyFork 快速分发。

在油猴插件中， content script 起到非常重要的角色，它将用户编写的代码运行在页面中，同时提供 GM_xxxx 函数封装浏览器的部分能力。封装的内部实现是和 background script 通信，驱动 background script 调用插件 API。

对油猴插件简单了解之后，来看看如何编写油猴脚本。

Tampermonkey API
油猴脚本由头部和核心逻辑两部分组成

js

复制代码

// ==UserScript==

// @name         New Userscript

// @namespace    http://tampermonkey.net/

// @version      0.1

// @description  try to take over the world!

// @author       You

// @match        https://www.tampermonkey.net/documentation.php?ext=dhdg

// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net

// @grant        none

// ==/UserScript==



(function() {

    'use strict';



    // Your code here...

})();



头部是脚本的一些元信息、更新方式、指定运行页面、权限声明，逐一解释一下
配置名

作用

使用技巧

@name

脚本的显示名称

加后缀实现国际化，例如，@name:zh-CN 指定在浏览器语言为中文时显示的名称

@namespace

脚本的命名空间，可以理解为脚本的标识

为了避免冲突一般使用 github 仓库地址

@version

与更新相关，当前版本


@updateURL

检查脚本是否更新地址

配合 @version 和自动更新使用

@downloadURL

检测到更新时，去哪下载脚本


@supportURL

遇到问题时，用户去哪反馈


@include

脚本在哪些页面运行

可使用正则，不支持 hashtag，多个页面的地址声明多个 @include 即可

@match

与 @include 类似


@exclude

脚本禁止在哪些页面运行，优先于 @include


@require

在脚本运行前引入外部 JavaScript 文件

例如，引入 jQuery

@resource

声明外部资源文件，搭配 GM_getResourceText 使用

例如引入 html、icon

@connect

声明 GM_xmlhttpRequest 可访问的域

必须指定才能正常请求

@grant

声明 GM_xxx 函数的使用列表

必须先指定权限才能正常使用

@run-at

指定脚本运行时机

document-start: 尽快执行

document-body: 当 body 挂载时执行

document-end: DOMContentLoaded 触发时执行

document-idle: DOMContentLoaded 触发后执行，也是默认设置项

context-menu: 右键菜单项被点击时执行

@author

作者名


@description

简短介绍

同样可以加后缀实现国际化

@homepage

主页地址

如果未设置并且 @namespace 是仓库地址，默认导向仓库地址

@icon

脚本 icon


@icon64

64x64像素的脚本 icon


@antifeature

脚本是否有广告、挖矿、数据收集等商业行为


@noframes

声明脚本不在 iframe 中运行



核心逻辑通过一个立即执行函数包裹，避免和全局作用域相互干扰。Tampermonkey 将浏览器的部分能力封装为 GM_XXX 函数以供调用。
API

作用

使用技巧

unsafeWindow

访问页面的 Window 对象


GM_addStyle(css)

创建全局样式的快捷方式，向页面插入 style 元素

也可以用 DOM 操作手动创建

GM_addElement(tag_name, attributes)

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