Introduction à Greasemonkey

Est-ce que ça vous est déjà arrivé de regretter qu'un site web ne possède pas une fonctionnalité que vous jugeriez pratique ou encore de vouloir en modifier une déjà existante ?

Dans mon cas, après avoir visité à plusieurs reprises le site web de l'humoriste Louis-José Houde, je commençais à trouver que les vidéos placés dans le haut des sections étaient agaçants car ils démarrent automatiquement à chaque chargement de page. On en rit lors des premières visites mais comme n'importe quelle blague, ça peut être pénible de l'entendre trop souvent.

Heureusement, mon impatience peut être contrôlée grâce à Greasemonkey, une extension pour Firefox qui permet de créer des scripts (JavaScript) pour modifier le comportement des pages, ajouter, remplacer et même supprimer du contenu. Une fois le script écrit, on l'installe et il sera exécuté à chaque visite du site en question.

D'abord, installons l'extension Greasemonkey (la version actuelle est 0.8). Une fois ajouté à Firefox, on devrait voir le visage d'un singe dans le coin inférieur droit du fureteur. Si le visage du singe est souriant et coloré, c'est que l'extension est activée et que les scripts installés seront exécutés. Si ce n'est pas le cas, il suffit de cliquer sur le visage pour basculer entre le mode actif et inactif.

Ensuite, on est prêt à installer des scripts. Bien qu'on puisse en télécharger un peu partout sur Internet (userscripts.org est une bonne source de scripts Greasemonkey), je vais tenter de présenter une brève introduction sur la façon de rédiger ce genre de script.

Pour pouvoir réaliser un nouveau script, rendez-vous dans Firefox, au menu Tools / Greasemonkey / New User Scripts. Un formulaire vous permettra de définir les metadatas :

• Name : nom du script (pas très important)
  
• Namespace : d'où le script provient (pas très important)
• Description (pas très important)
• Includes (important) : il s'agit de dire sur quels domaines on veut exécuter le script
  
  • indiquer * si on veut inclure tous les sites
  • sinon entrez l'URL de chaque site. Dans mon cas, je vais spécifier toutes les pages du site de Louis-José Houde : http://www.louisjosehoude.com/*

Une fois qu'on aura cliqué sur le bouton OK, si c'est la première fois qu'on utilise le wizard, il nous demandera de spécifier l'éditeur qui permettra d'écrire le script. Dans mon cas, j'opte pour le très polyvalent Notepad++.

En arrière-plan, un fichier dont le nom se termine par .user.js sera créé. À l'intérieur (il sera automatiquement ouvert dans l'éditeur), on remarquera que l'entête contient les metadatas entrés dans un format particulier :

// ==UserScript==
// @name           LJH
// @namespace      http://code18.blogspot.com
// @description    Retirer les vidéos des entêtes de sections
// @include        http://www.louisjosehoude.com/*
// ==/UserScript==

Immédiatement en dessous, on entrera le code JavaScript à exécuter. Comme mon objectif est de retirer les vidéos placés en entête des sections, je dois initialement connaître l'élément du Document Object Model (DOM) que je vais devoir retirer. En inspectant le code source HTML avec Firebug, on note que l'ID que porte la balise qui contient les vidéos est "videoTop" mais qu'elle n'est pas présente sur toutes les pages.

Comme le DOM doit être complètement chargé pour pouvoir y appliquer des modifications (autrement il ne trouvera pas les éléments), on appelera la fonction onLoad dès que la page sera chargée.

window.addEventListener('load', onLoad, false);

function onLoad() {
 if ( document.getElementById('videoTop') ) {
     var videoDiv = document.getElementById('videoTop');
     videoDiv.innerHTML = '';
 }
}

Pour terminer, on enregistre le script et on le teste en allant visiter le site. Les vidéos devraient être disparus.