Generatore di bookmarklet: trasforma JavaScript in un bookmarklet

Come usare questo generatore di bookmarklet

1. Dai un nome al segnalibro e incolla il tuo JavaScript nella casella del codice, oppure premi Carica l’esempio del titolo della pagina per vedere un esempio già pronto. Il javascript: iniziale è facoltativo: il generatore lo toglie e aggiunge il suo.
2. Premi Crea bookmarklet. L’URL generato compare qui sotto, con la sua lunghezza in caratteri.
3. Trascina il pulsante scuro nella barra dei segnalibri. Se la barra è nascosta, attivala prima dal menu Vista o dalle impostazioni del browser.
4. Apri una pagina qualsiasi e clicca il segnalibro. Lo script gira una volta, su quella pagina.

Cliccare il pulsante in questa pagina non fa nulla, ed è voluto: un bookmarklet serve a girare sulla pagina che stai leggendo, non sul generatore.

Che cos’è davvero un bookmarklet

Un bookmarklet è un normale segnalibro del browser il cui indirizzo inizia con javascript:invece che con https:. Apri una pagina, clicchi il segnalibro e il browser esegue il tuo script su quella pagina invece di navigare altrove. I bookmarklet sono utili per azioni legate alla singola pagina: copiare una citazione formattata, attivare una vista di lettura, estrarre il testo selezionato o aprire l’URL corrente in un altro servizio. Non richiedono di installare un’estensione, non chiedono permessi e stanno nella barra dei segnalibri come qualsiasi altro link.

Come convertire JavaScript in un bookmarklet

Convertire uno script a mano richiede tre passaggi, e il generatore li esegue tutti per te. Ecco uno script di due righe e il bookmarklet che ne risulta:

const n = document.links.length;
alert(n + ' link in questa pagina');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20link%20in%20questa%20pagina')%3B%0A%7D)()

1. Racchiudi il codice in una funzione

Lo strumento mette il tuo codice dentro una arrow function a invocazione immediata,(() => { … })(). Così le tue variabili non vanno in conflitto con quelle che la pagina definisce già, e conta anche per un secondo motivo: quando il codice di un URL javascript:termina con un valore di tipo stringa, il browser sostituisce la pagina con un nuovo documento che mostra quella stringa. Una funzione con il corpo tra parentesi graffe non restituisce nulla, quindi la pagina resta com’è. Scrivendo a mano, l’alternativa classica è iniziare il codice con void.

2. Codificalo con la percent-encoding

I browser eliminano da qualsiasi URL i caratteri di tabulazione e di a capo prima di usarlo, quindi uno script su più righe incollato direttamente in un segnalibro viene schiacciato su una riga sola. Un singolo commento // inghiotte allora tutto ciò che segue, e le istruzioni che contavano sugli a capo si fondono. La codifica trasforma ogni a capo in %0A, che sopravvive; il browser decodifica di nuovo il codice un attimo prima di eseguirlo. La codifica protegge anche spazi, virgolette doppie, % e #.

3. Aggiungi il prefisso javascript:

Lo schema javascript: è ciò che dice al browser di eseguire il resto dell’indirizzo come script. La stringa finita è quella che trascini nella barra o incolli in un segnalibro.

Come installare un bookmarklet

Su desktop

Trascina il pulsante scuro nella barra dei segnalibri di Chrome, Edge, Firefox, Safari o di qualsiasi altro browser desktop. Se trascinare non è comodo, premi Copia l’URL del segnalibro, crea un nuovo segnalibro e incolla l’URL nel campo dell’indirizzo.

Su iPhone, iPad e Android

I browser mobili non hanno una barra dei segnalibri in cui trascinare, quindi usa il metodo della modifica:

1. Premi Copia l’URL del segnalibro.
2. Salva tra i segnalibri una pagina qualsiasi: va bene anche questa.
3. Apri i segnalibri, modifica quello nuovo e sostituisci il suo indirizzo con l’URL javascript: copiato. Già che ci sei, rinominalo.
4. Vai sulla pagina in cui vuoi eseguirlo. In Safari su iPhone o iPad, apri il segnalibro dall’elenco. In Chrome su Android, scrivi il nome del bookmarklet nella barra degli indirizzi e tocca il suggerimento del segnalibro; aprirlo dalla schermata dei segnalibri ti porta fuori dalla pagina, e non ha più nulla su cui girare.

Non incollarlo nella barra degli indirizzi

Sembra una scorciatoia, ma Chrome toglie di proposito il javascript: iniziale dal testo incollato nella barra degli indirizzi: è una difesa contro le truffe che convincono le persone a incollare codice malevolo. Ciò che resta viene trattato come una ricerca. Salvare il codice come segnalibro è la strada affidabile.

Esempi di bookmarklet da incollare

Ognuno usa solo API standard del browser. Incolla un esempio nella casella del codice qui sopra, premiCrea bookmarklet e installalo.

Copiare la pagina come link Markdown

Apre una finestra con il link già selezionato, pronto da copiare.

prompt('Link Markdown:', '[' + document.title + '](' + location.href + ')');

Contare le parole selezionate

Seleziona prima il testo, poi clicca il bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert(words + ' parole selezionate');

Rendere la pagina modificabile

Cliccalo di nuovo per disattivare la modifica. Ricaricando torna l’originale.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Aprire la pagina nella Wayback Machine

