Bookmarklet

Un bookmarklet è un piccolo programma JavaScript che può essere memorizzato come un normale URL all'interno dei segnalibri (bookmark in inglese) nei browser web più popolari, o all'interno dei collegamenti ipertestuali di una pagina web. I bookmarklet sono anche detti favlets o favelets per via del fatto che Internet Explorer utilizza il termine "Favorites" ("preferiti" in italiano) per indicare appunto i segnalibri.

Lo scopo dei bookmarklet è di poter dare agli utilizzatori un metodo pratico ed immediato per eseguire una determinata operazione (ad esempio utilizzare un servizio web, o svolgere una specifica operazione sulla pagina che si sta visitando); l'operazione effettuata normalmente è legata al sito che rilascia il bookmarklet, ed è una semplice scorciatoia per utilizzare i servizi web offerti dal sito che ha sviluppato il bookmarklet.

Concetti

Il browser usa gli URI per i segnalibri e l'attributo href di un tag <A>. La prima parte dell'URI (http:, file: o ftp:) specifica il tipo di servizio e la forma per il resto della stringa. Tuttavia i browser implementano un prefisso javascript: che per il parser è semplicemente come un qualsiasi altro URI. Internamente il browser identifica il protocollo JavaScript e, invece di utilizzare il resto della stringa per prendere la pagina da caricare, esegue la stringa come un programma e usa la stringa risultante come nuova pagina da aprire.

Lo script eseguito ha accesso alla pagina e può leggerla e modificarla. Se l'operazione ritorna un tipo indefinito piuttosto che una stringa, non viene caricata nessuna nuova pagina e il solo effetto è quello di eseguire il codice sulla pagina.

Esempi

Quando viene utilizzata come destinazione di un segnalibro, la stringa seguente (i ritorni a capo sono stati aggiunti per facilitarne la lettura) esegue una ricerca su it.wikipedia.org del testo selezionata nel browser o, qualora non ci sia selezionato nulla, mostrerà una maschera dove inserire un testo da ricercare. Questo bookmarklet funziona in Firefox e Konqueror:

javascript:(function(){
 q=document.getSelection();
 if(!q) q=prompt('Wikipedia:');
 if(q) location.href='http://it.wikipedia.org/w/wiki.phtml?search=' + escape(q);
 })()

Questa versione funziona sul browser Safari:

javascript:void(
 q=prompt('Wikipedia:',getSelection()));
 if(q) void(location.href='http://it.wikipedia.org/w/wiki.phtml?search=' + escape(q))

Questa versione funziona su Windows Internet Explorer:

javascript:(function(){
 q= document.selection.createRange().text;
 if(!q) q=prompt('Wikipedia:','');
 if(q) location.href='http://it.wikipedia.org/w/wiki.phtml?search=' + escape(q);})()

Il prossimo esempio illustra una modifica radicale al layout di questa pagina e funziona aggiungendo un foglio di stile integrato che imposta il margine destro al 45%:

javascript:(function(){
 var newSS, styles='body { margin-left:0%; margin-right:45%;}';
 if(document.createStyleSheet) {
   document.createStyleSheet(%22javascript:'%22+styles+%22'%22); 
   } else {
   newSS=document.createElement('link'); 
   newSS.rel='stylesheet';  
   newSS.href='data:text/css,' + escape(styles);
   document.getElementsByTagName(%22head%22)[0].appendChild(newSS); 
   } 
 }
)()

L'esempio successivo prende tutte le immagini della pagina corrente e le sposta intorno alla pagina:

javascript:
 R=0; 
 x1=.1;  y1=.05;  x2=.25;  y2=.24;  x3=1.6; 
 y3=.24; x4=300; y4=200; x5=300; y5=200;
 DI=document.images; 
 DIL=DI.length; 
 function A(){
   for(i=0; i-DIL; i++){
      DIS=DI[ i ].style;
      DIS.position='absolute'; 
      DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5;
      DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5
      }
   R++
   }
 setInterval('A()',5);
 void(0);

Storia

Il termine bookmarklet è stato coniato da Steve Kangas di www.bookmarklets.com che ha iniziato a crearli partendo da un'idea suggerita nella Guida al JavaScript della Netscape Communications Corporation. Il termine favelet è stato usato da Tantek Çelik in una e-mail personale del 6 settembre 2001. Brendan Eich, uno degli sviluppatori di JavaScript in Netscape, ha dato questa definizione della sua invenzione degli URL javascript::

«Furono una caratteristica voluta in questo senso: ho inventato l'URL javascript: insieme al JavaScript, nel 1995, e progettato che gli URL javascript: potessero essere usati come ogni altro tipo di URL, incluso essere memorizzati come segnalibri.

In particolare ho reso possibile generare un nuovo documento caricando, per esempio, javascript:'hello, world' ma anche (la chiave per i bookmarklet) per eseguire script arbitrari nel DOM del documento corrente, per esempio javascript:alert(document.links[0].href). La differenza è che quest'ultimo tipo di URL usa un'espressione che viene valutata in un tipo indefinito in JS. Ho aggiunto l'operatore void in JS prima che Netscape 2 venisse pubblicato per rendere più facile scartare ogni valore non definito in un URL javascript:»

(Brendan Eich)