Generator bookmarkletów: zamień JavaScript w bookmarklet

Jak korzystać z tego generatora bookmarkletów

1. Nadaj zakładce nazwę i wklej swój JavaScript do pola z kodem — albo naciśnij Wczytaj przykład z tytułem strony, żeby zobaczyć gotowy przykład. Początkowe javascript: jest opcjonalne; generator usuwa je i dodaje własne.
2. Naciśnij Utwórz bookmarklet. Poniżej pojawi się wygenerowany adres razem z jego długością w znakach.
3. Przeciągnij ciemny przycisk na pasek zakładek. Jeśli pasek jest ukryty, najpierw włącz go w menu Widok lub w ustawieniach przeglądarki.
4. Otwórz dowolną stronę i kliknij zakładkę. Skrypt uruchomi się jednorazowo na tej stronie.

Kliknięcie przycisku na tej stronie celowo nic nie robi — bookmarklet ma działać na stronie, którą czytasz, a nie na generatorze.

Czym właściwie jest bookmarklet

Bookmarklet to zwykła zakładka w przeglądarce, której adres zaczyna się od javascript:zamiast https:. Otwierasz stronę, klikasz zakładkę, a przeglądarka uruchamia Twój skrypt na tej stronie, zamiast gdziekolwiek nawigować. Bookmarklety przydają się do czynności związanych z konkretną stroną — kopiowania sformatowanego cytatu, przełączania widoku do czytania, wyciągania zaznaczonego tekstu albo otwierania bieżącego adresu w innej usłudze. Nie wymagają instalacji rozszerzenia, nie proszą o żadne uprawnienia i mieszkają na pasku zakładek jak każdy inny link.

Jak zamienić JavaScript w bookmarklet

Ręczna konwersja skryptu to trzy kroki, a generator wykonuje każdy z nich za Ciebie. Oto dwuwierszowy skrypt i bookmarklet, w który się zamienia:

const n = document.links.length;
alert(n + ' linków na tej stronie');

javascript:(()%3D%3E%7B%0Aconst%20n%20%3D%20document.links.length%3B%0Aalert(n%20%2B%20'%20link%C3%B3w%20na%20tej%20stronie')%3B%0A%7D)()

1. Zapakuj kod w funkcję

Narzędzie umieszcza Twój kod w natychmiast wywoływanej funkcji strzałkowej,(() => { … })(). Dzięki temu Twoje zmienne nie kolidują z tym, co strona już definiuje, a jest też drugi powód: gdy kod w adresie javascript: kończy się wartością tekstową, przeglądarka zastępuje stronę nowym dokumentem pokazującym ten tekst. Funkcja z ciałem w nawiasach klamrowych nic nie zwraca, więc strona zostaje na miejscu. Przy pisaniu ręcznym klasyczną alternatywą jest rozpoczęcie kodu od void.

2. Zakoduj go procentowo

Przeglądarki usuwają surowe znaki tabulacji i nowego wiersza z każdego adresu URL, zanim go użyją, więc wieloliniowy skrypt wklejony wprost do zakładki zostaje ściśnięty do jednego wiersza. Pojedynczy komentarz // pochłania wtedy wszystko, co po nim, a instrukcje, które polegały na końcach wierszy, zlewają się ze sobą. Kodowanie zamienia każdy podział wiersza na%0A, który przetrwa; przeglądarka dekoduje kod z powrotem tuż przed uruchomieniem. Kodowanie chroni też spacje, cudzysłowy, % i #.

3. Dopisz przedrostek javascript:

Schemat javascript: mówi przeglądarce, żeby resztę adresu uruchomiła jako skrypt. Gotowy ciąg znaków przeciągasz na pasek albo wklejasz do zakładki.

Jak zainstalować bookmarklet

Na komputerze

Przeciągnij ciemny przycisk na pasek zakładek w Chrome, Edge, Firefoksie, Safari lub dowolnej innej przeglądarce na komputer. Jeśli przeciąganie jest niewygodne, naciśnijKopiuj adres zakładki, utwórz nową zakładkę i wklej adres w jej pole adresu.

Na iPhonie, iPadzie i w Androidzie

Mobilne przeglądarki nie mają paska zakładek do przeciągania, więc użyj metody z edycją:

