Installation de l'extension

Greasemonkey est une extension du navigateur Web que l'on ne présente plus : Mozilla Firefox. Cette extension offre la possibilité de lancer automatiquement des scripts javascripts écrits par l'utilisateur (userscript) et non le webmestre.

Le processus d'installation est assez simple. Il suffit que vous vous rendiez sur la page http://greasemonkey.mozdev.org avec Mozilla Firefox et que vous cliquiez sur le lien Install Greasemonkey :

Page de GreaseMonkey

Une fenêtre vous demandant la confirmation d'installation de l'extension devrait alors apparaître. Par sécurité vous ne pouvez pas cliquer aussitôt sur le bouton d'installation et devez attendre 3 secondes :

Installation de l'extension GreaseMonkey

Cliquez-alors sur le bouton Installer, puis redémarrez Firefox.

Au redémarrage de ce dernier, une nouvelle icône devrait apparaître en bas à droite de la barre des statuts :

Icône de GreaseMonkey dans la barre de status

Dans le cas où le visage du singe est grisé et que ce dernier fait la grimace, cliquez sur l'icône, puis dans le menu sur l'entrée Enabled. Le visage devrait alors se colorer, indiquant que Greasemonkey fonctionne.

Installation et utilisation de userscript

Si vous n'avez pas le courage, les compétences ou le temps d'écrire vos propres scripts, ne vous inquiétez pas beaucoup de personnes l'ont déjà fait pour vous !

Vous pouvez notamment vous en rendre compte en vous rendant sur le site http://userscripts.org/.

Connaissez-vous le site AtomFilms ? Pour l'exemple, installons un userscript qui se lancera automatiquement lors de l'accès à ce site web. Ce userscript supprime les vidéos de publicité qui passent avant le visionnage.

Pour l'installer, rendez-vous donc sur cette page, puis cliquez sur le lien Install this script en haut à droite. Une boîte de dialogue dans ce style devrait s'afficher :

Installation d'un user script avec GreaseMonkey

Cliquez sur Install... et le script est aussitôt installé. Vous pouvez alors vous rendre sur AtomFilms et tester. Pour vous rendre compte de la différence, faites le test avec Greasmonkey activé, puis désactivé.

Exemple d'un besoin de userscript

Vous connaissez très certainement les sites qui vous permettent de mettre en ligne gratuitement photos pour que vous puissiez les utiliser sur votre blog, comme le site http://www.imagevenue.com par exemple ?

Prenons l'exemple de ce site web : http://www.gtaforums.com/index.php?..., les images sont hébergées chez imagevenue. Lorsque vous cliquez dessus, vous arrivez sur une page contenant la dite image, ainsi que des publicités et autres artifices. Cependant, ce qui nous intéresse c'est seulement l'image elle-même !

Grâce à Greasemonkey, il est possible de développer un script qui récupère automatiquement l'adresse de l'image et nous redirige automatiquement vers cette dernière.

Avant d'écrire le script, nous devons commencer par étudier un peu les pages de ce type. A l'aide de l'explorateur de DOM on s'apperçoit rapidement que l'image qui nous intéresse est identifiée par l'id thepic. L'accès à cette image est donc aisée, de même pour l'écriture de notre script.

Ecriture d'un userscript

Les contraintes pour un userscript

Pour qu'un script javascript soit reconnu comme userscript par Greasemonkey il doit respecter certaines contraintes. La toute première est qu'il doit se terminer par .user.js.

L'autre contrainte est qu'il contienne quelques metainformations, en commentaire, telles que le nom du script, une description ainsi que les domaines auxquels ils s'appliquent. Ces informations sont renseignées grâce aux lignes de ce type :

// ==UserScript==
// @name          ViewImage
// @description   Display directly only the image on the imagevenue like websites
// @include       http://*.imagevenue.com/view.php*.jpg
// @include       http://*.imagevenue.com/img.php*.jpg
// ==/UserScript==

Ecriture de notre script

Pour écrire notre script, ouvrez un nouveau fichier viewimage.user.js dans votre éditeur de texte favoris.

Notre script doit :

  1. isoler l'image intéressante dans la page ;
  2. récupérer la source de cette image (attribut src) ;
  3. rediriger la page vers l'image directement.

D'après nos observations, nous pouvons récupérer l'image à partir de son identifiant : thepic. Nous le faisons à l'aide du code :

var img = document.getElementById("thepic");

Nous récupérons ensuite la source de cette image :

var url = img.getAttribute("src");

Et nous redirigons finalement la page directement vers l'image :

var protocol, host, newurl;
protocol = window.location.protocol;
host     = window.location.hostname;
newurl = protocol + "//" + host + "/" + url;
window.location.href = newurl;

Ce qui nous donne au final, le script :

// ViewImage
// version 0.1 BETA!
// 2007-01-18
// Copyright (c) 2007, GrdScarabe
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.  To install it, you need
// Greasemonkey 0.3 or later: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Salon Auto-Pass", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          ViewImage
// @description   Display directly only the image on the imagevenue like websites
// @include       http://*.imagevenue.com/view.php*.jpg
// @include       http://*.imagevenue.com/img.php*.jpg
// ==/UserScript==

var img, src, protocol, host, newurl;
// on recherche dans la page l'image a afficher
img = document.getElementById("thepic");
    
// on prepare l'url de l'image
src      = img.getAttribute("src");
protocol = window.location.protocol;
host     = window.location.hostname;
newurl = protocol + "//" + host + "/" + src;
    
// ... et on s'y deplace
window.location.href = newurl;

Installation du script

La prise en compte du script par Greasemonkey est très simple. Il suffit en effet d'ouvrir le script directement dans Firefox, une boîte de dialogue vous demandera alors si vous voulez installer le script.

A vous de vous lancer dans la réalisation de userscript ... n'hésitez pas à les proposer aux autres par le biais de ce site ou bien de http://userscripts.org/.

Vous trouverez mes scripts Greasemonkey à l'adresse : http://www.grdscarabe.net/pub/dev/g....