如何使用用户脚本更改指向特定文件扩展名的链接的颜色？答案

【问题标题】：How to the change color of links to specific file extensions with a userscript?如何使用用户脚本更改指向特定文件扩展名的链接的颜色？
【发布时间】：2017-03-05 00:52:06
【问题描述】：

我的学校网站有作业下载链接，我想通过给它们涂上不同的颜色来区分它们。
例如：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";
        }
    }
})();

我尝试谷歌搜索，但没有找到解决方案。

【问题讨论】：

错字：getElementByTagName 应该是 getElementsByTagName。您可以使用内置的 devtools 调试器检测这些简单的错误：在代码中的某处添加debugger; 行，例如在'use strict'; 之后，打开 devtools (F12)，重新加载页面，调试器将弹出，所以你可以单步执行代码并检查值。

标签： greasemonkey userscripts tampermonkey

【解决方案1】：

您学校的网站可能会使用 AJAX 加载文件列表。如果在这种情况下，您需要使用 AJAX 感知技术。
另外，正如 wOxxOm 所指出的，代码中存在语法错误。
有时，根据网站的 CSS，您可能需要 use the !important flag。

以下完整脚本使用 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" 将过滤每个链接！但是我们需要页面详细信息来选择更有针对性的选择器。使用this question 中显示的技术来缩小选择范围。

【讨论】：