Créer un bookmarklet pour une application web


Bookmarklet
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".

Bookmarklet

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):


2 Commentaires pour "Créer un bookmarklet pour une application web"

Flux des commentaires de cet article Ajouter un commentaire
  •  

    Sympa comme idée pour le partage de petites notes sur un site. Je la retiens et la note ( mais moi c'est dans tomboy...). et je vois les fruits que mon post ont permis de faire murir ;)

    RépondreRépondre
    finss , le 8 avril 2008 à 22:35
  •  

    Ben....t'es drôlement malin et si je le dis, c'est que c'est vrai !

    RépondreRépondre
    alainlevanne , le 15 avril 2008 à 03:34
 

Ajouter un commentaire

actualité android apache apple astuce astuces bash bilboblog blog boot chrome clavier commande commandes conky date debian Desktop développement elementary exploit faille fedora firefox flash gimp gnome google graphique Graphisme hack hacking Hardware humour intel internet iphone jailbreak Jeux Kde kernel libre Linux log logiciels Logiciels Libres lucid lynx maemo mail maquette metasploit microsoft mobile mockup monitoring mozilla multi-touch musique mysql n900 nautilus nokia noyau openoffice open source password photos php Planet publicité redhat red hat rpm réseau screenshot script serveur serveurs shell sql ssh statistiques sysadmin system Sécurité thème tux-planet tv twitter ubuntu unity vidéo vidéos vlc voyage wallpaper windows wordpress yum