Bookmarklet

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:

• 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='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.

Des exemples sont donnés sur la page de démonstration.

Démonstration

• Voir la démo de quelques bookmarklets.
  

Voir aussi

• Bookmarklets de recherche.

(c) 2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.