分类
代码

如何编写一个油猴脚本

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

OTP(One Time Password) 就是那种动态密码,谷歌验证器那种。安卓可以使用 andOTP

要在浏览器中使用 OTP, 可以使用 yeojz/otplib 这个工具,具体用法看 GitHub 文档就可以。
生成任意时刻的方法可以看 issue 的写法 。

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

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

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

添加新脚本,一般都是这样开始的:

// ==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 指在什么网站生效,可以使用 * 通配符
  • includematch
  • exclude 排除的网站
  • icon 脚本图标,可以是 url 或 base64
  • require 依赖的资源,可以加载 cdn 的库。比如我需要加载 otplib 的库,总不能把源代码拷一份在脚本里吧。
  • run-at 脚本运行的时机:
    • document-start 尽早执行;
    • document-body 有 body 标签时执行;
    • document-end 网页加载完(DOMContentLoaded);
    • document-idle 在 DOMContentLoaded 之后执行,这是默认值;
    • context-menu 只 Chrome 系浏览器有效,在右键菜单时执行
  • grant 是申请的权限,可以有多个,值是需要使用的函数的方法

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

// @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/)


发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

[/鼓掌] [/难过] [/调皮] [/白眼] [/疑问] [/流泪] [/流汗] [/撇嘴] [/抠鼻] [/惊讶] [/微笑] [/得意] [/大兵] [/坏笑] [/呲牙] [/吓到] [/可爱] [/发怒] [/发呆] [/偷笑] [/亲亲]