Les Bookmarklets ou comment modifier la page d'un site depuis la barre d'adresse

Introduction du cours

Vous avez déjà voulu voir le code source généré par JavaScript sans ouvrir un débugger ?
Pré-remplir des champs en un clic ?
Connaître la valeur des champs cachés sur une page ?
Ajouter quelque chose dans une page d'un site qui ne vous appartient pas pour le personnaliser sans devoir copier son code source et rendre tous ses liens absolus ?
Ou vous avez tout simplement soif de connaissances ?
Si oui, ce tutoriel est pour vous :)

Prérequis

La compréhension de ce tutoriel nécessite de connaître les bases du JavaScript et, si vous avez appris le JavaScript ailleurs que sur le SdZ, je vous conseille de lire le tutoriel sur les bonnes pratiques en JavaScript.

Il peut également être utile de connaître le DOM et le DHTML car ces parties du JavaScript sont souvent utilisées dans les bookmarklets et seront donc utiles pour les exemples.
De même pour les closures qui sont presque obligatoires pour certaines utilisations des bookmarklets (voir chapitre 3).

Introduction

Vous avez sans doute déjà vu du JavaScript dans le href de "liens" du genre :

<a href="javascript:fonction_javascript();">Lien</a>

Ce n'est pas bien ! Il ne faut pas le faire !
Voir le tutoriel sur les bonnes pratiques de nod_.

Eh bien on peut aussi en mettre directement dans la barre d'adresse et donc aussi stocker le code comme favoris/signets dans son navigateur.
On peut donc faire plein de trucs sympathiques, dont quelques exemples sont donnés dans la dernière partie de ce tutoriel, en cliquant simplement sur un favori/signet dans lequel on aura auparavant enregistré du code JavaScript !
C'est pour cela que ces morceaux de JavaScript précédés de javascript: sont appelés : bookmarklets, applisignets, marque-pages scriptés ou encore favelets.

Les emplois de ces bookmarklets sont très variés :

• Pour les développeurs :

  • Afficher le code généré par le JavaScript

  • Afficher le contenu d'une variable, tester quelque chose sans avoir à se créer une page avec des balises <script> etc.

  • Tester un code directement sur un site pour savoir s'il est envisageable de développer un userscript pour ce site

  • Connaître la valeur d'un champ caché

• Pour les utilisateurs lambda :

  • Éviter d'attendre sur les sites comme RapidShare et autres

  • Tricher dans les jeux faits en JavaScript

  • Remplir des champs si on doit souvent remplir le même formulaire

  • Connaître l'url d'une vidéo (par exemple sur Youtube) sans chercher dans le code source (si quelqu'un d'autre ou vous même avez pris la peine de regarder le code source pour dire au JavaScript comment y accéder avant)

• Autres...

Des exemples concrets sont donnés dans la dernière partie de ce tutoriel.

[TP] Rajouter des smileysL'objectif

L'objectif est de pouvoir utiliser les images présentes dans le pense-bête (montrées par la flèche rouge) comme les smileys du SdZ montrés par la flèche verte).

Le contenu des onclickÉnoncé

Nous allons dans un premier temps chercher ce que nous allons mettre dans le onclick des images.

De quoi avons-nous besoin ?

