油猴脚本编写

准备

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)
})();