Wiki de sebsauvage.net

Outils pour utilisateurs

Outils du site

Piste :
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 18:45] – sebsauvagegreasemonkey [2014/07/12 12:26] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 ====== GreaseMonkey ====== ====== GreaseMonkey ======
  
-Cette page d'adresse aux développeurs. Débutants s’abstenir.+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 ? =====
  
-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 favorit, 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. +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:
- +
-        //======================================================================    +
-        // Colonne centrale: +
- +
-        // Suppression des éléments en haut de la colonne de la page principale des forums +
-        // (liste et description des forums, rappel des us et coutumes, etc.) +
-        // ( http://www.commentcamarche.net/forum/ )         +
-        //removeElement("//div/p/b[starts-with(.,'tous les utilisateurs du site se doivent de respecter les autres')]/../../*[position()>=6 and position()<=9]");+
                  
-        // Dans la page d'accueil des forum, suppression de la table qui donne la liste des +        // Supprimer des actions Javascript sur certains éléments d'un formulaire.
-        // forum et le nombre de discussion. +
-        removeElement("//th[text()='Nombre de discussions']/ancestor::table[1]"); +
-         +
-        // Suppression du rappel de la liste des forum (situé entre la discussion et la zone de saisie de réponse) +
-        removeElement("//td/div/h2[text()='Forums']/following::table[1]"); +
-        removeElement("//td/div/h2[text()='Forums']"); +
-        +
-        // Agrandissement des zones de saisie: +
-        //   - message dans forum +
-        //   - devise dans le profil. +
-        //   - signature dans le profil. +
-        //   - édition du descriptif logiciel dans section téléchargement +
-        //   - édition article dans la base de connaissances. +
-        setAttributeOfElement('rows','40',"//textarea[@name='message' or @name='Pdevise' or @name='description']"); +
-        setAttributeOfElement('cols','120',"//textarea[@name='message' or @name='Pdevise' or @name='description' or @name='signature']");        +
-     +
-        // Dans la liste des discussion, on met en gras (et fond jaune clair) les discussions qui n'ont reçu aucune réponse. +
-        setAttributeOfElement('style','font-weight:bold; background-color:#FFFFE8',"//tr/td[position()=last() and text()='0']/../descendant::*"); +
-       +
-        // Dans la liste des discussion, on met en gris clair les discussions supprimées. +
-        setAttributeOfElement('style','color:#aaa;background-color:#f9f9f9;',"//tr/td[position()=last() and text()='X']/../descendant::*"); +
-      +
-        // Forcer la taille du texte dans la liste des discussions. +
-        setAttributeOfElement('style','font-size:8pt;','//tr[@class=\"fb\"]/td') +
-        setAttributeOfElement('style','font-size:8pt;','//tr[@class=\"fa\"]/td') +
- +
-        // Supprimer la date dans la liste des discussions +
-        removeElement("//span[@class='Datered' or @class='Dategris' or @class='Date']/following-sibling::br"); +
-        removeElement("//span[@class='Datered' or @class='Dategris' or @class='Date']"); +
- +
-        // On convertit certaines images en liens texte. +
-        var imgs = new Array(  new Array("//img[@src='/images/star0b.png' or @src='/images/star0a.png']","[Pertinence]"), +
-                               new Array("//img[@src='/forum/images/editer-bleu.png']","[Editer]"), +
-                               new Array("//img[@src='/forum/images/mp-bleu.png']","[MP]"), +
-                               new Array("//img[@src='/forum/images/autres-messages-bleu.png']","[Autres messages]"), +
-                               new Array("//img[@src='/forum/images/forum-bleu.png']","[Retour forum]"), +
-                               new Array("//img[@src='/forum/images/moderer-bleu.png']","[Modérer]"), +
-                               new Array("//img[@src='/images/g.gif' or @src='../images/g.gif']","[Gras] "), +
-                               new Array("//img[@src='/images/i.gif' or @src='../images/i.gif']","[Italique] "), +
-                               new Array("//img[@src='/images/s.gif' or @src='../images/s.gif']","[Souligné] "), +
-                               new Array("//img[@src='/images/code.gif' or @src='../images/code.gif']","[Code] "), +
-                               new Array("//img[@src='/images/image.gif' or @src='../images/image.png']","[Image] "), +
-                               new Array("//img[@src='/images/ccmlink.png']","[CCM] "), +
-                               new Array("//img[@src='/images/link.png']","[Lien] "), +
-                               new Array("//img[@src='/images/carregold.png' or @src='/images/carre.gif']","") +
-                               ) +
-        for (index in imgs) { imageToText(imgs[index][0],imgs[index][1]); } +
- +
-         +
-        // Dans la liste des discussions, on met les modos en orange. +
-//         var modos = new Array ("_Agnes","asevere","blux","BmV","brupala","Castor","chat_teigne","choubaka","dje-dje","dohm", +
-//                                "Eaulive","Jeff","jipicy","kalamit","mr_poussy","Sebastien","sebsauvage","Serge","sirhill", +
-//                                "teebo","teutates","Thom@s","Yoan","Obeet"); +
-//         for (index in modos) +
-//             setAttributeOfElement('style','color:#FFA200',"//a[text()='"+modos[index]+"']");             +
- +
- +
-        //====================================================================== +
-        // Colonne de droite: +
- +
-        // Suppression du rappel de la charte à droite +
-        removeElement("//div[@id='colonneDroite']/div/div/h2[text()='Extraits de la charte']/ancestor::div[1]"); +
-        +
-         +
-        //====================================================================== +
-        // Général: +
- +
-        // On supprime toutes les images (sauf pour l'édition du message) +
-        //removeElement("//img[@src!='/images/ccmlink.png' and @src!='/images/g.gif' and @src!='/images/i.gif' and @src!='/images/s.gif' and @src!='/images/code.gif']"); +
-         +
-        // Retirer la popup CSS qui s'affiche quand on saisie le message +
-        removeAttributeOfElement('onfocus',"//textarea[@name='message']"); +
-        removeAttributeOfElement('onblur',"//textarea[@name='message']"); +
-         +
-        // Retirer la popup CSS qui s'affiche quand on saisie le titre+
         removeAttributeOfElement('onfocus',"//input[@name='titre']");         removeAttributeOfElement('onfocus',"//input[@name='titre']");
         removeAttributeOfElement('onblur',"//input[@name='titre']");         removeAttributeOfElement('onblur',"//input[@name='titre']");
                  
-        // Supprimer les couleurs:+        // Supprimer toutes les couleurs de fond:
         injectCSS('* { color: None !important; background: None !important; background-color: None !important; }');         injectCSS('* { color: None !important; background: None !important; background-color: None !important; }');
-        removeAttributeOfElement('bgcolor',"//td"); 
-        removeAttributeOfElement('bgcolor',"//table"); 
- 
-        // Permettre aux boites de dialog CSS de s'afficher quand même avec un fond 
-        // (sinon elles sont transparentes ; pas pratique !) 
- 
-        */ 
-        // Mettez votre code ici. Quelques exemple: 
-         
-        // forcer le fond blanc sur un site: 
-        injectCSS('body { background-color:white !important; }'); 
                  
         // supprimer les couleurs des tableaux:         // supprimer les couleurs des tableaux:
Ligne 207: Ligne 119:
         // forcer la largeur d'un textarea:         // forcer la largeur d'un textarea:
         setAttributeOfElement('cols','120',"//textarea[@name='message']");           setAttributeOfElement('cols','120',"//textarea[@name='message']");  
-       +         
 +        // Convertir une image en texte: 
 +        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 216: 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.1368553550.txt.gz · Dernière modification : 2014/07/12 12:26 (modification externe)