• Tout d'abord, il faut que vous ayez activé le pense-bete. Si ce n'est pas le cas, utilisez ce bookmarklet qui va ouvrir la page et cocher la case pour vous (il ne vous restera qu'à valider):

  javascript: window.open("infos-286.html").onload=function() { this.document.getElementById("postit_visible").checked="true"; }; void 0;

• Ensuite, il faut des images dans le pense-bete... Si vous n'en avez pas, utilisez ce bookmarklet :

  javascript: (function(){ function i(n){ return '<img src="http://princessedesanes.free.fr/gifs/kirby/kirbysstar/kirby'+n+'.gif" />'; }; document.getElementById('text_notepad').innerHTML=i('marche')+i('court')+i('nage')+i('epee'); })();

• Et enfin, il nous faut aussi l'id du textarea : text1

• Le code JavaScript que le SdZ utilise pour insérer les smileys dans le textarea : balise(':p','','text1');parse('text1','prev_text1'); return false;
  Le return false; sert normalement à annuler une action (comme un clic sur un lien) mais là, aucune action de ce genre n'a besoin d'être annulée... donc on va s'en passer...
  La fonction parse(), on n'a pas besoin d'y toucher.
  Ce que l'on va devoir changer, c'est les arguments de la fonction balise().

A vous de jouer !

Indices

balise(':p','','text1'); insère :p dans le textarea... c'est donc le premier argument qu'il nous faut changer.

Ce code sera dans le onclick de chaque image. Il faut donc qu'une variable ou qu'un attribut propre à l'image soit utilisé.

Comme ce code est dans le onclick, on peut utiliser this pour référer à l'image... et on peut donc facilement accéder à ses attributs.

On peut accéder au src de l'image avec this.src.

Il ne faut pas oublier les balises zcode <image> </image>.

Correctionbalise('<image>'+this.src+'</image>','','text1');parse('text1','prev_text1');

On inclut dans le textarea la balise <image> </image> et l'url de l'image au milieu.

Rajouter les onclick sur toutes les imagesÉnoncé

De quoi avons-nous besoin ?

• L'id du pense-bête : text_notepad
  On peut donc accéder au pense-bête par document.getElementById('text_notepad') et aux images par document.getElementById('text_notepad').getElementsByTagName('img').

• Une boucle qui rajoute le onclick à chaque image.

C'est à vous :) (N'essayez pas de mettre directement le code dans un bookmarklet. Faites comme un code normal avec sauts de lignes, indentation et tout ce qui va bien.)

Indices

Une boucle for() peut être un bon choix.

