Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
greasemonkey [2013/05/14 18:54] – [C'est quoi ?] sebsauvage | greasemonkey [2014/07/12 12:26] (Version actuelle) – modification externe 127.0.0.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. Ou encore vous ne voulez plus jamais voir les messages d'un utilisateur sur les forums. Les possibilités sont multiples. | [[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'[[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. | :!: **ATTENTION**: Ne téléchargez pas n'importe quel script. Les scripts peuvent faire n'importe quoi dans les pages. Utilisez votre cerveau. |
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== |
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. |
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. |
// 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) |
})(); | })(); |
</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> |
| |
| |
| |