Je ne parlerai ici que d'extensions pour Firefox. Parce que c'est l'univers que je connais le mieux. Parce que c'est le plus extensible et donc celui qui ouvre le plus de voies pour bidouiller. Et parce que c'est le seul navigateur libre et "grand public" disponible sous GNU/Linux.

Cette rapide présentation s'adresse à des gens qui n'ont pas ou peu de connaissances des technologies du Web. Malheureusement, un pré-requis pour utiliser la plupart de ces outils est généralement de lire un peu l'anglais technique, très peu de documentation étant disponible dans d'autres langues. Si vous avez des questions, n'hésitez pas à les soumettre en commentaire et je tâcherai de faire un peu de SAV pour ce billet. Enfin, pour vous permettre de télécharger rapidement les outils que je liste ici, je les ai regroupés dans une collection "Bidouille" sur AMO.

Ne dites plus couteaux helvète mais Firebug

Firebug est l'extension indispensable pour quiconque veut bidouiller le Web. Il contient tous les outils possibles pour étudier le Web et commencer à le bricoler. Malheureusement, comme il est très puissant, sa prise en main n'est pas évidente. Il se présente sous la forme d'une série d'onglets, affichés en bas de l'écran ou dans une fenêtre indépendantes. F12 est la touche magique pour le faire apparaître. Les deux premiers panneaux sont sans doute les plus utiles pour débuter.

Le panneau HTML présente dans sa partie gauche le code source de la page, sous la forme d'une arborescence, et dans sa partie droite différentes informations, en particuliers sur les styles de l'élément en cours. On peut sélectionner n'importe quel partie de la page courante pour voir son code source et ses styles. Mieux, les deux sont directement modifiables. On peut ainsi jouer en direct avec la page, expérimenter, voire comment certaines modification du code l'impacteraient, etc. Les modifications ne peuvent pas être enregistrées, et sont perdues lorsqu'on recharge la page. C'est un outil idéal par exemple pour s'initier aux feuilles de style, puisqu'on voit instantanément les effets de chaque modification. Ces modifications peuvent ensuite être rendues permanentes via d'autres outils.

L'autre panneau très utile est la console qui permet dans sa partie de gauche de créer et d'exécuter du code JavaScript, en affichant dans la partie de droite le résultat. Idéal pour mettre au point des scripts.

Extension indispensable, Firebug demande cependant du temps pour être prise en main. Pour débuter, je vous conseille de commencer avec des outils à l'interface plus simple. Mais quel que soit votre niveau, Firebug sera un compagnon utile.

A portée de clic

Commençons donc par une série d'outils ne nécessitant aucune connaissance particulière. Quelques clics suffisent pour supprimer des éléments inutiles ou gênant, ou réarranger une page.

RIP et Aardvark

Remove It Permanently est sans doute la plus simple des extensions pour commencer à personnaliser votre Web. Elle permet tout simplement de masquer définitivement des éléments dans une page. Gêné dans votre lecture par des animations dans une colonne à côté des articles de votre site favori ? Sélectionnez la colonne et demandez à RIP de ne plus l'afficher pour l'ensemble du site. Malheureusement, sélectionner précisément l'élément à supprimer n'est pas toujours évident. RIP offre donc un mode avancé où vous pouvez indiquer les élément à supprimer via leur XPath. XPath est une syntaxe permettant (entre autre) de désigner des fragments d'une page Web. Elle est assez ardue, et si vous souhaitez vous y initier, je vous conseille FireXPath qui vous permet de connaître le XPath d'un élément en le sélectionnant avec Firebug. Mais pour les situations plus complexes, mieux vaut vous tourner vers Aardvark ou Platypus.

Aardvark[1] est disponible soit comme extension, soit via une simple bookmarklet. Sa principale utilité est d'éditer une page avant de l'imprimer, en supprimer des éléments (ou tous les éléments sauf celui sélectionné), modifier les couleurs... Ces changements ne sont pas enregistrés, hormis si RIP est installé. Comme son interface est plus agréable que celle de RIP, elle en constitue un bon complément. Vous pouvez la tester sans rien installer directement sur sa page de documentation.

Platypus

