公司的单点登录从 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
指在什么网站生效,可以使用 * 通配符include
同match
exclude
排除的网站icon
脚本图标,可以是 url 或 base64require
依赖的资源,可以加载 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/)
声明
- 本作品采用署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。除非特别注明, 霖博客文章均为原创。
- 转载请保留本文(《如何编写一个油猴脚本》)链接地址: https://youthlin.com/?p=1698
- 订阅本站:https://youthlin.com/feed/