Come creare un bookmark di ricerca testo con JavaScript

bookmarklets siamo Applicazioni JavaScript a cui si può accedere come segnalibri del browser. Sono usati per consentire agli utenti di eseguire diverse azioni sulle pagine web. Ad esempio, questo bookmarklet di FontShop è per l'anteprima dei font Web FontShop su qualsiasi pagina web.

In questo articolo, vedremo quanto è facile e veloce elaborare un bookmarklet creando uno che esegue una Wikiwand (Wikipedia di bell'aspetto) ricerca per un testo selezionato su qualsiasi pagina web.

Come funzionano i bookmarklets

L'URI di un bookmarklet usa il javascript: protocollo quello indica che è composto da codice JavaScript. Quando si fa clic su un bookmarklet, è possibile eseguire JavaScript su una pagina Web ed eseguire attività, come cambiare l'aspetto di una pagina, reindirizzare a un'altra pagina o mostrare nuove informazioni su di essa.

Poiché i segnalibri sono essenzialmente set di codice JavaScript, sono facili da creare con poca conoscenza di JavaScript, sia per uso personale sia per offrirlo agli utenti, come WordPress fa con il suo Press Questo bookmarklet.

Inizia con il codice JavaScript

Il Struttura dell'URL Wikiwand utilizza per un articolo in lingua inglese https://www.wikiwand.com/en/articleTitle. Abbiamo bisogno di scrivere uno script che salti alla pagina Wikiwand di quale URL termina con la stringa che l'utente ha appena selezionato - il testo selezionato dovrà essere messo al posto di titolo dell'articolo.

Innanzitutto, noi afferrare il testo l'utente ha selezionato nella pagina il seguente codice:

 getSelection (). toString () 

Abbiamo bisogno di lanciare l'oggetto restituito da getSelection () come una stringa usando il accordare() metodo, per farlo mostra il testo selezionato.

Quindi, dobbiamo fare una visita alla pagina dell'articolo di Wikiwand. Raggiungeremo questo utilizzando la seguente logica, dove newURL sarà il URL della pagina dell'articolo di Wikiwand (che conterrà la stringa selezionata alla fine):

 location.href = newURL 

Quando inseriamo questi due frammenti di codice, finiamo con il seguente script:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Ora dobbiamo solo aggiungere il javascript: protocollo al fronte, e abbiamo il codice finale useremo nel nostro bookmarklet:

 // aggiungi una riga senza interruzioni di riga javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

L'opzionale sostituire (/ \ n / g, '% 20') alla fine sostituisce qualsiasi carattere di nuova riga (\ n) nel testo con un singolo carattere di spazio (20%).

Il codice JavaScript è pronto. Si noti che il codice deve essere inserito in una singola riga senza interruzioni di riga, poiché più tardi sarà aggiunto a un campo di inserimento del testo.

Crea il segnalibro

Apri la finestra dei segnalibri del browser e aggiungi un nuovo segnalibro:

• Firefox: Premi Ctrl + Maiusc + B / cmd + Maiusc + B, fai clic con il pulsante destro del mouse su "Barra dei segnalibri" e seleziona "Nuovo segnalibro".
• Cromo: Premi ctrl + mai + O / cmd + alt + B, fai clic con il pulsante destro del mouse su "Barra dei segnalibri" e seleziona "Aggiungi pagina ... & quot"..

Nel campo URL Copia e incolla il codice JavaScript da prima. Una volta creato il segnalibro, è pronto per l'uso; vai a qualsiasi pagina web, seleziona una parola vuoi cercare in Wikiwand e fare clic sul bookmarklet - la pagina dell'articolo di Wikiwand si aprirà immediatamente.

Accesso veloce

Anziché accedere al menu dei segnalibri ogni volta che è necessario il bookmarklet, è possibile scegliere di visualizzalo direttamente nel tuo browser per un rapido accesso.

• Firefox: Fai clic su "Visualizza> Barre degli strumenti" nella barra dei menu in alto e seleziona "Barra dei segnalibri".
• Cromo: Premere ctrl + MAIUSC + B / cmd + MAIUSC + B.

Crea un link al bookmarklet

È possibile aggiungere il bookmarklet a un sito Web come collegamento ipertestuale pure, quali visitatori può segnalibro semplicemente trascinando il collegamento sulla barra degli strumenti del segnalibro o facendo clic con il pulsante destro del mouse sul collegamento e selezionando l'opzione per aggiungerlo ai segnalibri.

Per trasformare il tuo bookmarklet in un collegamento ipertestuale, crea un Tag HTML con lo script bookmarklet come il valore del suo href attributo:

   Wikiwand Cerca segnalibro  

Come conservare bookmarklets separatamente

Puoi anche usa un file JavaScript separato per memorizzare il codice bookmarklet, che probabilmente non è necessario se hai uno script breve, come quello che abbiamo appena visto in questo tutorial, ma può tornare utile quando il codice JavaScript è troppo lungo per copiarlo e incollarlo nella barra dei segnalibri del tuo browser.

Il file MyScript.js volontà inserisci il codice JavaScript principale per il bookmarklet, e devi aggiungere il seguente codice come l'URL del segnalibro (sia alla barra dei segnalibri del browser, sia come valore del file href attributo nel file HTML):

 // aggiungi una riga senza interruzioni di riga javascript: (() => con (documento) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Lo snippet di codice sopra è avvolto in una funzione di freccia auto-invocante, e utilizza le funzionalità di ECMAScript 6, come ad esempio permettere parola chiave, al fine di ridurre la lunghezza del codice. Aggiunge a > tag che punta al MyScript.js file al sezione del documento quando l'utente fa clic sul bookmarklet (nota che potrebbe essere necessario utilizzare un percorso assoluto per il MyScript.js file).