油猴插件开发指南

前言

在正文开始之前，首先我们要知道油猴是啥?以下是官方对于油猴的解释。油猴官网

篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它适用于 Chrome、Microsoft Edge、Safari、Opera Next 和 Firefox。

有些人也会把篡改猴(Tampermonkey)称作油猴(Greasemonkey)，尽管后者只是一款仅适用于 Firefox 浏览器的浏览器扩展程序。

它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用篡改猴，您可以轻松在任何网站上创建、管理和运行这些用户脚本。

例如，使用篡改猴，您可以向网页添加一个新按钮，可以快速在社交媒体上分享链接，或自动填写带有个人信息的表格。在数字化时代，这特别有用，因为网页常常被用作访问广泛的服务和应用程序的用户界面。

此外，篡改猴 使您轻松找到并安装其他用户创建的用户脚本。这意味着您可以快速轻松地访问为您喜爱的网页定制的广泛库，而无需花费数小时编写自己的代码。

总的来说篡改猴是一款功能强大而且易于开发和使用的脚本开发和管理工具。由于将篡改猴称做油猴是比较普遍的现象，所以文章中后续都会称作"油猴"。

油猴插件的安装

1、在油猴官网，找到自己经常使用的浏览器，下滑找到下载模块，通过浏览器插件商店安装或者通过先下载插件后续导入浏览器的方式安装。

2、在完成插件下载后，打开浏览器，通过浏览器右上角三个点，找到扩展程序->管理扩展程序，点击进入扩展程序管理页面，先打开开发者模式开关，然后将下载好的油猴插件拖入浏览器，点击确认添加扩展程序即可。油猴插件安装好后即会在扩展程序中添加一个"篡改猴"插件。

油猴插件的实际开发

一、完成开发前的准备工作

首先先进入需要油猴工具进行辅助的网站，本文以juejin.cn/作为开发示例。先点击右上角拼图图标，打开扩展程序弹框，再点击油猴插件对应的图钉按钮，将油猴插件固定在右上方。完成后如下图所示，右上角便会显示一个油猴图标。

二、油猴插件脚本的创建

首先先点击油猴插件图标打开油猴插件的管理弹框，然后点击添加新脚本，即可完成油猴脚本的创建。完成后如下图所示，浏览器会打开一个油猴插件文本的编辑器。

三、油猴插件脚本的开发

在油猴脚本文件中输入document.designMode = "on";,随后返回掘金页面查看开发效果，你会发现掘金页面上的所有元素都可以进行编辑。这里需要强调一下油猴的用户脚本是小型 JavaScript 程序，所以开发语言也都是JavaScript。到这里我们就完成了油猴脚本最基本的开发，后续读者也可以根据不同的需求，完成相应的脚本。

四、油猴插件脚本注释/注解的说明

油猴脚本注释的基本格式

js 复制代码

// ==UserScript==
// @name         脚本名称
// @namespace    脚本的来源
// @version      版本号
// @description  脚本描述
// @author       作者
// @match        适用URL模式
// @icon         脚本的图标
// @grant        所需权限
// ==/UserScript==

一些基本的脚本注释/注解

油猴脚本注释文档地址

