Cet article explique comment réaliser facilement un bookmarklet pour une application web. Un bookmarklet est simplement un petit programme qui exécute du javascript. On le retrouve généralement sous deux formes possibles ...

• en tant qu'URL dans un signet avec la plupart des navigateurs web
• en tant que lien dans une page web

Pour mieux comprendre, voici un exemple de bookmarklet assez simple :

<a href="javascript:alert('Bienvenue sur '+window.location.hostname);">le bookmarklet</a>

Vous pourrez voir le résultat en cliquant sur ce lien.

Création d'un bookmarklet pour Bilboblog

A première vue le système ne présente pas beaucoup d'intérêt. Et pourtant, avec l'utilisation de javascript, les possibilités sont assez impressionnantes.

Pour ma part, je me suis intéressé à la création d'un bookmarklet pour BilboBlog (version 0.2.0 minimum), le logiciel de micro-blogging libre.

L'idée de base est de créer un lien, qui lorsque l'on clique dessus, ouvre une popup permettant de saisir un nouveau billet. J'ai donc commencé avec le code suivant :

<a href="javascript:setTimeout('p.focus();',500);p=window.open('http://tux-planet.fr/mini-blog/admin/', 'BilboBlog','height=510,width=550,location=no,menubar=no,status=no,toolbar=no');void 0">BilboBlog!</a>

Ce dernier permet d'ouvrir une popup au dessus de la page que l'on visionne. La popup possède alors le titre "BilboBlog" et est dépourvue de barres de menu et de défilement grâce aux différentes options "menubar=no,status=no,toolbar=no".

En glissant le lien dans la barre personnelle de Firefox, l'utilisateur y trouve déjà un avantage. En effet, lorsqu'il visitera une page, il pourra cliquer sur le bouton pour ouvrir une popup et commencer à écrire un article sur le sujet qu'il vient de lire.

En y réfléchissant davantage, je me suis dit que l'on pouvait aller plus loin. En effet, il est encore plus intéressant de créer un bookmarklet, capable de remplir le champ de rédaction d'un billet, avec le contenu sélectionné au préalable sur la page Internet que l'on visite.

Pour ce faire, il suffit simplement d'utiliser l'événement javascript "document.getSelection()", capable de récupérer du texte sélectionné.

J'ai ensuite modifié le code de l'interface d'administration de BilboBlog pour y remplir la zone de saisie automatiquement :

<textarea><?php if(!empty($_GET['content'])) echo trim($_GET['content']); ?></textarea>

Et enfin, j'ai adapté le bookmarklet :

<a href="javascript:setTimeout('p.focus();',500);p=window.open('http://tux-planet.fr/mini-blog/admin/?content='+document.getSelection(),'BilboBlog','height=510,width=550,location=no,
menubar=no,status=no,toolbar=no');void 0">BilboBlog!</a>

Voici un petit screencast qui montre le résultat final (également disponible en meilleure qualité et au format avi : bookmarklet.avi):