Ako vytvoriť záložku s textovým vyhľadávaním pomocou jazyka JavaScript

Bookmarklets sú Aplikácie JavaScript ku ktorým je možné pristupovať ako záložky prehliadača. Používajú sa na to, aby umožnili používateľom vykonávať rôzne akcie na webových stránkach. Napríklad táto bookmarklet od spoločnosti FontShop slúži na zobrazenie webových písiem FontShop na ľubovoľnej webovej stránke.

V tomto článku uvidíme, ako rýchlo a ľahko to bude vytvoriť bookmarklet vytvorením takého vykonáva Wikiwand (lepšie vyzerajúci Wikipedia) Vyhľadávanie pre vybraný text na ľubovoľnej webovej stránke.

Ako fungujú záložky

URI záložky používa javascript: protokol čo to naznačuje zložený z kódu JavaScript. Keď kliknete na záložku, môžete spustite jazyk JavaScript na webovej stránke a vykonajte úlohy, ako napríklad zmena vzhľadu stránky, presmerovanie na inú stránku alebo zobrazenie nových informácií o nej.

Vzhľadom k tomu, záložky sú v podstate súbory kódu JavaScript, ľahko sa vytvárajú s malými znalosťami jazyka JavaScript, a to buď pre osobnú potrebu, alebo pre jej ponúkanie vašim používateľom, ako napríklad WordPress s jeho tlačou.

Začnite kód JavaScript

Štruktúra adresy URL Wikiwand používa pre článok v anglickom jazyku https://www.wikiwand.com/en/articleTitle. Musíme napísať skript, ktorý preskočí na stránku Wikiwand, v ktorej adrese URL končí reťazcom, ktorý práve používateľ vybral - vybraný text bude musieť byť zavedený articleTitle.

Po prvé, my získanie textu používateľ si na stránke vybral nasledujúci kód:

 getSelection (). toString () 

Musíme obsadenie objekt vrátený getSelection () ako reťazec pomocou natiahnuť() metódu, aby to bolo možné výstup vybratého textu.

Ďalej musíme navštívte na stránku článku Wikiwand. Dosiahne to pomocou nasledujúcej logiky, kde NEWURL bude Adresa URL stránky článku Wikiwand (ktorý bude obsahovať vybraný reťazec na konci):

 location.href = newURL 

Keď sme tieto dva útržky kódu spojili, skončíme nasledujúcim skriptom:

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

Teraz musíme len pridať javascript: protokol dopredu a máme konečný kód budeme používať v našom bookmarklet:

 // pridať do jedného riadku bez prerušenia riadkov javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString () nahradiť (/ \ n / g, '% 20' ) 

Voliteľné vymeniť (/ \ n / g, '% 20') nakoniec nahrádza akýkoľvek nový znak riadku (\ n) v texte s jedným priestorovým znakom (% 20).

Kód JavaScript je pripravený. Upozorňujeme, že je potrebné umiestniť kód v jednom riadku bez prestávok v riadku, pretože neskôr to bude pridané do poľa pre zadávanie textu.

Vytvorte záložku

Otvorte okno záložky prehliadača a pridať novú záložku:

• Firefox: Stlačte klávesy ctrl + shift + B / cmd + shift + B, pravým tlačidlom myši kliknite na "Panela s nástrojmi záložiek" a zvoľte "New Bookmark".
• Chrome: Stlačte klávesy ctrl + shift + O / cmd + alt + B, pravým tlačidlom myši kliknite na "Záložky" a zvoľte "Pridať stránku ...".

V poli URL kopírovať-prilepiť kód JavaScript od predtým. Po vytvorení záložky je pripravený na použitie; prejdite na ľubovoľnú webovú stránku, vyberte slovo ktoré chcete vyhľadať v Wikiwande a kliknite na záložku - Stránka s článkom Wikiwand sa otvorí naraz.

Rýchly prístup

Namiesto toho, aby ste dosiahli ponuku záložiek zakaždým, keď potrebujete bookmarklet, môžete vybrať zobraziť ho priamo vo vašom prehliadači pre rýchly prístup.

• Firefox: Kliknite na "Zobraziť" panely nástrojov "v hornej lište ponuky a vyberte" Panela s nástrojmi záložiek ".
• Chrome: Stlačte klávesy ctrl + shift + B / cmd + shift + B.

Vytvorte odkaz na záložku

Vašu bookmarklet môžete pridať na webovú stránku ako hypertextový odkaz rovnako ako návštevníci môže byť záložka buď jednoduchým pretiahnutím odkazu na panel s nástrojmi záložiek alebo kliknutím pravým tlačidlom myši na odkaz a výberom možnosti na záložku.

Ak chcete zmeniť záložku na hypertextový odkaz, vytvorte ju HTML tag s skriptom bookmarklet ako jeho hodnota href atribút:

   Wikiwand Vyhľadať záložku  

Ako ukladať záložky samostatne

Môžete tiež použite samostatný súbor JavaScript aby ste uložili kód záložky, čo pravdepodobne nie je potrebné, ak máte krátky skript - ako ten, ktorý sme práve videli v tomto návode - ale môže byť užitočné, keď je kód JavaScript príliš dlhý, aby ste ho skopírovali a vložili do záložky vášho prehliadača.

Súbor myscript.js vôľa umiestnite hlavný kód JavaScript pre bookmarklet a musíte pridať nasledujúci kód ako webovú adresu záložky (buď do záložky záložiek prehliadača, alebo ako hodnota href atribút v súbore HTML):

 // pridať do jedného riadku bez prerušenia riadkov javascript: (() => s (dokument) let s = createElement ('skript'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Fragmentový kód je uvedený vyššie zabalené do vlastnej funkcie šípky, a používa funkcie ECMAScript 6, ako napr nechať kľúčové slovo, aby sa zmenšila dĺžka kódu. Pridáva a > značka ukazujúca na myscript.js súbor do priečinka časti dokumentu keď používateľ klikne na záložku (všimnite si, že možno budete musieť použiť absolútnu cestu pre myscript.js file).