写油猴脚本的传统艺能(Tampermonkey)- 教程

如果你在一家大公司工作,十有八九要面对百十个内部的所谓“自研系统”——大部分体验都非常拉跨。自研 SCM 的,自研 Ticket 系统的,自研文档系统的,还有一些很神奇的、搞不懂明明有很好的开源系统为啥不用偏要自研的系统。

不管出于什么原因,我们的大公司自研了这些系统,他们无一都有着一个共同点:体验很糟糕。包括:使用了先进的 SPA 技术但是 90% 的内部系统都没办法处理好 Url 的前进后退历史,翻页过滤等保持状态,甚至很多系统干脆就只有一个 URL: 比如 xdb.alipay.com…… 好吧,我猜这些都是专业团队开发的,专业领域比较强但是缺一个“专业前端”吧。

在这种环境中生存,尤其是作为一个“专业”的 SRE,我们就需要一些传统艺能:Python 爬虫,浏览器模拟器爬虫,油猴脚本。帮助你在各种险恶的内部系统中存活。

本文试图用 30 分钟(请现在开始计时)学会写油猴脚本,希望能在你快乐的 SRE 生涯中每天节约你几分钟的时间。

首先,先介绍下油猴脚本是什么(如果你真的不知道的话,我感谢你读到现在还没有走):油猴,Tampermonkey,是一个 Chrome 插件。我们都知道,JavaScript 本质上是客户端,就是运行在客户这边的软件。那么当客户这边的软件用着不爽的时候,客户是不是可以直接去修改软件呢?毕竟 JavaScript 也是脚本语言。当然可以!客户就是你,油猴就是帮助你修改 JavaScript 页面的软件。

油猴运行的方式是,你可以写一个 JavaScript 脚本,然后指定在什么 URL 运行,当你用浏览器打开这个 URL 的时候,油猴就会运行你的 JavaScript。这样,我们就可以把这些拉跨的网站变成我们想要的样子。

接下来我们安装油猴插件,Chrome 搜索安装即可。

安装好之后,我们来写你的第一个油猴脚本。

题目如下:你(其实是我自己)用 Roam Research 来记录工作笔记,你的公司用 JIRA 作为工单系统。每次你在处理一个工单的时候,你希望把这些过程都记录下来。比如你处理一个 URL 是 https://jira.mycompany.io/browse/IT-25582 的工单的时候,你想以下面的形式开始在 Roam Research 里面做记录: [[Ticket/IT-25582: Fix Alice's Computer]] ( https://jira.mycompany.io/browse/IT-25582 ) #IT #Computer #Alice。现在你是怎么做的呢?你要复制 Url,复制标题,复制工单编号,然后复制标签,最后在 Roam 里面打出来这句话。2分钟过去了……

所以我们希望能够一键做这个事情。效果是在“分享”按钮的后边会有一个一键复制的按钮,按下这个按钮,就会自动在你的剪切板插入这段格式的文本。然后你只要去 Roam 里面粘贴就可以了。

原理是:

  1. 从页面中使用 JavaScript 拿到标题,Url,标签等,拼出来要粘贴的内容
  2. 然后在页面上找一个合适的地方,加上我们的 Copy as Roam 的按钮
  3. 最后加一个监听的函数,这个按钮按一下,就把这段拼出来的文本放到剪切板里面去

首先,第一步,我们从页面找拿标题。这一步没什么难的,就是使用 JavaScript 的 API document.querySelector() 把想要的东西都拿出来即可。然后拼成一段文本。

然后,第二步,操作剪切板的函数(咦?不是加按钮吗?那太难了,待会在搞)。操作剪切板现在已经有 API 可以直接操作了。在这里我们需要搞一个假的 textArea, 然后把文字填进去,复制到剪切板。

最后一步,添加一个按钮。听起来这应嘎是最简单地一步,只要找到一个 Element 然后 Append 就好了,但确实最难的。因为现代网页用 JavaScript 太多了,你要找的 Element 也许根本就不存在。

解决方法是使用一个循环,延迟这个操作,一旦发现元素,则停止循环。

还有一个难点,因为 SPA 都是编译出来的,所以很可能整个网页都没有什么 id 可以用,如果有,它们的值也是每次编译自动生成的。这很头疼,我也没想到什么好办法,只能祝你好运了。

另外添加元素的时候,可以不比写自己的 CSS,直接 Copy 一下旁边的按钮的 class 用就好了,可以完美地混入其中。

油猴的原理大致就是这样,如果你要做的事情,八成就要去看浏览器提供了什么样的 API 了。大部分情况也不必自己从头开始写,一般有人做过类似的事情了,可以直接去搜索一下现成的脚本改一改。比如我这个教程,其实源代码就是抄了别人的。只不过我觉得他写的太繁琐了,就改了一些内容。

PS:量子幽灵 提醒我可以使用 MutationObserver 这个 API,这个 API 可以直接在某个 DOM 出现的时候去调用一个回调函数。

 

完整的脚本如下,贴在这里也没法直接用,但是相似的事情可以基于这个改一改。



写油猴脚本的传统艺能(Tampermonkey)- 教程”已经有3条评论

Leave a comment

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