使用TamperMonkey为网页增加本地外观

最近遇到一个问题，在使用Google Classroom时需要对学员进行分组，而应用本身不提供这个功能。有同事研究了它的API，发现也无法解决这个问题。这无疑使我们的工作变得繁重起来，不得不做更多的人工工作。
其实我们需要的也并不多，只要能够快速统计出每组的学员数据就可以了，每组每节课有多少学员完成了作业，如果有一个映射表，再经过简单的排序或统计，数据将呼之欲出。

很容易想到了浏览器插件，由于这些数据仅需要特定的人进行查阅和统计即可，因此在浏览器客户端完成即可。
制作浏览器插件成本还是有一点高，于是转而想到了TamperMonkey，俗称“油猴脚本”。
这个就简单多啦。浏览器安装TamperMonkey扩展程序以后，自己看看页面元素，写写JS就可以搞定啦。

TamperMonkey是什么

Tampermonkey是一款免费的浏览器扩展程序，支持多种浏览器。
通过TamperMonkey可以对制定的网页加载和运行用户脚本，改变网页的外观，修改网页浏览体验。
我们可以通过直接加载流行的用户脚本，或是编写自己的用户脚本，来达到上述的目的。Greasyfork是一个很热门的用户脚本网站，点开了中文条目以后，似乎打开了一扇新的大门。OMG，我啥也没说。

TamperMonkey怎么写

作为程序员，还是很喜欢个性化定制的，尤其是遇到当下这种奇葩的问题。
那么来看看如何写自己的用户脚本。
TamperMonkey的语法很简单，两个部分：

1. 元数据定义
2. 功能脚本

元数据

元数据定义使用JavaScript注释来描述该脚本的使用情境，数据定义见官方文档。其中，比较重要的几个数据如下：

• include/match/exclude
  用来描述这个脚本将在哪些URL下生效。
  -require
  用来引用用户脚本中需要引入的外部库文件。这里最基础而常用的当然就是jQuery啦，操作页面元素可是最常用的功能。

功能脚本

功能脚本，说的就是真正起作用的用户脚本啦。
简单来说，就是纯写JavaScript，没什么特殊的地方。随意记录几个常用的功能吧。

等待某个页面元素加载

const waitForElement = function(selector, callback) {
    if ($(selector).length) {
        callback();
    } else {
        setTimeout(function() {
            waitForElement(selector, callback);
        }, 100);
    }
};

为页面增加新的元素

const addTextToPage = function() {
    const textDiv = "
Some text
";
    $("body").append(textDiv);
};

面对Ajax盛行的网页持续检查和执行

setInterval(function () { doSomething() }, 1000);

重新排序

const sortRows = function(selector, rowSelector) {
    const rows = $(selector);
    const firstRow = rows[0];
    var otherRows = rows.slice(1);
    otherRows.sort(function(a, b) {
        return $(a).find(rowSelector).html().localeCompare($(b).find(rowSelector).html());
    });

    const newRows = [].concat(firstRow).concat(otherRows);
    rows.replaceWith(newRows);
};

所以，就很简单。只要JavaScript玩得溜，没有啥能阻挡你屏蔽广告的步伐，而解决当下的这个问题，那就更简单不过了。