Comment changer la couleur des liens vers des extensions de fichiers spécifiques avec un script d'utilisateur?

Question

Mon site de l'école a des liens de téléchargement de devoirs et je veux les distinguer en les colorant de différentes couleurs. Par exemple, les fichiers Microsoft Word sont en bleu et les fichiers .RTF en vert.
Depuis que je suis nouveau à cela, aucun de mes scripts ne fonctionne.

Mon script:

// ==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"; 
     } 
    } 
})(); 

j'ai essayé googler, mais n'a trouvé aucune solution.

Answer 1

1. Le site Web de votre école peut très bien charger la liste de fichiers en utilisant AJAX. Si c'est , vous devez utiliser des techniques compatibles avec AJAX.
2. En outre, comme indiqué par wOxxOm, il y a une erreur de syntaxe dans le code.
3. De temps en temps, selon le CSS du site, vous devrez peut-être use the !important flag.

Le script complet suivant utilise jQuery et waitForKeyElements() pour traiter les articles 1 & 2 (il fonctionne sur des pages statiques aussi):

// ==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; 
    } 
} 

---

Note: Le sélecteur jQuery "a" filtreront tous les liens ! Mais nous avons besoin de détails sur la page pour choisir un sélecteur plus ciblé. Utilisez les techniques illustrées au this question pour affiner la sélection.