C'est quoi, GreaseMonkey ?

GreaseMonkey est une extension pour le navigateur Firefox qui permet de bidouiller à la volée les pages web que vous consultez.
C'est à dire qu'il va modifier la page directement dans le navigateur.

Cela vous permet de modifier à volonté toutes les pages de n'importe quel site selon vos désirs: supprimer des éléments qui vous énervent de certaines pages web, modifier le code HTML, ajouter du code HTML, modifier/ajouter/supprimer du javascript, changer les couleurs, ajouter des fonctionnalités, augmenter ou diminuer la taille de tableaux, formulaires...

Exemple 1

Voici un exemple de script: http://sebsauvage.net/temp/ccm/ccm.user.js
Ce script va modifier les pages de Comment ça marche afin d'agrandir la zone de saisie du message dans les forums.

La partie importante du script est:

        setAttributeOfElement('rows','40',"//textarea[@name='message']");
        setAttributeOfElement('cols','120',"//textarea[@name='message']");

Ces deux lignes modifient la taille (rows, cols) de la zone de texte (textearea) servant à taper les messages (identifiée par name="message").
On utilise XPath (//textearea...) pour sélectionner l'élément sur lequel agir.

XPath est un moyen commode de désigner des éléments précis d'une page HTML, mais son utilisation n'est pas obligatoire.
Vous pouvez passer par les méthodes DOM traditionnelles (.getElementsByTagName() puis faire une boucle for, etc.)

Exemple 2

Ce script contient également la ligne:

setAttributeOfElement('style','font-weight:bold;',"//td[text()='0']/../td[1]/a");    }

Dans la liste des discussions du forum, cela va mettre en gras les titres des discussions qui n'ont pas encore reçu de réponse.

Le chemin XPath se comprend comme suit:

• On sélectionne les cellules de tableau contenant le texte "0" (td[text()='0'])
• on remonte au niveau du <TR> (/..)
• on redescend dans la première cellule <TD> (celle qui contient le titre) (/td[1])
• on met en gras tous les liens (/a) contenus dans ce <TD>.

XPath

Quelques exemple:

• Sélectionner toutes les images: //img
• Sélectionner toutes les images sans bordure: //img[@border='0']
• Sélectionner tous les liens pointant vers Google: //a[@href='http://google.com']
• Sélectionner tous les liens pointant vers Google et contenant le texte "Lien vers Google": //a[@href='http://google.com' and contains(.,'Lien vers Google')]
• Sélectionner tous les liens: //a
• Sélectionner uniquement les images comportant des liens: //a/img
• Sélectionner uniquement les liens placés directement dans une cellule de tableau: //td/a
• Sélectionner uniquement le premier lien placé directement dans une cellule de tableau: //td/a[1]
• Sélectionner uniquement le dernier lien placé directement dans une cellule de tableau: //td/a[last()]
• Sélectionner toutes les cellules de tableau contenant exactement le texte "Hello": //td[text()='Hello']
• Sélectionner toutes les cellules de tableau contenant (quelquepart dans le texte) le mot "Hello": //td[contains(.,'Hello')]
• Sélectionner toutes les cellules de tableau commençant par le texte "Hello": //td[starts-with(.,'Hello')]
• Sélectionner tous les tableaux contenant une cellule contenant le mot "toto": //td[contains(.,'Hello')]/../.. (Le premier /.. remonte au niveau du <tr>, et le /.. suivant remonte au niveau du <table>)
• Sélectionner toutes les cellules de la seconde colonne des tableaux: //tr/td[2]
• Sélectionner toutes les cellules de la dernière colonne des tableaux: //tr/td[last()]
• Sélectionner les cellules des colonnes 1,2 et 3 des tableaux: //tr/td[position()<=3]
• Sélectionner toutes les tables ayant au moins un attribut: //table[@*]
• Sélectionner toutes les tables ayant l'attribut width: //table[@width]
• Sélectionner toutes les tables ayant une largeur de 400px: //table[@width='400px']
• Sélectionner toutes les balises qui sont directement filles d'une cellule: //td/*
• Sélectionner tous les liens qui sont directement fils d'une cellule: //td/a
• Sélectionner le second lien qui est directement fils d'une cellule: //td/a[1]
• Sélectionner la première balise contenue dans une cellule, quelle qu'elle soit: //td/*[1]
• Sélectionner la première balise comportant un attribut onload: //td/*[@onload]
• Sélectionner les balises <a> se situant après une balise p dans le code html: //p/following::a
• Sélectionner les balises <a> qui sont immédiatement filles d'une balise p: //p/a
• Sélectionner toutes les balises <a> qui sont contenues dans une balise p (quelle que soit la profondeur): //p/descendant::a
• Sélectionner toutes les balises <a> qui sont après une balise p, mais au même niveau: //p/following-sibling::a

