最近遇到一個問題妆艘，在使用Google Classroom時需要對學(xué)員進(jìn)行分組泞遗，而應(yīng)用本身不提供這個功能。有同事研究了它的API倔监，發(fā)現(xiàn)也無法解決這個問題直砂。這無疑使我們的工作變得繁重起來，不得不做更多的人工工作浩习。
其實我們需要的也并不多静暂，只要能夠快速統(tǒng)計出每組的學(xué)員數(shù)據(jù)就可以了，每組每節(jié)課有多少學(xué)員完成了作業(yè)谱秽，如果有一個映射表洽蛀，再經(jīng)過簡單的排序或統(tǒng)計摹迷，數(shù)據(jù)將呼之欲出。
很容易想到了瀏覽器插件郊供，由于這些數(shù)據(jù)僅需要特定的人進(jìn)行查閱和統(tǒng)計即可峡碉，因此在瀏覽器客戶端完成即可。
制作瀏覽器插件成本還是有一點高驮审，于是轉(zhuǎn)而想到了TamperMonkey鲫寄，俗稱“油猴腳本”。
這個就簡單多啦疯淫。瀏覽器安裝TamperMonkey擴(kuò)展程序以后地来，自己看看頁面元素，寫寫JS就可以搞定啦熙掺。
TamperMonkey是什么
Tampermonkey是一款免費的瀏覽器擴(kuò)展程序未斑，支持多種瀏覽器。
通過TamperMonkey可以對制定的網(wǎng)頁加載和運(yùn)行用戶腳本币绩，改變網(wǎng)頁的外觀颂碧，修改網(wǎng)頁瀏覽體驗。
我們可以通過直接加載流行的用戶腳本类浪，或是編寫自己的用戶腳本载城，來達(dá)到上述的目的。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)下的這個問題，那就更簡單不過了谒所。
