août
2011
Hier, on a codé un petit script pour entourer toutes les images d’une page.
Aujourd’hui on va s’amuser à le transformer en Bookmarklet, ou applisignet en québecois.
1. Qu’est-ce qu’un Bookmarklet
Un Bookmarklet est un Bookmark, ou favoris, qui contient un script JavaScript à exécuter.
Un Bookmarklet est simple à reconnaître, son URL commence toujours par javascript:.
Au chargement de l’URL, la navigateur exécute le JavaScript sans changer de page.
Par exemple, essayez de copier-coller la ligne suivante dans la barre d’adresse de votre navigateur :
Je peux également en faire un lien avec le code HTML suivant :
Si vous déplacer le lien suivant vers votre barre de favoris, celui deviendra une application-signet, ou Bookmarklet : Example simple de Bookmarklet.
2. Comment faire notre Bookmarklet
On aurait pu mettre tout le code de notre script directement dans le bookmarklet.
Mais les navigateurs ont une limite de caractères pour leur barre d’adresse.
Par exemple, pour Internet Explorer la limite 2083 caractères.
Il faut savoir, qu’on ne peut pas avoir de saut de ligne dans une barre d’adresse et que les caractères spéciaux doivent être encodés.
Au final, ne pas mettre son code directement dans le Bookmarklet permet d’augmenter la lisibilité et donc de diminuer les erreurs.
Si le Bookmarklet charge un fichier JavaScript distant, alors la mise à jour sera aisé.
Il suffira de modifier le fichier JavaScript pour mettre à jour tous les Bookmarklets.
3. Mettre le script en ligne
Pour cela on va mettre le script d’hier dans un fichier : borderimage.js.
Il faut ensuite le charger sur un site internet afin qu’il soit accessible à tous.
Pour notre Bookmarklet, l’URL sera : http://zilliox.me/resource/bookmarklet/borderimage.js
4. Coder notre Bookmarklet
Il suffit donc de créer un script qui chargera un fichier JavaScript distant.
Notre Bookmarklet doit donc ajouter à la balise body, une balise qui ressemblera à ça :
Notre Bookmarklet va donc exécuter le code JavaScript suivant :
e.setAttribute('language','javascript');
e.setAttribute('src','bookmarklet.js');
document.body.appendChild(e);
5. Mettre en forme
Il ne nous reste plus qu’à :
- Supprimer les sauts de lignes
- Modifier les espaces par %20
- Ajouter void(0); à la fin pour que le lien ne fasse rien
Ce qui nous donne un résultat beaucoup moins lisible :
Vous voulez tester ce Bookmarklet ? Faîtes glisser ce lien vers votre barre de favoris : Border Image.
PS : Pour annuler l’effet du Bookmarklet, il suffit de recharger la page
En espérant que ça vous ait plu,
Thomas.