var images = document.getElementById('text_notepad').getElementsByTagName('img'); for(var i=0,l=images.length;i<l;i++) { //on fait quelque chose :) }

Pour mettre un onclick sur l'image on fait :

img.onclick = function() { //ce qui se passe quand on clic sur l'image };

Il existe d'autres façons de le faire mais c'est, de celles qui sont propres et comprises par tous les navigateurs, la plus simple.

Correctionvar images = document.getElementById('text_notepad').getElementsByTagName('img'); for(var i=0,l=images.length;i<l;i++) { images[i].onclick=function() { balise('<image>'+this.src+'</image>','','text');parse('text','prev_text'); }; }

Et voilà, on peut insérer des smileys facilement :)
Pour tester, vous pouvez, par exemple, aller poster un commentaire :-°

La transformation en bookmarklet

Maintenant, il ne reste qu'à faire tenir ça sur une seule ligne et à rajouter javascript:.
Et voilà le travail :

javascript:var images=document.getElementById('text_notepad').getElementsByTagName('img');for(var i=0,l=images.length;i<l;i++){images[i].onclick=function(){balise('<image>'+this.src+'</image>','','texte');parse('texte','prev_texte');}} Améliorations

Même si ce bookmarklet est magnifique et tout et tout (et en plus, il marche !), il est encore possible de l'«améliorer».

On peut se passer de certains ; (ceux qui se trouvent avant des } fermantes et raccourcir le nom des variables, ce qui est bien pratique pour les navigateurs qui limitent le nombre de caractères (je ne donnerai pas de nom :-° ).

javascript:var s=document.getElementById('text_notepad').getElementsByTagName('img');for(var i=0,l=s.length;i<l;i++){s[i].onclick=function(){balise('<image>'+this.src+'</image>','','texte');parse('texte','prev_texte')}}

Le problème avec notre code, c'est que l'on garde une variable globale...
On va donc utiliser une fonction anonyme que l'on va faire s'exécuter directement.
Ainsi, la variable (images ou s) sera locale et sera donc supprimée à la fin de l'exécution et on libérera un peu de mémoire :)
(De plus, mettre le code dans une closure comme cela permet de ne pas du tout agir sur les variables de la page et donc de ne pas perturber le fonctionnement des scripts)

javascript:(function(){var s=document.getElementById('text_notepad').getElementsByTagName('img');for(var i=0,l=s.length;i<l;i++){s[i].onclick=function(){balise('<image>'+this.src+'</image>','','texte');parse('texte','prev_texte');}}})()

Si vous ne comprenez pas ce dernier code, vous pouvez aller voir le tutoriel sur les closures de Darkodam.

P.S. : Je ne vous l'ai pas dit avant parce que sinon, vous n'auriez sans doute pas cherché à comprendre comment on compresse, mais il existe des sites qui le font pour vous comme par exemple http://closure-compiler.appspot.com/home :-°

Afin de garder les codes lisibles, je ne mettrai plus les codes sous forme de bookmarklets exception faite des codes d'une seule ligne.
À vous de rajouter le préfixe javascript:.
Pour ce qui est du fait de tout mettre sur une ligne, cela peut être faire en copiant un code sur plusieurs lignes et en le copiant directement dans la barre d'adresse (le navigateur se chargera de supprimer les retours à la ligne).
Attention toutefois aux commentaires // qui au lieu de mettre en commentaire seulement la ligne qui suit mettrait toute la suite du code en commentaire.

Intercepter les valeurs renvoyéesLe problème

Certains d'entre vous ont dû être très déçus en essayant de continuer tout seuls ; en essayant par exemple de changer la couleur de fond du <body> avec : javascript:document.body.style.backgroundColor="pink"; (ou toute autre assignation avec le signe =) et en se retrouvant avec pink (ou la valeur assignée) écrit sur leur page... qui est devenue complètement blanche... Ils ont paniqué, rafraîchi la page et vu que ça redevenait normal.

Que s'est-il passé ?

En gros, quand on fait document.body.style.backgroundColor="pink"; , le JavaScript renvoie "pink" car quand on affecte une valeur à une variable, la valeur renvoyée est la valeur affectée.
D'où :

var a,b,c; a=b=c=1; alert(a);//1 alert(b);//1 alert(c);//1

On peut vérifier en faisant :

javascript:alert(document.body.style.backgroundColor="pink");

Et là, ô miracle, le fond devient rose.
Et le alert() affiche bien pink.
Il faut donc utiliser une fonction pour qu'elle récupère ce qu'aurait dû renvoyer le JavaScript et que rien ne soit renvoyé.

Ne rien renvoyer au navigateur

Nous savons que quand on assigne une valeur, cette valeur est renvoyée.

javascript:document.body.style.backgroundColor="red"; //renvoie "red"

Ce qui aboutit à l'affichage de ce qui est renvoyé...

Nous savons aussi qu'en le mettant dans un alert() , le code est exécuté normalement.

javascript:alert(document.body.style.backgroundColor="yellow"); //le alert() capture la valeur renvoyée

Nous devons donc savoir ce que renvoie le alert() pour renvoyer la même chose.
Nous allons donc faire :

javascript:alert(alert(document.body.style.backgroundColor="blue"));

Et là, on voit que c'est undefined qui est renvoyée.

La solution simple : void

On Google-ise un peu et on voit un opérateur a été prévu pour faire ça : void() .
Il évalue l'expression qui lui est donnée (donc il faut lui donner un paramètre) et renvoie undefined .

Il peut s'utiliser de plusieurs façons :

javascript:document.body.style.backgroundColor='green';void(0) //ou javascript:document.body.style.backgroundColor='purple';void 0 //ou javascript:void(document.body.style.backgroundColor='orange')

Les exemples ont été mis dans mon ordre de préférence.
Je préfère personnellement les deux premiers, car ils sont clairs et permettent, en enlevant javascript: et void(0) /* ou */ void 0 , d'obtenir du code JavaScript pouvant être utilisé dans une page web.
Après, vous choisissez. Tous marchent (en théorie) sur tous les navigateurs.

La solution correcte mais pas compatible avec tous les navigateurs : return undefined