Bookmarklet : Ajouter des fonctions aux pages

Un bookmarklet ou favelet est un lien qui contient du code JavaScript assigné à l'attribut href. L'intérêt est d'incorporer des fonctions à une page Web sous forme de lien à cliquer, grâce à l'exécution d'un script.
Mais il est le plus souvent incorporé dans les bookmarks - d'où son nom - pour ajouter des fonctionnalités au navigateur.
Les exemples fournis dans la démonstration montreront ce que l'on peut faire avec les bookmarklets.

Les bookmarklets existent dans le navigateur Netscape depuis 1995 (qui est remplacé maintenant par Firefox).

Format d'un bookmarklet

Le mot-clé javascript introduit du code dans l'attribut d'une balise HTML, comme ci-dessous:

<a href='javascript:alert("hello");'> Ma fonction </a>

Le code est placé entre guillemets simples, ce qui permet d'intégrer des guillemets doubles dans les instructions. On peut faire l'inverse.
Tout ce qui suit javascript: à l'intérieur d'une chaîne de caractères est traité par le navigateur comme du code.

Le code peut être constitué de plusieurs instructions et être assez complexe pourvu qu'il soit formé d'une seule ligne. Il a accès à l'arborescence DOM de la page et donc à tous les éléments de celle-ci.

Exemples d'applications

On peut ainsi ajouter des fonctions pour:

Rappel sur la fonction prompt

Elle ouvre une boite de dialogue comportant un champ d'entrée de texte et retourne le texte tapé par l'utilisateur, ou false si rien n'est entré.

L'interface de la fonction comporte deux paramètres:
- Le libellé affiché dans la boite.
- Une valeur par défaut pour le champ d'entrée de texte.

var x = prompt("Taper quelque chose:", "valeur par défaut"); 

On peut utiliser la variable de la façon suivante:

location.href='http://www.xul.fr?uri='+escape(x)

location.href permet de charger une autre page.
On ajoute un paramètre avec le symbole ? (voir Paramètres JavaScript), la fonction escape permettant de convertir le texte en format valide pour une URL.

Démonstration de bookmarklets

Quelques exemples de ce que l'on peut faire avec les bookmarklets.


Lien bookmarklet
Ce bookmarklet très simple affiche un message.

javascript:alert("Vous venez de cliquer sur un bookmarklet.");

Nombre de liens dans cette page
Affiche le nombre de balises <a> dans la page courante.

javascript:alert("Nombre de liens dans cette page: " + document.links.length);

Choisir la couleur de la page.
Utiliser le format #xxxxxx

javascript:void(document.body.bgColor=
  prompt("Couleur de fond pour la page:", "#F3F3F3"));

Recherche Google
Accède au service de recherche de Google.

javascript:void(x=prompt("Search...","bookmarklet"));
if(x)location.href="http://google.com/search?query="+escape(x)+"&amp;num=10"

Valider la page
Donner une URL au service de validation du W3C. Par défaut la page courante.

javascript:void(x=prompt('URL à vérifier...',document.location));
if(x)location.href='http://validator.w3.org/check?uri='+escape(x)

Voir aussi

© 2008-2012 Xul.fr