写油猴脚本的传统艺能（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 里面粘贴就可以了。

原理是：

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

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

JavaScript

let issueId = document.querySelector('#key-val');

let issueIdText = issueId.innerText;

let issueIdLink = issueId.href;

let issueTitle = document.querySelector('#summary-val').innerText;

let labels = document.querySelector('.labels-wrap').innerText.split(" ");

let roamTags = (labels.map(l => "#" + l)).join(" ");

console.log("copy to roam fields: ", issueIdText, issueIdLink, issueTitle, roamTags);

let content = `[[Ticket/${issueIdText}: ${issueTitle}]] ( ${issueIdLink} ) ${roamTags}`;

console.log("copy to roam content: ", content);

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

JavaScript

function copyText(content){

let fakeElem = document.createElement('textarea');

// Move element out of screen horizontally

fakeElem.style.position = 'absolute';

fakeElem.style.left = '-9999px';

fakeElem.style.fontSize = '12pt';

// Reset box model

fakeElem.style.border = '0';

fakeElem.style.padding = '0';

fakeElem.style.margin = '0';

fakeElem.setAttribute('readonly', '');

fakeElem.value = content;

document.body.appendChild(fakeElem);

fakeElem.select();

document.execCommand('copy');

}

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

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

JavaScript

(function() {

'use strict';

// Your code here...

var executeCount = 0;

var autoAddInterval = setInterval(addCopyBtn, 1000);

function addCopyBtn(){

//simple handle

if(executeCount++ > 10) {

clearInterval(autoAddInterval);

}

if(document.querySelector('#neal_copy_btn') != null) return;

let groupContainer = document.querySelector('.ops-menus');

...

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

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

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

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

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

JavaScript

// ==UserScript==

// @name Atlassian Jira Add Copy Title Action

// @namespace chancetop

// @version 0.0.6

// @description Copy issue code & title .

// @author Neal Xu, laixintao

// @match https://jira.shopee.io/browse/*

// @grant none

// ==/UserScript==

(function() {

'use strict';

// Your code here...

var executeCount = 0;

var autoAddInterval = setInterval(addCopyBtn, 1000);

function addCopyBtn(){

//simple handle

if(executeCount++ > 10) {

clearInterval(autoAddInterval);

}

if(document.querySelector('#neal_copy_btn') != null) return;

let groupContainer = document.querySelector('.ops-menus');

//clone node

let copyBtnDiv = document.createElement("div");

copyBtnDiv.innerHTML = '<div id="neal_copy_btn">Copy as Roam</div>'

copyBtnDiv.onclick = function(){

let issueId = document.querySelector('#key-val');

let issueIdText = issueId.innerText;

let issueIdLink = issueId.href;

let issueTitle = document.querySelector('#summary-val').innerText;

let labels = document.querySelector('.labels-wrap').innerText.split(" ");

let roamTags = (labels.map(l => "#" + l)).join(" ");

console.log("copy to roam fields: ", issueIdText, issueIdLink, issueTitle, roamTags);

let content = `[[Ticket/${issueIdText}: ${issueTitle}]] ( ${issueIdLink} ) ${roamTags}`;

console.log("copy to roam content: ", content);

copyText(content);

}

groupContainer.appendChild(copyBtnDiv);

}

function copyText(content){

let fakeElem = document.createElement('textarea');

// Move element out of screen horizontally

fakeElem.style.position = 'absolute';

fakeElem.style.left = '-9999px';

fakeElem.style.fontSize = '12pt';

// Reset box model

fakeElem.style.border = '0';

fakeElem.style.padding = '0';

fakeElem.style.margin = '0';

fakeElem.setAttribute('readonly', '');

fakeElem.value = content;

document.body.appendChild(fakeElem);

fakeElem.select();

document.execCommand('copy');

}

})();

推荐订阅源

卡瓦邦噶！