Jak utworzyć zakładkę wyszukiwania tekstowego z JavaScript

Zakładki są Aplikacje JavaScript które można uzyskać jako zakładki przeglądarki. Służą do umożliwienia użytkownikom wykonywać różne czynności na stronach internetowych. Na przykład ten bookmarklet FontShop służy do podglądu czcionek internetowych FontShop na dowolnej stronie internetowej.

W tym artykule zobaczymy, jak szybko i łatwo to zrobić wymyślić bookmarklet tworząc taki, który wykonuje Wikiwand (lepiej wyglądająca Wikipedia) Szukaj dla wybranego tekstu na dowolnej stronie internetowej.

Jak działają zakładki

URI bookmarkletu używa javascript: protokół to oznacza, że ​​tak składa się z kodu JavaScript. Po kliknięciu zakładki bookmarklet możesz uruchom JavaScript na stronie internetowej i wykonuj zadania, takie jak zmiana wyglądu strony, przekierowanie na inną stronę lub wyświetlenie na niej nowych informacji.

Ponieważ zakładki są zasadniczo zestawy kodu JavaScript, są łatwe do tworzenia przy niewielkiej znajomości JavaScript, zarówno do użytku osobistego, jak i do oferowania go użytkownikom, jak WordPress robi z Press This bookmarklet.

Zacznij od kodu JavaScript

The Struktura adresu URL Wikiwand używa artykułu w języku angielskim https://www.wikiwand.com/en/articleTitle. Musimy napisać skrypt, który przeskakuje na stronę Wikiwandu tego adresu URL kończy się ciągiem, który użytkownik właśnie wybrał - wybrany tekst będzie musiał być w miejscu tytuł artykułu.

Najpierw, my zdobądź tekst użytkownik wybrał na stronie następujący kod:

 getSelection (). toString () 

Musimy odlew obiekt zwrócony przez getSelection () jako sznur za pomocą toString () metodę, aby to zrobić wyślij wybrany tekst.

Następnie musimy przeprowadzić wizytę na stronie artykułu Wikiwand. Osiągniemy to, stosując następującą logikę, gdzie newURL będzie Adres URL strony artykułu Wikiwand (który będzie zawierał wybrany ciąg na końcu):

 location.href = newURL 

Kiedy zestawimy te dwa fragmenty kodu razem, otrzymujemy następujący skrypt:

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

Teraz musimy tylko dodać javascript: protokół do przodu, a my mamy ostateczny kod użyjemy w naszej zakładce bookmarklet:

 // dodaj w jednym wierszu bez znaków podziału javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ n / g, '% 20' ) 

Opcjonalne zastąp (/ n / g, „% 20”) na końcu zastępuje dowolny znak nowej linii (n) w tekście z pojedynczym znakiem spacji (% 20).

Kod JavaScript jest gotowy. Pamiętaj, że kod musi zostać umieszczony w jednej linii bez przerw linii, ponieważ później będzie dodane do pola wprowadzania tekstu.

Utwórz zakładkę

Otwórz okno zakładki przeglądarki i dodaj nową zakładkę:

• Firefox: Naciśnij ctrl + shift + B / cmd + shift + B, kliknij prawym przyciskiem myszy „Pasek zakładek” i wybierz „Nowa zakładka”.
• Chrom: Naciśnij ctrl + shift + O / cmd + alt + B, kliknij prawym przyciskiem myszy „Pasek zakładek” i wybierz „Dodaj stronę…”.

W polu URL skopiuj i wklej kod JavaScript sprzed. Po utworzeniu zakładki jest gotowy do użycia; przejdź do dowolnej strony internetowej, wybierz słowo chcesz szukać w Wikiwand i kliknij bookmarklet - strona artykułu Wikiwand otworzy się natychmiast.

Szybki dostęp

Zamiast sięgać do menu zakładek za każdym razem, gdy potrzebujesz bookmarkletu, możesz wybrać wyświetl go bezpośrednio w przeglądarce dla szybkiego dostępu.

• Firefox: Kliknij „Widok> Paski narzędzi” na górnym pasku menu i wybierz „Pasek narzędzi zakładek”.
• Chrom: Naciśnij ctrl + shift + B / cmd + shift + B.

Utwórz link zakładki

Możesz dodać swój bookmarklet do strony internetowej jako hiperłącze również, którzy odwiedzający może dodać zakładkę albo po prostu przeciągnij i upuść link do paska narzędzi zakładek, albo kliknij prawym przyciskiem myszy link i wybierz opcję, aby go dodać do zakładek.

Aby zmienić zakładkę w hiperłącze, utwórz Znacznik HTML ze skryptem bookmarklet jako wartość jego href atrybut:

   Wikiwand Search Bookmarklet  

Jak przechowywać zakładki oddzielnie

Możesz również użyj oddzielnego pliku JavaScript aby zapisać kod bookmarkletu, co prawdopodobnie nie jest konieczne, jeśli masz krótki skrypt - taki jak ten, który właśnie widzieliśmy w tym samouczku - ale może się przydać, gdy kod JavaScript jest zbyt długi, aby skopiować go i wkleić do paska zakładek Twojej przeglądarki.

Plik myscript.js będzie przechowuj główny kod JavaScript dla bookmarkletu i musisz dodać następujący kod jako adres URL zakładki (albo do paska zakładek przeglądarki, albo jako wartość href atrybut w pliku HTML):

 // dodaj w jednym wierszu bez znaków podziału javascript: (() => z (document) niech s = createElement ('skrypt'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Powyższy fragment kodu to zawinięte w funkcję wywołującą własną strzałkę, i używa funkcji ECMAScript 6, takich jak pozwolić słowo kluczowe, w celu zmniejszenia długości kodu. Dodaje > znacznik wskazujący na myscript.js plik do część dokumentu gdy użytkownik kliknie bookmarklet (zauważ, że możesz potrzebować bezwzględnej ścieżki dla myscript.js plik).