准备

Tampermonkey 官网：
https://www.tampermonkey.net/

官方文档：
https://www.tampermonkey.net/documentation.php?ext=dhdg

参考教程：
https://www.bilibili.com/video/BV1Ng411E7DA?p=4

参考API：
https://www.w3.org/TR/clipboard-apis/#async-clipboard-api
https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/readText

此处使用 Microsoft Edge 浏览器。

获取扩展：
在这里插入图片描述
点这个扩展，然后打开加载项：

进入官方扩展页面：
https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home

第一个简单的脚本

在这里插入图片描述
点击 + 号，开始编写：

match 匹配的网站（url），name 脚本名字，namespace 管理的空间，icon 脚本的小图标，grant 一些权限方面的…

match 有正则的规则，填 * 则都可以匹配。

这些都是 Tampermonkey 自己的配置参数，不能去掉注释。

获取新脚本

在这里插入图片描述

Greasy Fork：https://greasyfork.org/zh-CN

正式学习编写

引入 jQuery 在脚本中：需要用到 @require
在这里插入图片描述
操作可以用 jQuery 也可以用原生的 JavaScript

可以参考：原生JS获取HTML DOM元素的8种方法

在这里插入图片描述
为了正确选择到 nextElementSibling，即需要先加载出页面再选择，所以用 window.onload = function() 包起来。

额外可以参考

油猴脚本编写教程

我的练习

1. b站获取视频选集名称

最近在看 GAMES103，结果这个视频选集这里的文字很难显示全，总之就是麻烦。

在这里插入图片描述
于是我写了一个小脚本去输出打印所有的分集名字。

脚本如下：

// ==UserScript==
// @name         b站获取视频分集名字
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       hebohang
// @match        https://www.bilibili.com/video/*
// @icon         https://www.google.com/s2/favicons?domain=bilibili.com
// @grant        none
// ==/UserScript==(function() {'use strict';setTimeout(function(){var parts = document.getElementsByClassName('part');for (var idx = 0; idx < parts.length; idx++){console.log(parts[idx].innerText);}}, 5000)
})();

执行效果：
在这里插入图片描述
踩坑：

一开始用的 setInterval ，结果就是循环执行了，于是改用 setTimeout，后来干脆把 500 改成 5000，即5秒后执行，这样是为了确保Dom节点树已经被加载解析了，不然 document.getElementsByClassName 很可能会失败。

并且一开始我用 window.onload 想实现这样的功能，也不行，还是得用 setTimeout。

2. csdn 写文章去图片水印

csdn的图片去水印，只需要把后面的 ? 那一大串去掉就行了，于是我写了一个简单的脚本：

// ==UserScript==
// @name         csdn 写文章去图片水印
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  csdn 写文章去图片水印
// @author       hebohang
// @match        https://editor.csdn.net/*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';setInterval(function(){var parts = document.getElementsByClassName('token cl cl-src');for (var idx = 0; idx < parts.length; idx++){var str = parts[idx].innerText;var index = str.indexOf('?');if (index != -1){var new_str = str.substring(0, index);parts[idx].innerText = new_str;}}}, 5000)
})();

注意，这里我就用了 setInterval ，每5秒检测一下所有图片，然后去水印。

3. csdn 浏览图片去水印

// ==UserScript==
// @name         CSDN 浏览图片去水印
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       hebohang
// @match        https://blog.csdn.net/*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';setInterval(function(){var parts = document.getElementsByTagName('img');for (var idx = 0; idx < parts.length; idx++){var str = parts[idx].src;var index = str.indexOf('?');if (index != -1){var new_str = str.substring(0, index);parts[idx].src = new_str;}}}, 5000)
})();

本来想用 setTimeout ，但是想了一下图片可能没加载出来，还是设置循环算了，也不占性能。

随便找了一个网站测试：
在这里插入图片描述
结果：

ohhhhh！

4. csdn 写文章自动解析链接

// ==UserScript==
// @name         csdn 写文章自动解析链接
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  csdn 写文章自动解析链接
// @author       hebohang
// @match        https://editor.csdn.net/*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';setInterval(function(){var parts = document.getElementsByClassName('token p');for (var idx = 0; idx < parts.length; idx++){var str = parts[idx].innerText;var index = str.indexOf('https://');if (index == -1){index = str.indexOf('http://');}if (index != -1 && str[index - 1] != '['){var new_str = "[" + str + "](" + str + ")";parts[idx].innerText = new_str;}}}, 3000)
})();