Platypus (l'Ornithorynque) permet d'aller un peu plus loin. Cette extension offre de nombreuses fonctions permettant d'éditer les pages, et ces modifications peuvent être enregistrées de manière permanente. Il ajoute une barre d'outil pour modifier à votre guise les pages Web. Si vous installez également Greasemonkey, il est capable d'enregistrer vos modifications sous forme de scripts pour Greasemonkey, et de les ré-appliquer à chaque fois que vous revenez sur cette page ou ce site. Platypus offre les fonctions classiques d'Aardvark, pour supprimer ou isoler des éléments, mais également un éditeur de style permettant simplement, pour chaque élément sélectionné, de modifier sa taille, ses couleurs ou les propriétés de la police. Avec un peu d'expérience, vous pouvez aussi injecter du HTML dans la page. Enfin, Platypus offre une option "magique" de réparation, qui essaie de rendre la page plus lisible en supprimant ce qui pourrait déranger la lecture. Bon, les résultats sont assez aléatoires, mais parfois bien vus. Pour une documentation plus complète, c'est par ici.

Customize Your Web

Il y avait longtemps que pas grand chose de neuf n'était apparu pour modifier simplement les pages Web. Apparu il y a à peine quelques mois, Customize Your Web (CYW) permet d'aller plus loin que Platypus, et semble très prometteur[2].

CYW est une sorte d'éditeur interactif de scripts : vous créez via son interface des scripts, ensemble d'actions à exécuter sur une page, un site, etc. Ces scripts sont enregistrés et exécutés automatiquement à chaque chargement de la page. On peut également les exporter ou importer des scripts écrits pas d'autres, comme avec GreaseMonkey.

Comme avec Aardvark ou Platypus, vous commencez par sélectionner des éléments dans la page, mais la liste d'actions disponibles est ensuite beaucoup plus importante. En cliquant sur un élément, un menu vous offre une liste de commandes. Vous pouvez bien sûr supprimer l'élément, mais aussi éditer ses propriétés. Un mode "expert" vous donne accès à toutes les propriétés CSS disponibles. Vous pouvez déplacer des éléments pour réarranger la page comme vous le voulez. Vous pouvez créer des raccourcis clavier, par exemple pour vous positionner facilement sur un formulaire de recherche. Vous pouvez déclencher le clic sur un bouton, pour lancer une recherche automatiquement en arrivant sur une page, ou vous connecter si Firefox avait mémorisé un login. Vous pouvez également créer des raccourcis pour afficher et masquer à la demande des fragments de la page.

De toutes les extensions précédentes, CYW est pour l'instant celle qui va le plus loin, et surtout elle est en développement actif, quand les autres ont l'air d'être un peu en sommeil. Je vous conseille de garder un œil dessus.

Les mains dans le code

Pour aller plus loin, il est temps de mettre les mains dans le code. Heureusement, ça ne tache pas. Les outils qui manipulent le résultat, c'est à dire la page telle qu'elle est affichée, ne vous donneront jamais autant le contrôle que ceux qui agissent sur le code lui-même. Pour pour vraiment faire ce que vous voulez, il va falloir apprendre un peu de HTML, CSS et JavaScript. Heureusement, autour de chacune des extensions suivantes existent des communautés actives, qui partagent leurs connaissances et surtout leurs scripts. Vous pouvez donc commencer en installant des scripts réalisés par d'autres et en les modifiant pour les adapter peu à peu à vos besoins.

Stylish

Stylish est une extension vous permettant d'appliquer vos propres mises en forme à des pages Web. Vous pouvez soit les créer entièrement vous-même, mais cela demande de connaître CSS, soit utiliser ou vous inspirer des centaines de styles existants et partagés par des utilisateurs sur le site userstyles. Vous pouvez ainsi complètement personnaliser la mise en page des sites que vous utilisez : modifier les fontes utilisées, leur taille, revoir la largeur des colonnes, supprimer certains blocs de contenus, etc. Avec Stylish, vous devenez le maquettiste de vos sites. Si par exemple vous utilisez Scroogle[3], mais trouvez son interface un peu austère, une simple feuille de style ajoutée à Stylish vous permettra de faire ressembler l'affichage des résultats à celui de Google.

Greasemonkey et Ubiquity

On franchit une étape de plus, car pour utiliser ces deux extensions il vous faudra écrire du code. Greasemonkey et Ubiquity permettent toutes deux d'exécuter des scripts dans une page. La première associe des scripts à des pages et des sites, et les exécute automatiquement au chargement. Par exemple, lorsque vous naviguez sur un site de vidéos, elle peut analyser la page, effectuer si nécessaire des requêtes supplémentaires, et ajouter des liens pour télécharger la vidéo. Des milliers de scripts, mis au point par d'autres utilisateurs, sont partagés sur userscripts.org.

De son côté, Ubiquity vous permet d'exécuter une commande sur n'importe quelle page. Sélectionnez par exemple un texte, appelez la commande translate et Ubiquity fera appel à un service de traduction et remplacera le texte par sa traduction.

L'une comme l'autre proposent une bibliothèque de fonctions facilitant certaines tâches, comme les appels AJAX. Bien que plus récent, celle d'Ubiquity est plus puissante (et s'appuie sur la bibliothèque jQuery qui facilite grandement l'écriture de scripts pour manipuler une page Web). L'extension est développée par les laboratoires Mozilla et sera intégrée directement à une prochaine version de Firefox.

De toutes les extensions précédentes, Greasemonkey et Ubiquity sont les plus puissantes, celles qui vous donnent un contrôle total sur ce que vous affichez, et vous permettent vraiment de le manipuler à votre guise. La contrepartie est qu'elles nécessitent de connaître JavaScript, la manipulation du DOM, AJAX... Bref, elles ne sont pas immédiatement utilisables, mais avec un peu de pratique et l'aide de Firebug, je pense que quiconque avec des rudiments de programmation devrait pouvoir commencer à en profiter.

Et la documentation

Avoir la documentation directement sous la main, c'est pratique. Je n'ai trouvé qu'une extension qui intègre des manuels de référence directement dans Firefox, c'est CodeBurner, liée au site sitepoint. Elle existe en deux versions, soit indépendante, soit intégrée à Firebug. Elle propose une référence des éléments et attributs HTML et des propriétés CSS, avec des exemples et renvois vers le site de sitepoint pour plus d'informations. J'avoue que celui-ci est plutôt bien fait, qui pour chaque propriété propose un espace d'expérimentation. J'utilisais jadis DevBoi mais elle ne semble plus très active.

Hommage

Elle ne fait plus aujourd'hui partie des extensions favorites des développeurs Web ou des bidouilleurs, mais je m'en voudrais de ne pas la citer. Depuis des temps immémoriaux, Mozilla, glorieux ancêtre de Firefox, Thunderbird, SeaMonkey et tant d'autres, incluait un inspecteur DOM, disponible aujourd'hui sous forme d'une extension. Firebug s'en inspire grandement. Associée au debuggeur Venkman, l'inspecteur m'a permis d'apprendre beaucoup. Les deux restent encore fort utiles pour le développement d'extensions, mais sont trop complexes pour les bidouilleurs du dimanche.

Au boulot !

Armés de ces quelques outils, vous devriez pouvoir commencer à vous amuser. J'avoue que les extensions les plus simples d'utilisation se contentent d'agir sur la mise en forme du contenu affiché, pour des manipulations plus complexes, comme l'agrégation de données de plusieurs origine, il faut recourir à du code, il n'existe pas encore d'interface simple. Les bibliothèques fournies avec Greasemonkey et Ubiquity (et demain JetPack) offrent de plus en plus de méthodes de "haut-niveau" qui simplifient les traitements, mais elles nécessitent d'être liées par du JavaScript.

Et toi, lecteur, comment tu initierais ton chat au bidouillage de Web ?

Notes

[1] nom anglo-saxon de l'ocryctérope du Cap, on ne dirait pas mais parfois on apprend des choses sur ce blog;

[2] attention, seule une version 0.1 de l'extension est pour l'instant disponible sur AMO. Vous pouvez télécharger une version plus récente sur le site du développeur, mais à vos risques et péril : le code de toute extension distribuée via AMO est en effet audité pour essayer de s'assurer qu'il ne contient rien de "dangereux" pour votre ordinateur ou vos données. Si vous récupérez une extension ailleurs, elle est susceptible de contenir des virus, espions ou autres. A utiliser en connaissance de cause donc;

[3] c'est un moteur de recherche qui interroge Google mais garantit un meilleur respect de votre vie privée;