Différences

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

--- greasemonkey [2013/05/14 17:59] – [GreaseMonkey] sebsauvage
+++ greasemonkey [2014/07/12 11:26] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== GreaseMonkey ======
-Cette page s'adresse aux développeurs. Connaissances en javascript et XPath requises. 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.
@@ Ligne 10: / Ligne 10: @@
 ===== Comment ça marche ? =====
-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 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.
@@ Ligne 20: / Ligne 20: @@
 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 contient:
+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)
@@ Ligne 85: / Ligne 85: @@
         head.appendChild(style);
     }
     // Converts an image to text.
     // Attributes, links and javascript actions are preserved.
@@ Ligne 105: / Ligne 104: @@
     try
     {
         // Mettez votre code ici. EXEMPLES:
@@ Ligne 124: / Ligne 122: @@
         // 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)
@@ Ligne 133: / Ligne 138: @@
 })();
 </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>