用Tampermonkey实现自动化网页操作

文章目录

1. 1. 原理
2. 2. 练习
3. 3. 同步

Tampermonkey是一个浏览器插件，可以在网页上嵌入自己编写的js脚本，支持除IE以外的大部分浏览器。还有一个更早的Greasemonkey（油猴）功能类似，可惜它只适用于Firefox。Tampermonkey的源代码在Github上。

原理

原理其实很简单，就是在宿主页面载入完毕后，运行自己的js脚本罢了，从而实现对浏览器渲染后的html进行改变。除了让你浏览的网页更加个性化以外，还能为你提供一键解决实际问题的需求，例如隐藏广告、自动签到薅羊毛、抢票、每天/每周在网页上填写考勤表等。

Tampermonkey不仅允许使用这些脚本，并且可以编写、管理及同步。安装步骤与一般的插件无异。安装好后，下面拿一个例子练手。

练习

我们试试在百度上增加“Google一下”的按钮。首先单击插件图标，点击“添加新脚本”，于是便进入了Tampermonkey的编辑器。上面的几行注释就是Tampermonkey自己的语法，保存了一些元数据，包括脚本的名字、版本、在满足什么规则的网页上生效等。我们把@match的内容修改为https://www.baidu.com/*，这样便能在百度域名下的所有网页中生效啦。

打开百度，可以看到“百度一下”的按钮：id="su"，我们将“Google一下”插入到其后即可。在// Your code here...后面编写如下js代码：

$('#su').after('<input type="button" id="google" value="Google一下" class="btn self-btn bg s_btn" style="background-color:grey;" onclick="googleIt" />');

function googleIt() {
    alert('google');
}

保存并刷新百度，顺利地看到了灰色的“Google一下”。这说明我们的脚本起作用了。在插件图标的位置上页显示了一个红色的1，说明当前网页上的生效脚本数量为1。但是点击“Google一下”什么也没有弹出。在控制台上可以看到出错了：Uncaught ReferenceError: googleIt is not defined。这是因为所有代码都是作为一个字符串被eval的，所以应该使用动态的方式：

$('#su').after('<input type="button" id="google" value="Google一下" class="btn self-btn bg s_btn" style="background-color:grey;" />');
$("#google").click(function() {
    googleIt();
});

这回点击按钮就能够正常工作了！我们现在要做的，就是把alert替换为打开Google页面即可：

function googleIt() {
    var searchText = document.querySelector('#kw').value;
    location.href = getGoogleUrl(searchText);
}

function getGoogleUrl(searchText) {
    return 'https://www.google.com/search?q=' + searchText;
}

短短几行代码，就搞定了。Tampermonkey内置了一些对象与函数，可以让我们很方便地实现一些功能，如打开新窗口可以使用GM_openInTab：

function googleIt() {
    var searchText = document.querySelector('#kw').value;
    GM_openInTab(getGoogleUrl(searchText), false);
}

第二个参数可以决定当前的焦点是老窗口还是新窗口。在使用内置函数之前，需要先@grant一下，如：

// @grant        GM_openInTab

否则无法生效。更多的内置函数可以在官方文档中查看。

我们新写的代码并不会直接出现在控制台中，如果需要调试，可以在代码中增加debugger;，这样运行时就能自动停在这一行了。百度主页有引用jQuery，所以我们可以直接在代码中使用$。如果需要的页面上没有jQuery，那么可以通过这行命令引入：

//      @include https://code.jquery.com/jquery-3.2.1.min.js

完整的代码如下：

// ==UserScript==
// @name         Google on baidu
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Google it!
// @author       ggg
// @match        https://www.baidu.com/*
// @grant        GM_openInTab
// ==/UserScript==

(function() {
    'use strict';

    $('#su').after('<input type="button" id="google" value="Google一下" class="btn self-btn bg s_btn" style="background-color:grey;" />');
    $("#google").click(function() {
        googleIt();
    });

    function googleIt() {
        var searchText = $('#kw').val();
        GM_openInTab(getGoogleUrl(searchText), false);
    }

    function getGoogleUrl(searchText) {
        return 'https://www.google.com/search?q=' + searchText;
    }
})();

不过这种做法存在两个问题：

1. 如果宿主网页变化，脚本需要随之变化。这也没办法，谁叫我们依赖它呢。好在宿主网页没事也不会经常变化。
2. “Google一下”的按钮会比原生的“百度一下”延迟一些才出来，体验上稍微差一些。毕竟相对而言我们的脚本只是二等公民。

但是获益的巨大几乎可以让我们完全无视这些缺陷。

同步

脚本也是代码，也有自己的版本，也能被多人所共享使用。只要它在因特网上的url以.user.js结尾，即可轻易分享给其他人。上面的这个例子我就放到了Github中。分享出去的时候，如果对方安装了tampermonkey，就可以看到脚本的安装界面了。更多的共享脚本可以单击插件图标，点击“获取新脚本”，或是参考这里来获得。