最近遇到一個問題，在使用Google Classroom時需要對學(xué)員進行分組，而應(yīng)用本身不提供這個功能。有同事研究了它的API，發(fā)現(xiàn)也無法解決這個問題。這無疑使我們的工作變得繁重起來，不得不做更多的人工工作。
其實我們需要的也并不多，只要能夠快速統(tǒng)計出每組的學(xué)員數(shù)據(jù)就可以了，每組每節(jié)課有多少學(xué)員完成了作業(yè)，如果有一個映射表，再經(jīng)過簡單的排序或統(tǒng)計，數(shù)據(jù)將呼之欲出。
很容易想到了瀏覽器插件，由于這些數(shù)據(jù)僅需要特定的人進行查閱和統(tǒng)計即可，因此在瀏覽器客戶端完成即可。
制作瀏覽器插件成本還是有一點高，于是轉(zhuǎn)而想到了TamperMonkey，俗稱“油猴腳本”。
這個就簡單多啦。瀏覽器安裝TamperMonkey擴展程序以后，自己看看頁面元素，寫寫JS就可以搞定啦。
TamperMonkey是什么
Tampermonkey是一款免費的瀏覽器擴展程序，支持多種瀏覽器。
通過TamperMonkey可以對制定的網(wǎng)頁加載和運行用戶腳本，改變網(wǎng)頁的外觀，修改網(wǎng)頁瀏覽體驗。
我們可以通過直接加載流行的用戶腳本，或是編寫自己的用戶腳本，來達到上述的目的。Greasyfork是一個很熱門的用戶腳本網(wǎng)站，點開了中文條目以后，似乎打開了一扇新的大門。OMG，我啥也沒說。
TamperMonkey怎么寫
作為程序員，還是很喜歡個性化定制的，尤其是遇到當(dāng)下這種奇葩的問題。
那么來看看如何寫自己的用戶腳本。
TamperMonkey的語法很簡單，兩個部分：
- 元數(shù)據(jù)定義
- 功能腳本
元數(shù)據(jù)
元數(shù)據(jù)定義使用JavaScript注釋來描述該腳本的使用情境，數(shù)據(jù)定義見官方文檔。其中，比較重要的幾個數(shù)據(jù)如下：
-
include/match/exclude
用來描述這個腳本將在哪些URL下生效。
-require
用來引用用戶腳本中需要引入的外部庫文件。這里最基礎(chǔ)而常用的當(dāng)然就是jQuery啦，操作頁面元素可是最常用的功能。
功能腳本
功能腳本，說的就是真正起作用的用戶腳本啦。
簡單來說，就是純寫JavaScript，沒什么特殊的地方。隨意記錄幾個常用的功能吧。
等待某個頁面元素加載
const waitForElement = function(selector, callback) {
if ($(selector).length) {
callback();
} else {
setTimeout(function() {
waitForElement(selector, callback);
}, 100);
}
};
為頁面增加新的元素
const addTextToPage = function() {
const textDiv = "<div>Some text</div>";
$("body").append(textDiv);
};
面對Ajax盛行的網(wǎng)頁持續(xù)檢查和執(zhí)行
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玩得溜，沒有啥能阻擋你屏蔽廣告的步伐，而解決當(dāng)下的這個問題，那就更簡單不過了。