1. Naciśnij Kopiuj adres zakładki.
2. Dodaj do zakładek dowolną stronę — może być ta.
3. Otwórz zakładki, edytuj nową zakładkę i zastąp jej adres skopiowanym adresem javascript:. Przy okazji zmień jej nazwę.
4. Przejdź na stronę, na której chcesz go uruchomić. W Safari na iPhonie lub iPadzie otwórz zakładkę z listy zakładek. W Chrome na Androidzie wpisz nazwę bookmarkletu w pasku adresu i dotknij podpowiedzi z zakładką; otwarcie jej z ekranu zakładek opuszcza stronę, więc nie ma na czym uruchomić skryptu.

Nie wklejaj go do paska adresu

Wygląda to na skrót, ale Chrome celowo usuwa początkowe javascript: z tekstu wklejonego do paska adresu — to zabezpieczenie przed oszustwami, które nakłaniają ludzi do wklejania szkodliwego kodu. To, co zostaje, jest traktowane jak zapytanie do wyszukiwarki. Zapisanie kodu jako zakładki to niezawodna droga.

Przykłady bookmarkletów do wklejenia

Każdy z nich używa wyłącznie standardowych interfejsów przeglądarki. Wklej jeden do pola z kodem powyżej, naciśnij Utwórz bookmarklet i zainstaluj go.

Skopiuj stronę jako link w Markdownie

Otwiera okno z zaznaczonym linkiem, gotowym do skopiowania.

prompt('Link w Markdownie:', '[' + document.title + '](' + location.href + ')');

Policz zaznaczone słowa

Najpierw zaznacz tekst, potem kliknij bookmarklet.

const words = String(getSelection()).trim().split(/\s+/).filter(Boolean).length;
alert('Zaznaczone słowa: ' + words);

Zrób stronę edytowalną

Kliknij ponownie, aby wyłączyć edycję. Odświeżenie przywraca oryginał.

document.designMode = document.designMode === 'on' ? 'off' : 'on';

Otwórz stronę w Wayback Machine

Wyświetla zarchiwizowane kopie strony, na której jesteś.

location.href = 'https://web.archive.org/web/*/' + location.href;

Typowe zastosowania bookmarkletów

Pamiętaj, że bookmarklet widzi tylko to, co strona wystawia w bieżącym oknie: nie sięga do innych kart ani do zawartości ramek z innej domeny. Jeśli kod ma pracować na zaznaczonym fragmencie albo na tytule strony, sprawdź go najpierw na prostej stronie, a dopiero potem na witrynie, na której naprawdę go potrzebujesz.

Dlaczego bookmarklet nie działa

Polityka bezpieczeństwa witryny go blokuje

Jeśli bookmarklet działa na większości witryn, ale na jednej nic nie robi, sprawdź nagłówek Content-Security-Policy tej witryny. Specyfikacja CSP mówi, że polityka strony nie powinna przeszkadzać bookmarkletom, ale przeglądarki nadal mogą blokować adresy javascript:na stronach z restrykcyjnymi regułami script-src. Bookmarklet, który wstrzykuje skrypt z innej domeny, jest dotknięty podwójnie: nawet jeśli się uruchomi, o tym, czy obcy skrypt może się załadować, decyduje polityka strony. Żaden bookmarklet nie może tego obejść. Jeśli potrzebujesz skryptu na takiej witrynie, rozwiązaniem jest rozszerzenie przeglądarki lub skrypt użytkownika.

Strona zmieniła się w pustą stronę z tekstem

Twój kod zakończył się wartością tekstową, więc przeglądarka wyświetliła ją jako nową stronę. Usuń każde return, które zwraca tekst. Jeśli bookmarklet napisałeś ręcznie, ponowne wygenerowanie go tutaj opakowuje go w funkcję, więc końcowe wyrażenie tekstowe nie zastępuje już strony.

Nic się nie dzieje i nie ma błędu

Otwórz konsolę deweloperską przeglądarki, a potem kliknij bookmarklet jeszcze raz. Błędy składni, brakujące elementy i zablokowane skrypty są tam zgłaszane. Częstą przyczyną w ręcznie robionych bookmarkletach jest komentarz //, który wylądował w tym samym wierszu co reszta kodu — ponowne wygenerowanie z oryginalnego źródła to naprawia.

Jak edytować istniejący bookmarklet

