如何使用用户脚本更改链接到特定文件扩展名的颜色

Question

我的学校网站上有作业下载链接，我想用不同的颜色来区分它们。
例如:Microsoft Word文件是蓝色的，rtf文件是绿色的。
因为我是新手，所以我的脚本都不起作用。

我的脚本:

// ==UserScript==
// @name         Homework Help
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Color links for different file extensions
// @author       You
// @match        (My School Website)
// @grant        none
// ==/UserScript==
function getFileExtension(filename) {
    return filename.split('.').pop();
}
(function() {
    'use strict';
    // Your code here...
    var links = document.getElementByTagName("a");
    var element;
    for (var i = 0; i < links.lenth(); i++){
        element = rtfs[i];
        if( getFileExtension(element.href) == "rtf" ){
            element.style.color = "green";
        }
    }
})();

我试着谷歌一下，但是没有找到答案。

Answer 1

1. 您学校的网站可能会使用AJAX加载文件列表。如果在这种情况下，您需要使用支持ajax的技术。
2. 另外，正如wOxxOm指出的，代码中有一个语法错误。
有时候，根据网站的CSS，你可能需要使用!important标志。

下面的完整脚本使用jQuery和waitForKeyElements()来处理项目1 &2(它也适用于静态页面):

// ==UserScript==
// @name     _Color code links by file extension
// @match    http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.
// PICK A MORE PRECISE SELECTOR IF YOU CAN.
waitForKeyElements ("a", colorLink);
function colorLink (jNode) {
    var fileHref        = jNode.attr ("href");
    if ( ! fileHref)    return; //-- Not every link has an href.
    var fileExt         = fileHref.split ('.').pop ().toLowerCase ();
    switch (fileExt) {
        case "rtf":
            jNode.css ("color", "green");
        break;
        case "doc":
            jNode.css ("color", "pink");
        break;
        default:
            //-- No action needed.
        break;
    }
}

---

注意:jQuery选择器"a"将过滤通过每个链接!但是我们需要页面细节来选择一个更有针对性的选择器。使用这个问题中显示的技巧来缩小选择范围。