Hack de DOM avec GreaseMonkey
Aujourd'hui, j'avais besoin d'éditer des pages dans un
Wordpress. L'interface d'administration de la chose est plutôt agréable, mais un point me chagrinait : le formulaire servant à rédiger le contenu de la page est ridiculement petit (on doit voir 7-10 lignes maximum). Vraiment pas pratique pour rédiger une page un peu longue, on souhaite en général avoir un peu plus de contexte autour de ce que l'on est en train d'écrire.
Je fouille les options de Wordpress, je ne trouve rien. Je cherche un peu sur le Web, je ne trouve rien non plus de vraiment probant, ou alors il faut aller hacker le code de Wordpress à la main, ce qui n'était pas possible dans mon cas.
Du coup, je dégaine
Firebug, je lui dis d'inspecter l'élément
textarea qui sert de zone d'édition, et j'ajoute
height: 300px dans les propriétés CSS de la chose. Et ça marche. Génial! Sauf qu'évidemment, dès que je recharge la page, cette bidouille disparaît, et il faut recommencer à zéro.
Je me souviens avoir lu plusieurs journaux sur
LinuxFr.org (comme quoi mouler sur LinuxFr.org peut
parfois s'avérer utile) qui parlaient d'un plug-in pour Firefox permettant d'écrire des scripts pour modifier à la volée des pages HTML. Après quelques recherches, je retrouve enfin le nom de ce fameux plugin:
GreaseMonkey.
La documentation n'est pas particulièrement claire, en particulier pour débuter. Mais je suis tombé sur un
exemple Hello World simple qui a permis de démarrer. En gros, c'est tout simple :
// ==UserScript==
// @name Hello World
// @namespace http://diveintogreasemonkey.org/download/
// @description alert "Hello world!" on mypage.com
// @include http://www.mypage.com
// ==/UserScript==
alert('Hello world!');
On sauvegarde ça dans un fichier dont le nom se termine par
.user.js, et on l'ouvre avec Firefox, et paf, le plug-in
GreaseMonkey nous propose de l'installer. Une fois ceci fait, dès qu'on va charger la page
mypage.com, l'infâme boîte de dialogue Javascript s'affiche. Merveilleux. Il ne reste plus qu'à adapter l'exemple à notre problème, et ce sera très simple, puisqu'il suffira de remplacer la ligne de Javascript par :
document.getElementById('content').rows = 50;
Et hop, ça marche. Dès qu'on charge un site listé dans
@include contenant un élément d'id "content" (ce qui est le cas de Wordpress), notre script va positionner le champ "rows" à 50.
Un petit détail: une fois le fichier
.user.js installé, modifier ce fichier là ne sert à rien, car Firefox en garde une copie quelque part dans son
~/.mozila/firefox/. Il faut donc soit le réinstaller à chaque fois, soit aller dans les préférences de GreaseMonkey et utiliser le bouton
Edit pour éditer un script déjà installé.
