Modifier les pages avec Greasemonkey

Motivations pour modifier les pages Web

Parfois, on aimerait bien pouvoir changer les pages que l'on consulte pour qu'elles aient une apparence différente, pour ajouter ou supprimer certains éléments; on peut par exemple supprimer les publicités,  faire disparaître certains conteneurs, ou même en ajouter.

En fait, si l'on connait le DOM on peut complètement modifier la structure d'une page

Installation de GreaseMonkey

L'exemple que je vais présenter ici utilise Greasemonkey, donc il faut utiliser le navigateur Firefox. Il existe des solution équivalentes dans les autres navigateurs.
Une fois Greasemonkey installé, créer un user script comme ceci: GreaseMonkey / Nouveau script utilisateur

En fonction de votre plateforme, Greasemonkey va peut-être vous proposer de choisir un éditeur de texte.
La version de production courante en avril 2012 est:
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Les scripts étant probablement spécifiques à des domaines, il vaut mieux renseigner le champ "inclus" lors de la création du script.

Ajoutons cette ligne au préambule:

// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Pour cet exemple, j'ai choisi le site: http://www.francemobiles.com/

Leurs revenus viennent de publicité pour des forfaits, il est donc normal qu'ils affichent des pubs pour des forfaits partout sur leurs pages. Celà dit, j'ai déjà un forfait donc.. je n'en vois pas trop l'intérêt, ni pour la plupart des gens. Bref.. Voici comment alléger un peu la page:

Après examen du DOM avec Web Developer Tools intégré à Firefox ou ajouté comme Add-on, ou directement en regardant dans le code source, on identifie trois classes qui contiennent probablement des publicités: simpleoDescription, simpleoBox, et shortRight

Ajouter ces trois lignes et vous ne les verrez plus.

$(".simpleoDescription").hide();
$(".simpleoBox").hide();
$(".shortRight").hide();

La rumeur, premier volet

De même, les liens contenant le mot "rumeur" ne m'intéressent pas. Je préfère les faits. Voici donc comment les supprimer de la liste.

En examinant le DOM, on voit qu'il y a une suite de lien, qui sont eux-mêmes contenus dans des tags LI, et qui contiennent un peu de texte descriptif. Avec cette ligne:

$('a[href*="rumeur"]').closest("li").hide();

on sélectionne d'abord les liens (tag a) qui contient le mot "rumeur"
La syntaxe est expliquée ici:  http://api.jquery.com/Attribute-contains-selector/
Puis, on recherche son plus proche parent "li", (élément dans une liste), que l'on cache.
Pendant la phase de mise au point, il vaut mieux utiliser ceci:
.css("border", "solid 1px red")
$('a[href*="Microsoft"]').closest("li").css("border", "solid 1px red");
pour mettre en évidence les éléments que l'on a sélectionnés.

Conclusion

Je n'ai fait qu'effleurer jquery et Greasemonkey, et pourtant rien qu'avec ces quelques exemples, on peut déjà se faire plaisir à modifier des pages.
Il n'y a pas trop de manque à gagner pour les propriétaires des sites web, vu que les images qui sont dans les DIV publicités sont bien téléchargées, et arrivent jusqu'à votre navigateur. Du point de vue des annonceurs et du site web, tout se passe normalement. Certes, les publicités ne vont pas générer de clics, puisqu'elles sont invisibles, ni même vous influencer indirectement parce que vous les voyez pas. Mais les annonceurs le croient, et c'est le plus important. Le perdant dans cette histoire, c'est celui qui a payé pour faire afficher sa publicité, car il paye pour quelquechose qui n'est pas affiché.
Mais ça, il ne le sait pas.