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é 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:
- Modifier l'apparence d'une page. Les couleurs, les polices...
- Obtenir des informations sur la page. Par exemple le nombre de liens comme cela est montré dans la démo.
- Accéder à des sites externes en leur passant des paramètres.
Pour cela on ouvre une boite de dialogue (commande prompt) dont le résultat est assigné à une variable, laquelle est passée en paramètre à l'URL du site. - Placer sur son site des boutons de sites sociaux comme Digg, Delicious, afin que les visiteurs puissent voter pour l'article.
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='https://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)+"&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)