注：本文的油猴特指 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