属性名	作用
@name	油猴脚本名称，会展示到浏览器中。必填项。
@namespace	主页地址。油猴管理面包中点击主页按钮即可跳转到此地址。可以作为脚本更新网址。
@copyright	版权声明显示在脚本编辑器的标题中，位于脚本名称的正下方。
@version	脚本版本，用于脚本的更新。必填项。
@description	脚本描述。必填项。
@icon	用于指定脚本图标，可以设置为图片 URL 地址或 base64 的字符串
@grant	指定脚本运行所需权限，拥有相应的权限才能调用油猴扩展提供的与浏览器进行交互的API。如果为 none，则不使用沙箱环境，脚本会直接运行在网页的环境中，这时无法使用大部分油猴扩展的 Api，而只能使用油猴默认添加的几个最常用 Api。
@author	作者名字
@license	脚本所使用的许可协议名称或地址，该协议需包含用户是否允许二次分发或修改脚本的权利。其它人都可以随意使用时，指定为MIT即可。
@match	使用通配符匹配需要运行网址， * 表示任意。 http://* 、 www.baidu.com/等。 http://gitee.com/ http ://*/basic-web/grp/html/devUtil.html --匹配以某某结尾的地址 http://10.104.65.76:8000/
@connect	用于跨域访问时指定的目标网站域名。当用户使用 gm_xmlhttprequest 请求远程数据的时候，需要使用connect指定允许访问的域名，支持域名、子域名、ip地址以及 * 通配符
@updateURL @installURL @downloadURL	脚本更新网址，当油猴扩展检查更新的时候，会尝试从这个网址下载脚本，然后比对版本号确认是否更新，不写时，@homepage也可以代替。
@exclude	排除匹配到的网站。
@include	保护匹配到的网站。
@run-at	指定脚本的运行时机，如页面加载完成时执行：@run-at document-end
@require	指定脚本依赖的其他js库，比如 JQuery。可以是在线文件，也可以是本地文件。
@resource	预加载脚本可以通过GM_getResourceURL和GM_getResourcesText访问的资源。 // @resource icon1 www.tampermonkey.net/favicon.ico // @resource icon2 /images/icon.png // @resource html www.tampermonkey.net/index.html // @resource css www.xxx.net/xxx.css // @resource xml www.tampermonkey.net/crx/tamperm... // @resource SRIsecured1 www.tampermonkey.net/favicon.ico...... // @resource SRIsecured2 www.tampermonkey.net/favicon.ico...
@tag	您可以向脚本添加标签，如果此标签是系统标签列表的一部分，则这些标签将在脚本列表中可见。标签可用于对脚本进行分类或将其标记为特定类型。标签列表可以在脚本的 settings 页面找到。
@supportURL	用户可获得该脚本技术支持的链接地址 (如：错误反馈系统、论坛、电子邮件)，该链接将显示在脚本的反馈页面。

脚本权限 @grant的一些用法

所有的@grant的权限都需要在油猴脚本头部的注释中进行声明，才可以进行使用。

js 复制代码

// @grant GM_xmlhttprequest 异步请求数据的用法。
GM_xmlhttpRequest({
    url: "http://www.httpbin.org/post",
    method: 'POST',
    headers: {
            "content-type": "application/json"
      },
    data: {xxx},
    onerror: function(res){
        console.log(res);
    },
    onload: function(res){
        console.log(res);
    }
});

// @grant unsafeWindow 允许脚本可以完整访问原始页面，包括原始页面的脚本和变量。

// @grant GM_getValue 从油猴扩展的存储中访问指定key的数据。
// 可以设置默认值，在没成功获取到数据的时候当做初始值。
// 如果保存的是日期等类型的话，取出来的数据会变成文本，需要自己转换一下。
GM_getValue(name,defaultvalue)

// @grant GM_setValue 将数据保存到油猴扩展的存储中
GM_setValue(name,value)

// @grant GM_deleteValue 将数据从油猴扩展的存储中删除
GM_deleteValue(name)

// @grant GM_setclipboard 将数据复制到剪贴板中
// 第一个参数是要复制的数据，第二个参数是mime类型，用于指定复制的数据类型。
GM_setclipboard(data, info)

// @grant GM_log 用于在控制台中打印日志
// 也可以使用原生的 console.log(xxx); 打印日志。
GM_log("Hello World")

// @grant GM_notification 设置网页通知/提示。
GM_notification(details, ondone)
GM_notification(text, title, image, onclick)

// @grant GM_openInTab 打开一个新的标签页面,类似 windown.open(url)。
// url：指定打开的新 URL 地址；options：指定页面展示方式及焦点停留页面。
// options.active为true，新标签页获取页面焦点  
// options。setParent为true，新标签页面关闭后，焦点重新回到源页面
GM_openInTab(url, options)

// @grant window.close 通常JavaScript不允许通过window.close关闭选项卡。
// 但是，如果通过@grant请求权限，则可以做到这一点。注意：出于安全原因，不允许关闭窗口的最后一个选项卡。
if (condition) {
    window.close(); 
}

// @grant window.focus 将窗口置于最前面，但可能会因用户设置而失败。`unsafeWindow.focus`
if (condition) {
    window.focus(); 
}

油猴脚本使用的一些注意事项

多个权限声明或者油猴脚本其他注释的声明需要分开引入

js 复制代码

// 正确使用方式
// ==UserScript==
// @grant GM_xmlhttprequest
// @grant GM_openInTab
// ==/UserScript==

// 错误使用方式
// ==UserScript==
// @grant GM_xmlhttprequest GM_openInTab
// ==/UserScript==

油猴插件脚本的使用

通过油猴脚本搜索地址搜索，需要使用的油猴脚本