Outils pour utilisateurs

Outils du site


greasemonkey

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
greasemonkey [2013/05/14 17:52] – [C'est quoi ?] sebsauvagegreasemonkey [2014/07/12 11:26] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 ====== GreaseMonkey ====== ====== GreaseMonkey ======
  
-Cette page s'adresse aux développeurs. Débutants, passez votre chemin.+Cette page (succincte) s'adresse aux développeurs. Connaissances en javascript requises, XPath recommandées. Débutants, passez votre chemin.  
 + 
 ===== C'est quoi ? ===== ===== C'est quoi ? =====
  
-[[https://addons.mozilla.org/fr/firefox/addon/greasemonkey/|GreaseMonkey]] est une extension Firefox qui permet de modifier à la volée n'importe quelle page web, à chaque fois qu'elle est chargée. Par exemple, pour changer la couleur de fond de votre site favori, ou supprimer une partie de la page qui vous gêne à chaque visite, ou encore pour modifier tous les liens d'une page.+[[https://addons.mozilla.org/fr/firefox/addon/greasemonkey/|GreaseMonkey]] est une extension Firefox qui permet de modifier à la volée n'importe quelle page web, à chaque fois qu'elle est chargée. Par exemple, pour changer la couleur de fond de votre site favori, ou supprimer une partie de la page qui vous gêne à chaque visite, ou encore ne plus jamais voir les messages d'un utilisateur précis sur votre forum favori. Les possibilités sont multiples.
  
 ===== Comment ça marche ? ===== ===== Comment ça marche ? =====
  
-Installez d'abord l'extension Firefox, puis ajoutez les scripts de votre choix, ou créez-en vous-même. Ces scripts (écrits en javascript) manipulent la page web au moment où elle est chargée. Les scripts sont définis pour s'activer sélectivement sur certains site et certaines pages.+Installez d'abord l'[[https://addons.mozilla.org/fr/firefox/addon/greasemonkey/|extension Firefox]], puis ajoutez les [[https://userscripts.org/|scripts de votre choix]], ou créez-en vous-même. Ces scripts (écrits en javascript) manipulent la page web au moment où elle est chargée. Les scripts sont définis pour s'activer sélectivement sur certains sites ou pages.
  
 :!: **ATTENTION**: Ne téléchargez pas n'importe quel script. Les scripts peuvent faire n'importe quoi dans les pages. Utilisez votre cerveau. :!: **ATTENTION**: Ne téléchargez pas n'importe quel script. Les scripts peuvent faire n'importe quoi dans les pages. Utilisez votre cerveau.
Ligne 16: Ligne 18:
 C'est le but de cette page.  C'est le but de cette page. 
  
-Généralement, quand on veut écrire un script GreaseMonkey, c'est pour supprimer ou modifier quelque chose dans une page. Voici quelques fonctions utilitaires pour simplifier les choses, avec quelques exemples d'appel:+Généralement, quand on veut écrire un script GreaseMonkey, c'est pour supprimer ou modifier quelque chose dans une page. Voici quelques fonctions utilitaires pour simplifier les choses, avec quelques exemples d'appel
 + 
 +L'entête d'un script GreaseMonkey doit contenir: 
 +  * **@name** : Nom du script. 
 +  * **@namespace** : Namespace de votre script (mettez l'URL de votre site, ça fera l'affaire) 
 +  * **@include** : Indique sur quelles URLs il doit s'activer.
  
 <file javascript monscript.js>// ==UserScript== <file javascript monscript.js>// ==UserScript==
Ligne 78: Ligne 85:
         head.appendChild(style);         head.appendChild(style);
     }     }
-       +
-     +
     // Converts an image to text.     // Converts an image to text.
     // Attributes, links and javascript actions are preserved.     // Attributes, links and javascript actions are preserved.
Ligne 98: Ligne 104:
     try     try
     {     {
-       +        // Mettez votre code ici. EXEMPLES:
-        // Mettez votre code ici. Quelques exemple:+
                  
         // Supprimer des actions Javascript sur certains éléments d'un formulaire.         // Supprimer des actions Javascript sur certains éléments d'un formulaire.
Ligne 117: Ligne 122:
         // Convertir une image en texte:         // Convertir une image en texte:
         imageToText("//img[@src='/images/btn_gras.gif']","[Gras]");         imageToText("//img[@src='/images/btn_gras.gif']","[Gras]");
-       +         
 +        // et divers autres exemples en vrac, histoire de montrer quelques possibilité de XPath: 
 +        removeElement("//div/p/b[starts-with(.,'tous les utilisateurs du site se doivent de respecter les autres')]/../../*[position()>=6 and position()<=9]"); 
 +        removeElement("//th[text()='Nombre de discussions']/ancestor::table[1]"); 
 +        setAttributeOfElement('style','font-weight:bold; background-color:#FFFFE8',"//tr/td[position()=last() and text()='0']/../descendant::*"); 
 +        setAttributeOfElement('style','font-size:8pt;','//tr[@class=\"fb\"]/td'
 +        removeElement("//span[@class='Datered' or @class='Dategris' or @class='Date']/following-sibling::br"); 
 +        removeElement("//div[@id='colonneDroite']/div/div/h2[text()='Extraits de la charte']/ancestor::div[1]"); 
     }     }
     catch (e)     catch (e)
Ligne 126: Ligne 138:
 })(); })();
 </file> </file>
 +
 +Pour trouver quels éléments atteindre, utilisez l'inspecteur de Firefox (clic-droit > Examiner l'élément). Si l'élément en question a un **id**, c'est bonheur: il est (en principe) unique dans la page. Sinon bon courage avec les classes, parent/ancestor/sibling et autres bricolages à base de XPath (comme dans les horribles exemples que j'ai donnés).
 +
 +A titre d'exemple, pour virer la boite de recherche de mon Shaarli, on ferait:
 +
 +<code javascript>// ==UserScript==
 +// @name        Essai
 +// @namespace   tototititata.com
 +// @include     http://sebsauvage.net/links/*
 +// ==/UserScript==
 +
 +(function () {
 +...code supprimé...
 +    try
 +    {
 +       removeElement("//div[@id='headerform']");
 +    }
 +    catch (e)
 +    {
 +        alert("UserScript exception:\n" + e);
 +    }
 +})();</code>
 +
 +ou encore forcer tous les liens en bleu:
 +
 +<code javascript>injectCSS("a { color:blue !important; }");</code>
 +
 +À vous de jouer !
 +
 +===== Autres exemples =====
 +
 +==== Redirection de page dans Tumblr ====
 +
 +Si vous êtes sur une page tumblr du genre: <html>http://*.tumblr.com/image/12345</html>, ce script vous redirigera immédiatement vers l'URL directe de l'image (pour l'afficher pleine page):
 +
 +<code javascript>
 +// ==UserScript==
 +// @name        Tumblr image redirector (/image --> direct image URL)
 +// @namespace   sebsauvage.net
 +// @include     http://*.tumblr.com/image/*
 +// @version     1
 +// ==/UserScript==
 +
 +try {
 +    var alltags = document.evaluate("//div[@id='content']/img",document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
 +    if (alltags.snapshotItem(0) != null)
 +    {
 +        document.location=alltags.snapshotItem(0).src;
 +    }
 +}
 +catch (e)
 +{
 +    alert("UserScript exception:\n" + e);
 +}
 +</code>
 +
 +
  
greasemonkey.1368553969.txt.gz · Dernière modification : 2014/07/12 11:26 (modification externe)