Vous avez un super outil JS que vous voulez partager avec le monde entier ? Faites un bookmarklet ! Il s’agit de compresser tout votre code sur une ligne de telle sorte qu’il puisse être mis en bookmark dans le browser et utilisé en un clic.

Problème : débugger un pâté de JS d’une ligne, c’est relou. Et pour les gros outils, il n’y a pas la place de toute coder. L’idée est donc de packer juste l’import de votre outil.

D’abord, mettre le script de votre outil quelque part (par exemple votre serveur Web). Pour l’article, je vais mettre le script sur yourjavascript.com.

Il affiche une des tag lines du blog avec clippy (on m’avait demandé une fois comment on faisait, ben voilà). Il ne marche que sur le blog et tout en haut à gauche d’une page non scrollée, mais OSEF, c’est un exemple.

Ensuite, on fait le code d’include, qui va juste créer une balise SCRIPT et ajoute votre outil une fois que la page est chargée :

// on frabrique le tag SCRIPT
var url = "http://yourjavascript.com/11356413275/test.js";
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
// on met la date dans l'url pour éviter le cache
script.src = url + '?' + (new Date().getTime());
// on ajoute le tag ce qui va charger votre outil
head.appendChild(script);

Puis il faut le mettre au format bookmarklet, c’est à dire :

• Faire tenir le code sur une ligne.
• L’enfermer dans une fonction appelée immédiatement.
• Transformer tout ça en URL (urlencoder + ajouter le protocole “javascript:”)

Faites le une fois pour vous entraîner à comprendre ce qui se passe (avec un code plus simple, genre un alert()) :

javascript:(function(){alert("test")})()

Ensuite faites le avec votre vrai code, encore à la main. Une fois. Vous noterez qu’il faut un code super propre (pas de “;” manquant) pour que ça marche.

Quand vous en aurez marre de galérer, vous ferez comme moi, vous utiliserez un outil en ligne pour le faire automatiquement.

Le code résultant est celui-ci:

javascript:(function(){var%20url=%22http://yourjavascript.com/11356413275/test.js%22;var%20head=document.getElementsByTagName('head')[0];var%20script=document.createElement('script');script.type='text/javascript';script.src=url+'%3F'+(new%20Date().getTime());head.appendChild(script);})();

On peut le mettre directement à la place de l’URL HTTP dans un bookmark. Si on clique sur le bookmark, il va lancer ce code, qui va ajouter la balise SCRIPT avec mon autre code, qui va se lancer et faire apparaitre clippy pour notre plus grand plaisir.

Comme je suis une feignasse, clippy apparait en haut de la page, donc il vous faudra scroller tout en haut pour voir le résultat. J’avais pas envie de me taper les calculs pour faire une posionnement relatif au viewport.

Personnellement je m’en sers pour faire des petits outils comme lire des sites plein d’images en mettant toutes les images à la suite des autres en auto loading, pour charger des outils d’admin sur la page principale d’un site (genre le casting des videos pornos) ou juste debugger.