如何编写一个油猴脚本

公司的单点登录从 RSA Token 改成 OTP 了，为了避免每次登录需要输入 Token 的麻烦，想使用浏览器插件来实现。
原来的 RSA Token 不知道怎么生成当前 Token，但是新的 OTP token，有现成的算法可以算出每时刻的 Token，因此完全可以实现自动登录。

之前查网上一些关于如何开发 Chrome 插件的文章，比较多。主要参考了【干货】Chrome插件(扩展)开发全攻略 这篇文章，写得很详细，给原作者点赞！

但是，Chrome 插件只能在 Chromium 内核浏览器上使用，为了跨浏览器可用，我找到了油猴插件：
http://www.tampermonkey.net/
油猴是一个专门管理脚本的插件，支持 Chromium, Firefox, 新旧 Edge, Opera, 以及遨游、UC 之类的大部分主流浏览器，Safari 也支持，不过貌似是收费的就没测试了。所以写成油猴脚本的话，只要浏览器装了油猴插件，那就都可以使用了。

实际上文档在官网都能找到，不过还是记录一下常用的几个方法吧，毕竟博客也很久没更新了? 2333

添加新脚本，一般都是这样开始的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://youthlin.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

==UserScript== 与 ==/UserScript== 之间的内容是元注释，写给油猴插件看的，常用的标签：

• name 脚本名字
• namespace 命名空间，一般用你的域名就好
• version 版本，每次检查更新，版本变化了才会真正更新脚本
• match 指在什么网站生效，可以使用 * 通配符
• include 同 match
• exclude 排除的网站
• icon 脚本图标，可以是 url 或 base64
• require 依赖的资源，可以加载 cdn 的库。比如我需要加载 otplib 的库，总不能把源代码拷一份在脚本里吧。
• run-at 脚本运行的时机：
  • document-start 尽早执行；
  • document-body 有 body 标签时执行；
  • document-end 网页加载完(DOMContentLoaded)；
  • document-idle 在 DOMContentLoaded 之后执行，这是默认值；
  • context-menu 只 Chrome 系浏览器有效，在右键菜单时执行
• grant 是申请的权限，可以有多个，值是需要使用的函数的方法

常用需要声明权限的方法有：

1
2
3
4
5
6
7

// @grant        GM_getValue //获取保存的值
// @grant        GM_setValue //保存设置项
// @grant        GM_openInTab //在新标签页打开
// @grant        GM_xmlhttpRequest //ajax 请求，声明这个权限才能跨域
// @grant        GM_setClipboard //访问剪切板
// @grant        GM_registerMenuCommand //在插件图标上注册一个菜单
// @grant        unsafeWindow //访问全局的 window 对象，不声明的话访问的 window 其实是沙盒 window 并不能影响全局

API 方法的用法可以在这里看到 https://wiki.greasespot.net/Greasemonkey_Manual:API
注意到这个网址不是 tampermonkey 而是 Greasemonkey.
原来，油猴脚本最初是运行在 Firefox 上的，然后不同浏览器都有各自的脚本管理插件，不过为了兼容性，大家都遵循相同的 API 方便脚本跨浏览器使用。

https://greasyfork.org/zh-CN
这是一个脚本大全的网站，可以找到很多有用的脚本，比如去广告、豆瓣找资源、视频免 VIP、网盘自动填写密码之类的。

写脚本时，有时可能需要一个设置页面，如果是独立的插件，可以在点击插件图标时弹出一个页面。但作为油猴脚本，只能手动往当前页面 append(比如使用 insertAdjacentHTML) 我们的 HTML 内容以实现页面显示。
还可以使用 GM_registerMenuCommand 在插件图标上注册一个菜单项，点击菜单时回调一个 function 以显示我们 append 的内容，但不是所有宿主插件都支持图标菜单(tampermonkey 支持)

以前操作 DOM 只会用 jQuery, 后来不想每次都引入 jq, 发现原生写法也不难，找到个网站可以看下怎么用原生写法替代 jq 写法：http://youmightnotneedjquery.com/

最后，推荐一个学习 Javascript 的网站：现代 JavaScript 教程 (https://zh.javascript.info/)