Kako stvoriti Bookmarklet za pretraživanje teksta s JavaScriptom

Opcije označavanja su JavaScript aplikacije kojima se može pristupiti kao oznake preglednika. Koriste se za omogućavanje korisnika obavljati različite radnje na web stranicama. Na primjer, ova knjižna oznaka od strane FontShopa služi za pregled Font Fontova na bilo kojoj web stranici.

U ovom članku vidjet ćemo kako je to brzo i lako izmisliti knjižnu oznaku tako što ćete stvoriti jedan izvodi Wikiwand (bolje izgleda Wikipedia) traži za odabrani tekst na bilo kojoj web stranici.

Kako funkcioniraju bookmarkleti

URI knjižne oznake koristi javascript: protokol što ukazuje da je sastavljen od JavaScript koda. Kada kliknete na knjižnu oznaku, možete pokrenite JavaScript na web-stranici i izvršavajte zadatke, kao što je promjena izgleda stranice, preusmjeravanje na drugu stranicu ili prikazivanje novih informacija na njoj.

Budući da su oznake u biti setovi JavaScript koda, lako ih je stvoriti s malim JavaScript znanjem, bilo za osobnu upotrebu ili za ponudu korisnicima, kao što je WordPress sa svojom uslugom Press This bookmarklet.

Počnite koristiti JavaScript kôd

Struktura URL-a Wikiwand koristi za članak na engleskom jeziku https://www.wikiwand.com/en/articleTitle. Moramo napisati skriptu koja preskače na stranicu Wikiwand od kojeg URL-a završava s nizom koji je korisnik upravo odabrao - odabrani tekst će morati biti stavljen na mjesto articleTitle.

Prvo, mi uhvatite tekst korisnik je na stranici odabrao sljedeći kôd:

 getSelection (). toString () 

Moramo baciti objekt koji je vratio getSelection () kao niz pomoću toString () metodu, kako bi je ostvarili ispišite odabrani tekst.

Dalje, moramo obaviti posjet na stranicu članka Wikiwand. To ćemo postići koristeći sljedeću logiku, gdje NEWURL će biti URL stranice članka Wikiwand (koji će sadržavati odabrani niz na kraju):

 location.href = newURL 

Kada postavimo ova dva isječka kôda zajedno, dobivamo sljedeću skriptu:

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

Sada samo moramo dodati javascript: protokol naprijed, a mi imamo konačni kod koristit ćemo u našoj knjižnoj oznaci:

 // dodajte u jedan red bez preloma retka javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). zamijenite (/ \ t ) 

Opcionalno zamjena (/ \ N / g,% 20 ') na kraju zamjenjuje bilo koji novi znak linije (\ n) u tekstu s jednim razmakom (20%).

JavaScript kod je spreman. Napominjemo da kod treba postaviti u jednom retku bez prekida retka, od kasnije će biti dodano u polje za unos teksta.

Stvorite oznaku

Otvorite prozor oznaka preglednika i dodajte novu oznaku:

• Firefox: Pritisnite ctrl + shift + B / cmd + shift + B, kliknite desnom tipkom "Alatna traka oznaka" i odaberite "Nova knjižna oznaka".
• Krom: Pritisnite ctrl + shift + O / cmd + alt + B, kliknite desnom tipkom "traka oznaka" i odaberite "Dodaj stranicu ...".

U polju URL copy-paste JavaScript kod od prije. Nakon što je oznaka stvorena, spremna je za korištenje; idite na bilo koju web-stranicu, odaberite riječ koje želite tražiti u Wikiwandu i kliknite knjižnu oznaku - Odmah će se otvoriti stranica članka Wikiwand.

Brzi pristup

Umjesto dolaska do izbornika oznaka svaki put kada vam je potrebna knjižna oznaka, možete odabrati prikazati izravno u pregledniku za brzi pristup.

• Firefox: Kliknite "Prikaz> Alatne trake" u gornjoj traci izbornika i odaberite "Alatna traka oznaka".
• Krom: Pritisnite ctrl + shift + B / cmd + shift + B.

Izradite vezu s knjižnom oznakom

Možete dodati svoju oznaku na web-lokaciju kao hipervezu također, koje posjetitelje može označiti jednostavnim povlačenjem i ispuštanjem veze na alatnu traku oznaka ili desnom tipkom miša na vezu i odabirom opcije da biste je označili.

Da biste pretvorili svoju oznaku u hipervezu, stvorite HTML oznaka s skriptom oznaka kao vrijednost href atribut:

   Wikiwand Search Bookmarklet  

Kako zasebno pohraniti bookmarklete

Također možete koristite zasebnu JavaScript datoteku da biste spremili kôd oznaka, što vjerojatno nije potrebno ako imate kratku skriptu - poput one koju smo upravo vidjeli u ovom vodiču - ali može doći pri ruci kada je JavaScript kôd predug da biste ga kopirali u traku oznaka preglednika.

Datoteka myscript.js htjeti smjestite glavni JavaScript kod za knjižnu oznaku i morate dodati sljedeći kôd kao URL oznake (na traci oznaka preglednika ili kao vrijednost href atribut u HTML datoteci):

 // dodaj u jedan red bez preloma retka javascript: (() => with (document) neka s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Gornji isječak koda je umotan u funkciju strelice koja samo priziva, i koristi značajke ECMAScript 6, kao što je pustiti ključne riječi, kako bi se smanjila duljina koda. Dodaje: a > oznaka koja pokazuje na myscript.js datoteku dokumenta kada korisnik klikne na knjižnu oznaku (imajte na umu da ćete možda morati koristiti apsolutnu putanju za myscript.js datoteka).