Dans Firefox, vous pouvez utiliser le DOM Inspector pour vous aider à trouver les éléments à sélectionner (CTRL+MAJ+I).


Vous pouvez également utiliser l'extension XPather pour tester vos expressions XPath.

Fonctions utilitaires

Le script ccm.user.js contient 4 classes utilitaires pour vous simplifier la vie:

• removeElement(chemin) : Supprime un élement de la page.
• removeAttributeOfElement(nomattribut,chemin) : Supprimer l'attribut d'un élément.
• setAttributeOfElement(nomattribut,valeur,chemin) : Ajoute ou modifie l'attribut d'un élément
• injectCSS() : Injecte vos propre CSS dans une page.

chemin est le chemin XPath de l'élément.

Exemples:

removeElement()

...<td><span class="commentaire">blablabla</span></td>...

Pour supprimer le blabla, on ferait: removeElement('//td/span[@class='commentaire']');
Pour supprimer carrément la cellule (td) qui contient ce blabla: removeElement('//td/span[@class='commentaire']/..');
Pour supprimer tous les commentaires, même s'ils ne sont pas dans une cellule de tableau, on ferait: removeElement('//span[@class='commentaire']');

removeAttributeOfElement()

...<table width="400px" bgcolor="#ffe">...

Pour supprimer la taille indiquée dans ce tableau: removeAttributeOfElement('width','//table[@bgcolor='#ffe']');

setAttributeOfElement()

...<table width="400px" bgcolor="#ffe">...

Pour forcer la largeur de la table: setAttributeOfElement('width','100%','//table[@bgcolor='#ffe']');

injectCSS()

Pour modifier la police par défaut d'une page web:
injectCSS('body{font-family:Verdana,sans-serif; }');

Exemple 3

Voici un autre exemple de script

Ce script va modifier la vue que vous aurez du site sebsauvage.net.

• Suppression du gros oeil sur la page d'accueil:

  removeElement("//img[@src='images/nbt_gros_oeil.gif']");

• Suppression du tableau parlant de l'hébergeur (en bas de page):

  removeElement("//img[@alt='Digital Networks']/../../../../..");

• On retire le centrage de la date de dernière mise à jour (en bas à droite de la page):

  removeAttributeOfElement('align',"//td[contains(.,'Dernière mise à jour :')]")

• On met tout le site en texte orange sur fond bleu:

  injectCSS('body{background-color:#eef; color:#f80;')   

Liens

Page de l'extension GreaseMonkey
Livre en anglais sur GreaseMonkey (avec exemple)
Un site contenant des milliers de scripts prêts à l'emploi

Note: Écrire des scripts GreaseMonkey n'est pas toujours facile (il faut maîtriser Javascript, DOM, HTML, CSS et optionnellement XPath).

Platypus est une extension Firefox qui permet de générer automatiquement des scripts GreaseMonkey
Toutefois, Platypus a tendance à générer du code Javascript assez lent et lourd.