Skopiuj adres zakładki, usuń początkowe javascript: i zdekoduj resztękoderem i dekoderem URL (narzędzie w języku angielskim), żeby odzyskać czytelny kod. Wprowadź zmianę, wklej kod do tego generatora bookmarkletów i zastąp adres starej zakładki nowym adresem. Trzymanie oryginalnego źródła w pliku tekstowym oszczędza ten objazd.

Bezpieczeństwo ma znaczenie

Bookmarklet działa z takim samym dostępem, jaki mają własne skrypty strony: może czytać i zmieniać wszystko, co strona udostępnia. Przejrzyj kod przed instalacją, unikaj fragmentów ładujących zdalne skrypty — adres kontrolowany przez kogoś innego może się zmienić po instalacji — i nigdy nie uruchamiaj nieznanego bookmarkletu na stronie z danymi wrażliwymi. Jeśli witryna, wiadomość albo film prosi, żebyś wkleił kod do zakładki lub paska adresu, potraktuj to jako oszustwo.

Bookmarklet, skrypt użytkownika i rozszerzenie

Cała trójka wygląda podobnie, ale odpowiada na różne potrzeby. Bookmarklet to jeden skrypt, który uruchamia się raz, na jednej stronie, po kliknięciu — bez instalacji, a podróżuje razem z Twoimi zakładkami. Skrypt użytkownika (zarządzany przez menedżer takich skryptów) przypina się do pasujących witryn i może uruchamiać się automatycznie przy każdej wizycie, zachowując własne ustawienia między stronami. Rozszerzenie przeglądarki potrafi jedno i drugie oraz więcej — pracę w tle, przechwytywanie ruchu sieciowego, ikony na pasku narzędzi — kosztem kroku instalacji i szerokich uprawnień, które przeglądarka pokazuje Ci z góry. Rozszerzenia są też traktowane inaczej przez polityki bezpieczeństwa stron: specyfikacja CSP zaznacza, że Chrome dba o to, by wstrzyknięcia z rozszerzeń działały niezależnie od polityki strony. Zacznij od bookmarkletu; przesiądź się dopiero, gdy trafisz na jego granice.

Ograniczenia: kiedy nie używać bookmarkletu

Bookmarklet uruchamia się tylko po kliknięciu, na jednej stronie naraz. Nie przechowuje stanu między wizytami, nie działa w tle i nie modyfikuje automatycznie każdej strony. Długość rzadko bywa problemem — Chrome podaje maksymalną długość adresu URL równą 2 MB — ale długi skrypt staje się nieczytelnym adresem zakładki, a przy takim rozmiarze łatwiej utrzymać menedżer skryptów użytkownika lub rozszerzenie. Zmiany wprowadzone przez bookmarklet znikają też po odświeżeniu: jeśli chcesz podświetleń, które będą nadal na miejscu następnym razem, zobaczjak podświetlać tekst na dowolnej stronie i go zachować (artykuł po angielsku). A jeśli zadanie brzmi „zapisz tę stronę jednym kliknięciem”, a nie „uruchom fragment kodu”, dedykowane rozszerzenie przeglądarki robi to bez utrzymywania kodu.

Prywatność: dokąd trafia Twój kod

Nigdzie. Nazwa, fragment kodu i wygenerowany adres nigdy nie opuszczają strony — przy tworzeniu bookmarkletu nie jest wykonywane żadne żądanie sieciowe. Jedno uczciwe zastrzeżenie: gotowy bookmarklet jest przechowywany jako zwykła zakładka, więc jeśli synchronizujesz zakładki między urządzeniami, skrypt podróżuje razem z pozostałymi zakładkami i jest widoczny dla wszystkiego, co może odczytać zsynchronizowany profil.

Powiązane narzędzia i poradniki

Bookmarklet z linkiem w Markdownie kopiuje jeden link naraz; żeby zamienić na Markdown cały kod HTML strony, użyj konwertera HTML na Markdown (po angielsku). Jeśli kopiowane linki są pełne parametrów śledzących, usuwa jenarzędzie do czyszczenia linków URL. Do zapisywania stron i pracy z nimi bez pisania skryptów zobaczzakreślacz stron Marqly,menedżer zakładek dla Chromei workflow drugiego mózgu (strony po angielsku) — albo przeczytaj poradnik jak uporządkować zakładki (po angielsku).