Jak vytvořit Text-Search Bookmarklet s JavaScriptem

Bookmarklets jsou Aplikace JavaScript přístupné jako záložek prohlížeče. Používají se pro umožnění uživatelům provádět různé akce na webových stránkách. Například, tato bookmarklet od FontShop je pro náhled FontShop webových fontů na jakékoliv webové stránce.

V tomto článku uvidíme, jak rychlé a snadné je vymyslet bookmarklet vytvořením takového provádí Wikiwand (lépe vypadající Wikipedia) Vyhledávání pro vybraný text na libovolné webové stránce.

Jak fungují bookmarklety

URI bookmarklet používá javascript: protokol to znamená, že je to složený z JavaScript kódu. Když kliknete na bookmarklet, můžete spustit JavaScript na webové stránce a provádět úkoly, jako je změna vzhledu stránky, přesměrování na jinou stránku nebo zobrazení nových informací na této stránce.

Vzhledem k tomu, záložky jsou v podstatě soubory kódu JavaScript, snadno se vytvářejí s malými znalostmi JavaScriptu, a to buď pro osobní použití, nebo pro nabízení svým uživatelům, jako je například WordPress s jeho tiskárnou.

Začněte s kódem JavaScript

Struktura URL Wikiwand používá pro anglicky psaný článek je https://www.wikiwand.com/en/articleTitle. Potřebujeme napsat skript, který přeskočí na stránku Wikiwand, na které URL končí řetězcem, který uživatel právě vybral - vybraný text bude muset být zavedeny articleTitle.

Za prvé, my získat text uživatel vybral na stránce následující kód:

 getSelection (). toString () 

Potřebujeme obsazení objekt vrátil getSelection () jako řetězec pomocí toString () metody výstup vybraného textu.

Dále musíme návštěvu na stránku článku Wikiwand. Toho dosáhneme pomocí následující logiky, kde newURL bude URL stránky článku Wikiwand (který bude obsahovat vybraný řetězec na konci):

 location.href = newURL 

Když tyto dva úryvky kódu vložíme dohromady, skončíme s následujícím skriptem:

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

Nyní musíme jen přidat javascript: protokol na frontu a máme kód použijeme náš bookmarklet:

 // přidat v jednom řádku bez zlomků řádku javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString () nahradit (/ n / g, '% 20' ) 

Volitelné nahradit (/ n / g, '% 20') na konci nahrazuje nový znak řádku (n) v textu s jedním znakem (% 20).

Kód JavaScript je připraven. Všimněte si, že kód musí být umístěn v jednom řádku bez přerušení řádku, protože později to bude přidán do pole pro zadávání textu.

Vytvořte záložku

Otevřete okno záložky prohlížeče a přidat novou záložku:

• Firefox: Stiskněte kombinaci kláves ctrl + shift + B / cmd + shift + B, klikněte pravým tlačítkem myši na položku Panel nástrojů Záložky a vyberte možnost Nová záložka..
• Chrome: Stiskněte kombinaci kláves ctrl + shift + O / cmd + alt + B, klikněte pravým tlačítkem myši na panel záložek a vyberte možnost Přidat stránku….

V poli URL zkopírujte a vložte kód JavaScriptu z minula. Jakmile je záložka vytvořena, je připravena k použití; přejděte na libovolnou webovou stránku, vyberte slovo chcete hledat ve Wikiwandu a klikněte na bookmarklet - Stránka článku Wikiwand se otevře okamžitě.

Rychlý přístup

Namísto dosažení nabídky záložek pokaždé, když potřebujete bookmarklet, si můžete vybrat zobrazit přímo pro rychlý přístup.

• Firefox: V horní liště nabídek klikněte na možnost Zobrazit> Panely nástrojů a vyberte možnost Panel nástrojů Záložky.
• Chrome: Stiskněte ctrl + shift + B / cmd + shift + B.

Vytvořit odkaz bookmarklet

Můžete přidat svůj bookmarklet na webové stránky jako hypertextový odkaz také návštěvníci můžete záložku buď jednoduše přetažením odkazu na panel nástrojů pro záložky, nebo kliknutím pravým tlačítkem myši na odkaz a výběrem možnosti záložka.

Chcete-li změnit bookmarklet na hypertextový odkaz, vytvořte Značka HTML se skriptem bookmarklet jako hodnota jeho href atribut:

   Wikiwand Hledat Bookmarklet  

Jak ukládat záložky samostatně

Můžete také použít samostatný soubor JavaScriptu pro uložení kódu bookmarkletu, který pravděpodobně není nezbytný, pokud máte krátký skript - jako ten, který jsme právě viděli v tomto tutoriálu -, ale může se vám hodit, když je kód JavaScriptu příliš dlouhý na to, aby jej zkopírovat do lišty záložek prohlížeče.

Soubor myscript.js vůle dům hlavní JavaScript kód pro bookmarklet a musíte přidat následující kód jako záložku URL (buď do panelu záložek prohlížeče, nebo jako hodnota href atribut v souboru HTML):

 // přidat v jednom řádku bez konce řádku javascript: (() => s (dokument) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Výpis kódu výše je zabalené do funkce samo vyvolávající šipky, a používá funkce ECMAScript 6, jako je nechat klíčové slovo, aby se snížila délka kódu. Přidává a > tag ukazující na myscript.js soubor dokumentu když uživatel klikne na bookmarklet (Všimněte si, že budete muset použít absolutní cestu pro. \ t myscript.js soubor).