Comment fabriquer un bookmarklet

05/11/2007

Voilà, étant en train de me faire un petit bookmarklet perso, j'ai eu envie de vous expliquer comment faire les vôtres ...

Qu'est ce qu'est un bookmarklet ?

Un bookmarklet (ou favelet) est simplement un lien qui exécute du javascript. Si vous êtes un webmaster en herbe, vous aurez déjà certainement écris des bookmarklets sans le savoir.

Un bookmarklet sur une page se structure de la manière suivante:

<a href="javascript:/*le code javascript à exécuter ...*/alert(\"Vous etes sur le site \"+window.location.hostname);">le bookmarklet</a>

Ce qui donne : le bookmarklet (celà va vous afficher le domaine de la page courante)

Voilà c'est aussi simple que ça, enfin pour que ça devienne un vrai bookmarklet, il faut mettre le lien en question dans vos favoris ! (clic droit, ajouter aux favoris)
Ensuite pour l'utiliser, il vous suffira de cliquer dessus, la portée du code javascript contenu dans le bookmarklet s'appliquera sur la page en cours de visionnage !

Mais pourquoi faire un bookmarklet ?

Les usages sont nombreux ! De la simple fonction pour mettre une page en favoris, jusqu'à un analyseur de CSS avancé du genre de XRAY. Le bookmarklet sur lequel je bosse en ce moment me permettra de récupérer des codes d'intégrations personnalisés de vidéos (genre youtube et compagnie).

D'autres bookmarklet sont assez populaire, par exemple ceux pour l'ajout d'un billet sur les réseau sociaux, celui pour cocomment et il y en à même un fourni avec chaque blog WordPress (Si si, cherchez bien).

Donc un bon bookmarklet pourra vous faire économiser pas mal de temps selon les situations. (voir une liste de 18 bookmarklets chez Eric)

Comment réussir un bookmarklet ?

Plusieurs choses que vous devez savoir avant de vous lancer dans la creation de bookmarklet ...

1/ Les bookmarklets sous internet explorer sont assez limités en nombres de caractères, attention donc ...
2/ Les bookmarklets doivent absolument tenir sur une seule ligne ! Et oui, les liens ne supporte pas les retours à la ligne ! Une solution simple est de développer son javascript normalement, et juste avant de le mettre en favoris, le passer dans le 'packer' de Dean Adwards. Celà permettra de le compresser et de le faire tenir sur une seule ligne !
3/ Il faut être très rigoureux ! Le moindre "point virgule" oublié, et c'est la cata ! (Alors qu'en développement normale, Firefox tolère certains oublis).
4/ Si vous proposez votre bookmarklet au public, prévoyez la compatibilité entre navigateur, ou alors précisez qu'il ne fonctionne que sous tel ou tel navigateur (ou proposer un bookmarklet par navigateur, mais c'est moins pratique).
5/ Si possible, englobez votre code dans une fonction (void), pour interférer le moins possible avec le javascript déjà présent dans la page ciblée.

Décortication d'un bookmarklet

Nous allons donc en crée un, étape par étape ! Je vais prendre un truc simple, en l'occurrence on va fabriquer un bookmarklet qui va surligner un terme recherché dans un page.

1/ On ouvre son bloc-note ou sont éditeur HTML (la plupart accepte le javascript)

2/ On écrit notre bout de javascript :

void ((function(){//on englobe le script dans une fonction void
var search = prompt("Saisissez votre texte :", "Mot a rechecher ..."); //on récupère le mot a rechercher via une fenêtre de saisie
var corps = document.body.innerHTML; //on récupère le contenu du body de la page
var modif = corps.split(search).join("<span style=\"background: yellow; font-weight: bold\">"+search+"</span>");//on eclate la chaine avec avec le terme rechercher en on recolle avec le terme entouré d'une balise span pour le style
document.body.innerHTML = modif; //on remet le contenu de la chaine dans le body
})())

Bon j'ai commenté pour ceux qui voudraient comprendre un peu la fonction. C'est très basique !

3/ On va réduire tout ça sur une seule ligne, soit vous le faites à la main (virez aussi les commentaires), soit grâce au packer (très pratique, et il vire les commentaires automatiquement)

void((function(){var search=prompt("Saisissez votre texte :","Mot a rechecher ...");var corps=document.body.innerHTML;var modif=corps.split(search).join("<span style=\"background: yellow; font-weight: bold\">"+search+"</span>");document.body.innerHTML=modif;})())

Donc voilà pourquoi il est très important de na pas oublier le point-virgule, car en une seule ligne on ne peut plus délimiter une instruction par un saut de ligne.

4/ C'est quasi fini, on rajoute javascript: devant notre ligne de javascript, et ensuite soit on en fait un lien que l'on met ensuite en favoris (en le faisant glisser dans vos favoris), soit on bookmark une page au hasard et on remplace ensuite sa cible par le javascript.
Ici je vais en faire un lien pour que vous puissiez en profiter ^^

Recherche

/!\ Important ! Si vous décidez d'en faire un lien, il faudra encoder en HTML votre javascript, il y a un outil qui fait ça très bien sur le site de Meyer ou alors sur l'encodeur html de Codes Sources (utilisez l'un ou l'autre selon vos besoins)

Conclusions

Voilà, même si ce n'est pas très compliqué, il y a tout un tas de règles à bien suivre pour ne pas se retrouver avec un truc inutilisable !
Evitez d'utiliser le bookmarklet de l'exemple qui est trop basic pour faire la tache voulue, en effet, si vous faite une recherche sur un mot se trouvant dans une balise (div, strong, ..), et bien ça sera le carnage garanti ! 😀

Deux autres billets sur les bookmarklets suivront dans les jours à venir 😉

-----

Articles relatifs

Pingback: Hot Links for 05/11/07 | Nowhere Else 2.0()
Sylvain

Il faut mettre une expression régulière car dans les cas ou tu entres des mots comme « href » ou autre contenus dans des balises… ça foire.
k-ny

Oui oui Sylvain. Je l’ai d’ailleurs précisé dans la conclusion ! Le but ici était juste de montrer comment faire un bookmarklet 😉