Mostra le copie archiviate della pagina in cui ti trovi.

location.href = 'https://web.archive.org/web/*/' + location.href;

Usi comuni dei bookmarklet

Perché un bookmarklet non funziona

La policy di sicurezza del sito lo blocca

Se un bookmarklet funziona sulla maggior parte dei siti ma su uno non fa nulla, guarda la Content-Security-Policy di quel sito. La specifica CSP dice che la policy di una pagina non dovrebbe interferire con i bookmarklet, ma i browser possono comunque bloccare gli URL javascript:nelle pagine con regole script-src rigide. Un bookmarklet che inietta uno script da un altro dominio è colpito due volte: anche se gira, è la policy della pagina a decidere se quello script esterno può caricarsi. Nel bookmarklet non c’è nulla che possa scavalcarla. Se ti serve lo script su un sito del genere, la via d’uscita è un’estensione del browser o uno userscript.

La pagina è diventata bianca con del testo

Il tuo codice terminava con un valore di tipo stringa, quindi il browser lo ha mostrato come nuova pagina. Togli qualsiasi return che restituisca del testo. Se hai scritto il bookmarklet a mano, rigenerarlo qui lo racchiude in una funzione, e un’espressione stringa finale non sostituisce più la pagina.

Non succede niente e non c’è nessun errore

Apri la console per sviluppatori del browser e clicca di nuovo il bookmarklet. Errori di sintassi, elementi mancanti e script bloccati vengono segnalati lì. Una causa frequente nei bookmarklet fatti a mano è un commento // finito sulla stessa riga del resto del codice: rigenerarlo dal sorgente originale risolve.

Come modificare un bookmarklet esistente

Copia l’indirizzo del segnalibro, togli il javascript: iniziale e decodifica il resto con ilcodificatore e decodificatore di URL (in inglese) per riavere il codice leggibile. Fai la tua modifica, incolla il codice in questo generatore di bookmarklet e sostituisci l’indirizzo del vecchio segnalibro con il nuovo URL. Tenere il sorgente originale in un file di testo ti risparmia questo giro.

La sicurezza conta

Un bookmarklet gira con lo stesso accesso degli script della pagina: può leggere e modificare tutto ciò che la pagina espone. Controlla il codice prima di installarlo, evita i frammenti che caricano script remoti (un URL controllato da altri può cambiare dopo l’installazione) e non eseguire mai un bookmarklet sconosciuto su una pagina con informazioni sensibili. Se un sito, un messaggio o un video ti chiede di incollare del codice in un segnalibro o nella barra degli indirizzi, consideralo una truffa.

Bookmarklet, userscript o estensione

I tre sembrano simili ma rispondono a bisogni diversi. Un bookmarklet è uno script che gira una volta, su una pagina, quando lo clicchi: nessuna installazione, e viaggia insieme ai tuoi segnalibri. Uno userscript (gestito da un gestore di userscript) si aggancia ai siti corrispondenti e può partire da solo a ogni visita, conservando le proprie impostazioni tra le pagine. Un’estensione del browser può fare entrambe le cose e di più (lavoro in background, intercettazione della rete, icone nella barra degli strumenti), al prezzo di un passaggio di installazione e di ampi permessi che il browser ti mostra in anticipo. Le estensioni sono trattate in modo diverso anche dalle policy di sicurezza delle pagine: la specifica CSP osserva che Chrome si impegna a far funzionare le iniezioni delle estensioni a prescindere dalla policy di una pagina. Parti dal bookmarklet; passa ad altro solo quando ne raggiungi i limiti.

Limiti: quando non usare un bookmarklet

Un bookmarklet gira solo quando lo clicchi, su una pagina alla volta. Non può conservare lo stato tra una visita e l’altra, agire in background o modificare tutte le pagine in automatico. La lunghezza è di rado il problema (Chrome documenta un URL massimo di 2 MB), ma uno script lungo diventa un URL di segnalibro illeggibile e, a quel punto, un gestore di userscript o un’estensione è più facile da mantenere. Anche le modifiche fatte da un bookmarklet spariscono al ricaricamento: se vuoi evidenziazioni che ritrovi la volta dopo, leggi come evidenziare il testo su qualsiasi sito e conservarlo. E se il lavoro è «salva questa pagina con un clic» e non «esegui un frammento», un’estensione del browser pensata per questo lo fa senza che tu debba mantenere codice.

Privacy: dove va il tuo codice

Da nessuna parte. Il nome, il frammento e l’URL generato non lasciano mai la pagina: costruire un bookmarklet non comporta nessuna richiesta di rete. Un’avvertenza onesta: il bookmarklet finito viene salvato come un normale segnalibro, quindi se sincronizzi i segnalibri tra i dispositivi lo script viaggia con gli altri segnalibri ed è visibile a tutto ciò che può leggere quel profilo sincronizzato.

Strumenti e guide correlati

Il bookmarklet per il link Markdown qui sopra copia un link alla volta; per trasformare in Markdown l’HTML di un’intera pagina usa il convertitore da HTML a Markdown (in inglese). Se i link che copi sono pieni di parametri di tracciamento, il pulitore di URLli toglie. Per salvare e lavorare sulle pagine senza scrivere script, guarda l’evidenziatore web di Marqly, il gestore di segnalibri per Chrome e il metodo del secondo cervello, oppure leggi la guida su come organizzare i preferiti.