Bookmarklet - co to je a jak to používat

Bookmarklet je kousek javascriptového kódu uložený v oblíbené položce. Dovoluje uživateli provést na stránce nějaký javascript, který autor stránky nezamýšlel. Já si třeba takhle zvětšuji písmo, podtrhávám nepodtrhané odkazy nebo na jedno kliknutí měním rozměry okna. V tomto návodu se pokusím vysvětlit, jak bookmarklety fungují a jak si je tvořit.

Bookmarkletům se také říká favelety. Není v tom rozdíl, jde pouze o zastrašování normálních lidí. Bookmarklet se odvozuje od slova bookmark = záložka (přípona let znamená, že to něco dělá, srovnej applet, servlet, úlet), favelet je asi od slova favorite = oblíbený.

Javascript do řádku adresy

Zkuste si otevřít okno prohlížeče a napište do adresního řádku:

na prázdné stránce se potom objeví slovo ahoj. Prohlížeč podle začátku adresy javascript: poznal, že nemá přejít na jinou stránku, ale že má spustit následný skript. A ten následný skript document.write("ahoj") prostě jenom vypíše slovo.

Psát ahoj je na nic. Užitečnější je přepnutí velikosti okna. Častým uživatelským rozlišením obrazovky je rozlišení 800 na 600 (v létě 2003 asi 28 % uživatelů). Při ladění stránek je potřeba vidět stránku tak, jako uživatel s tímto rozlišením. Do řádku adresy si napíšte kód

a okno se zvětší nebo zmenší na tuto velikost (nefunguje v Opeře). Takovéhle přizpůsobení velikosti okna je pro webdesignéra skvělá věc. Ten zápis je ale moc zdlouhavý a je nuda ho ťukat ručně, takže se vyplatí udělat z něj bookmarklet.

Jak funguje bookmarklet

Napřed jak funguje oblíbená položka (často se tomu říká záložka, favorite link, prostě to, co má prohlížeč v menu "oblíbené"). Oblíbená položka obsahuje adresu, většinou http://něco (plus popisek apod., to nyní není důležité). Když uživatel ťukne na oblíbenou položku, tak si prohlížeč vezme adresu té oblíbené položky a přejde na ní. Zatím všechno jasné.

Co se ale stane, když oblíbená položka nebude mít v adrese http://něco, ale javascript:něco? Prohlížeč si tu adresu vezme a zkusí na ní přejít. Jenže jak na ní může přejít, když to není adresa? No vlastně tomu teoreticky nerozumim, ale prostě ten javascript se vykoná. Přitom ale uživatel fakticky zůstane na právě prohlížené stránce.

Příklad: jsem na stránce www.seznam.cz a chci vědět, jestli se vejde do okna velikosti 800x600. Zvolím z menu oblíbenou položku jménem 800x600, v níž mám uložený javascript, konkrétně javascript:resizeTo(800,600). Co se stane? Zůstanu na stránce www.seznam.cz, ale velikost okna se přizpůsobí. Vidím, že Seznam se do toho okna na šířku vejde.

Jak vytvořit bookmarklet

V každém prohlížeči se to dělá trochu jinak. Proberu to pro Mrkvosoft Exploder. Začátek je dost nelogický (pokud znáte lepší způsob, sdělte mi ho): vlezu na libovolnou stránku a přidám si ji do oblíbených. Potom si u té nové oblíbené položky nakliknu vlastnosti a 

1. změním jméno oblíbené položky (podle sebe),
2. změním adresu - tam přijde klíčové slovo javascript: následované javascriptovým kódem.

Příklad: budu chtít udělat v Exploreru ten bookmarklet pro simulaci rozlišení 800 na 600:

1. Vlezu si třeba na stránku www.seznam.cz a přidám si jí do oblíbených. (Nebojte, jenom na chvilku.).
2. Dám oblíbené, najdu tu novou položku, kliknu na ní pravým tlačítkem a zvolím vlastnosti.
3. Na kartě Obecné změním jméno podle sebe, třeba tam dám 800x600, abych to pak poznal.
4. Na záložce Webový dokument změním adresu URL na javascript:resizeTo(800,600). Prohlížeč se chvíli cuká že to jako není bezpečné. Nebojte se, je to asi tak nebezpečné jako zapnutý javascript.

Potom, když budu chtít nasimulovat to rozlišení, zvolím prostě z nabídky oblíbené tu položku jménem 800x600. Nikam mě to nepřepne, ale provede skript.

Připravené bookmarklety

Vymýšlet vlastní skripty a pak z nich vařit bookmarklety je otrava. Občas se proto na netu dají najít stránky obsahující připravené bookmarklety. Většinou mají formu odkazu, na který stačí kliknout pravým tlačítkem a zvolit "přidat do oblíbených". Je to tedy jednodušší než tvořit vlastní bookmarklet.

Osobně používám zatím pouze 4 bookmarklety. Zkuste si následující odkazy přidat do oblíbených:

• Odstranění stylů (tenhle bookmarklet mám od Marka Prokopa)
• 800x600 popsáno výše
• Zvětšení stránky (lupa 150%) v Internet Exploreru
• Přidání vlastního stylu ke stránce - je potřeba vytvořit si CSS soubor s vlastními styly a dát si ho někam na disk. Já ten soubor mám v adresáři c:\pokusy. (Funguje to jenom v Exploreru, ale mně to stačí.) V souboru se svými styly mám třeba povinné podtrhávání všech odkazů, větší písmo odstavců apod. Dá se tam napsat jakýkoliv styl.

Další bookmarklety

Pixy má na stránkách perfektní přehled bookmarkletů, spoustu svých originálních. To už nejsou takové prkotiny, jako ukazuju tady, to už umí ledascos. Škoda, že je to anglicky.

Garconův bookmarklet na měření textového podílu stránky (to je taky Čecha).

Jesse's bookmarklets - to už není Čech.

Přehled bookmarkletů na serveru, který se podle toho jmenuje.

Napište mi, prosím odkazy na stránky s bookmarklety (i když se tam třeba jmenují favelety). Díky.

O autorovi

Dušan „Yuhů“ Janovský již léta tvoří a spravuje jeden z nejlepších českých zdrojů o tvorbě Webu pod názvem Jak psát web. Jeho součástí je i pravidelně aktualizovaný Yuhůův weblog o webu určený zejména méně zkušeným webovým autorům.

Článek Bookmarklet - co to je a jak to používat na autorově webu.