PRATIQUE OUTILS 
Présentation de GreaseMonkey
 
Première approche de cette extension de Firefox autorisant l'utilisateur à remanier une page Web à loisir. (25/05/2005)
  Forum

Réagissez dans les forums de JDN Développeurs

Développé par Aaron Boodman and Jeremy Dunck, l'extension GreaseMonkey est d'une simplicité inhabituelle, mais autorise pourtant à remanier le Web de manière très personnnelle, de sorte qu'une véritable vague de scripts GreaseMonkey s'est créée à la suite de sa disponibilité.

Le but de GreaseMonkey : offrir aux utilisateurs la possibilité d'utiliser, voire d'écrire, des petits scripts qui modifient la page en cours de visite. C'est une extension à l'extrème du concept mis en place avec les feuilles de style personnelle, où l'utilisateur peut spécifier une CSS personnelle que tous les sites doivent utiliser (afin, par exemple, d'avoir des polices plus lisibles).

GreaseMonkey pousse plus loin l'idée, notamment en laissant le concepteur d'un script cibler directement un seul site. Un développeur peut donc créer un script qui améliore/modifie un site d'une manière spécifique, et diffuser son script pour que les autres utilisateurs puissent en bénéficier.

Construction d'un script
Un script GreaseMonkey (GM) est écrit en JavaScript (JS), et reprend donc ses avantages et quelques-unes de ses limitations. Quelques-unes, car GreaseMonkey offre aux scripts une petite API ouvrant des portes normalement fermées aux programmes JavaScript.

Un impératif pour que le fichier soit reconnu comme script GreaseMonkey (on dit "user-script") : qu'il se termine par .user.js. Autrement, sa construction est assez libre : n'importe quel code JavaScript ou DOM fonctionnera, même un simple alert("Texte");. Il est cependant recommandé, pour ne pas interférer avec de possibles scripts de la page visualisée, de placer le code JS dans une fonction anonyme, comme ceci :

(function() {
  alert("Texte");
  }
)();


Ensuite viennent les bonnes pratiques, comme de placer en en-tête du fichier certaines métadonnées utiles tant pour la gestion du script par GM, que pour son utilisation. Ces métadonnées décrivent le script, nomment son créateur et précisent dans quelles conditions il doit être lancé. Elles sont placées dans les indicateurs de commentaires classiques //, et encadrées par // ==UserScript== et // ==/UserScript==. Il y a 5 sections à remplir :

// ==UserScript==
// @name Lapin!
// @namespace http://exemple.com/scripts/lapin/
// @description Fait apparaître un lapin géant sur la page
// @include *
// @exclude http://exemple.com/*
// @exclude http://www.exemple.com/*
// ==/UserScript==


@name donne le nom du script, qui doit être suffisamment unique pour ne pas être utilisé ailleurs.
@namespace indique la page officielle du script. Il permet par ailleurs d'aider GreaseMonkey à distinguer les scripts de mêmes noms mais d'auteurs différents.
@description présente brièvement ce que fait le script.
@include permet de spécifier sur quel(s) site(s) le script agit, avec le joker *. Il peut y en avoir plusieurs, chacun ne comportant qu'une URL.
@exclude spécifie sur quels sites le script ne doit PAS agir. Il peut également y en avoir plusieurs.

Ces métadonnées peuvent être précédées ou suivies d'autant de commentaires que souhaité. Le développeur peut donc préciser plus largement l'objectif du script, son mode d'emploi voire sa licence d'utilisation.

Voici par exemple comment retirer de la page un élément ayant pour ID "pubflash", au moyen des méthodes du DOM :

// ==UserScript==
// @name Apu Flash!
// @namespace http://exemple.com/scripts/pubflash/
// @description Retire les pubs en Flash du site example.com
// @include http://exemple.com/*
// @include http://www.exemple.com/*
// ==/UserScript==
(function() {
  var publicite = document.getElementById('pubflash');
  if (publicite) {
    publicite.parentNode.removeChild(publicite);
    }

  }
)();

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page