Hoe maak je een Text-Search Bookmarklet met JavaScript

bookmarklets zijn JavaScript-toepassingen die kan worden benaderd als browser bladwijzers. Ze worden gebruikt om gebruikers in staat te stellen voer verschillende acties uit op webpagina's. Deze bookmarklet van FontShop is bijvoorbeeld voor het bekijken van FontShop-weblettertypen op elke webpagina.

In dit artikel zullen we zien hoe snel en gemakkelijk het is maak een bookmarklet door er een te creëren voert een Wikiwand uit (beter uitziende Wikipedia) zoeken voor een geselecteerde tekst op een webpagina.

Hoe bookmarklets werken

De URI van een bookmarklet gebruikt de javascript: protocol dat geeft aan dat het is samengesteld uit JavaScript-code. Wanneer u op een bookmarklet klikt, kunt u voer JavaScript uit op een webpagina en voer taken uit, zoals het uiterlijk van een pagina wijzigen, doorverwijzen naar een andere pagina of nieuwe informatie weergeven.

Omdat bladwijzers in wezen zijn sets van JavaScript-code, ze zijn eenvoudig te maken met weinig JavaScript-kennis, voor persoonlijk gebruik of voor het aanbieden ervan aan uw gebruikers, zoals WordPress doet met zijn Press This bookmarklet.

Aan de slag met de JavaScript-code

De URL-structuur Wikiwand-gebruik voor een Engelstalig artikel is https://www.wikiwand.com/en/articleTitle. We moeten een script schrijven dat naar de Wikiwand-pagina springt van welke URL eindigt met de reeks die de gebruiker zojuist heeft geselecteerd - de geselecteerde tekst zal moeten worden geplaatst in de plaats van artikel titel.

Eerst, wij pak de tekst de gebruiker heeft op de pagina met de volgende code geselecteerd:

 getSelection (). toString () 

We moeten gegoten het object dat is geretourneerd door getSelection () als een string door de toString () methode, om het te maken voer de geselecteerde tekst uit.

Vervolgens moeten we een bezoek brengen naar de Wikiwand-artikelpagina. We zullen dit bereiken door de volgende logica te gebruiken, waar NEWURL zal het zijn URL van de Wikiwand-artikelpagina (die aan het einde de geselecteerde string bevat):

 location.href = newURL 

Wanneer we deze twee codefragmenten samenvoegen, krijgen we het volgende script:

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

Nu hoeven we alleen maar het javascript: protocol aan de voorkant, en we hebben de definitieve code we gebruiken in onze bookmarklet:

 // voeg een regel toe zonder regeleinden javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20' ) 

De optionele vervang (/ \ n / g, '20%') aan het einde vervangt elk nieuw lijnteken (\ n) in de tekst met een enkel spatie karakter (% 20).

De JavaScript-code is gereed. Merk op dat de code moet worden geplaatst in een enkele regel zonder regeleinden, sinds later zal het zijn toegevoegd aan een tekstinvoerveld.

Maak de bladwijzer

Open het bladwijzervenster van uw browser, en voeg een nieuwe bladwijzer toe:

• Firefox: Druk op ctrl + shift + B / cmd + shift + B, klik met de rechtermuisknop op "Bookmarks Toolbar" en selecteer "Nieuwe bladwijzer".
• Chrome: Druk op ctrl + shift + O / cmd + alt + B, klik met de rechtermuisknop op "Bladwijzerbalk" en selecteer "Pagina toevoegen ...".

In het veld URL kopieer de JavaScript-code van tevoren. Nadat de bladwijzer is gemaakt, is deze klaar om te gebruiken; ga naar een webpagina, selecteer een woord je wilt zoeken in Wikiwand, en klik op de bookmarklet - de Wikiwand-artikelpagina wordt in één keer geopend.

Snelle toegang

In plaats van te zoeken naar het bladwijzermenu telkens wanneer u de bookmarklet nodig heeft, kunt u ervoor kiezen direct weergeven in uw browser voor snelle toegang.

• Firefox: Klik op "Beeld> Werkbalken" in de bovenste menubalk en selecteer "Bladwijzerwerkbalk".
• Chrome: Druk op Ctrl + Shift + B / Cmd + Shift + B.

Maak een bookmarklet-link

U kunt uw bookmarklet toevoegen aan een website als een hyperlink ook, welke bezoekers kan een bladwijzer maken door simpelweg de koppeling naar de bladwijzerwerkbalk te slepen en neer te zetten of door met de rechtermuisknop op de koppeling te klikken en de optie te selecteren om een ​​bladwijzer toe te voegen.

Als u van uw bookmarklet een hyperlink wilt maken, maakt u een HTML-tag met het bookmarklet-script als de waarde van zijn href attribuut:

   Wikiwand Zoeken Bookmarklet  

Bladwijzers apart opslaan

Je kan ook gebruik een apart JavaScript-bestand om de bookmarklet-code op te slaan, wat waarschijnlijk niet nodig is als je een kort script hebt - zoals het script dat we zojuist in deze tutorial hebben gezien - maar handig kan zijn wanneer de JavaScript-code te lang is om te kopiëren - plak hem in de bladwijzerbalk van uw browser.

Het bestand myscript.js zullen huis de hoofd JavaScript-code voor de bookmarklet en u moet de volgende code toevoegen als de bladwijzer-URL (naar de bladwijzerbalk van de browser of naar de waarde van de href attribuut in het HTML-bestand):

 // voeg één regel toe zonder regelovergangen javascript: (() => met (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Het codefragment hierboven is gewikkeld in een zelfoprollende pijlfunctie, en gebruikt functies van ECMAScript 6, zoals de laat sleutelwoord, om de codelengte te verminderen. Het voegt een toe > label naar de myscript.js bestand naar de deel van het document wanneer de gebruiker op de bookmarklet klikt (Merk op dat u mogelijk een absoluut pad moet gebruiken voor de myscript.js het dossier).