Jak stworzyć własną skryptozakładkę? [JavaScript]

Skryptozakładki to niewielkie fragmenty JavaScriptu, które można przechowywać w przeglądarce na podobieństwo zakładek. Wykorzystują one fakt, że kod JavaScriptu możemy uruchamiać z paska adresowego przeglądarki. Dodając taki kod do ulubionych, zyskujemy możliwość uruchamiania takiego kodu jednym kliknięciem. Wiele popularnych witryn oferuje skryptozakładki jako rozszerzenia funkcjonalności swoich stron dla użytkowników – ich przewagą nad dedykowanymi rozszerzeniami do konkretnych przeglądarek jest uniwersalność: działają w każdym browserze. Jak zrobić własną skryptozakładkę?

Skryptozakładki najczęściej wykorzystywane są przez użytkowników takich social newsowych serwisów jak del.icio.us – pozwalają np dodać do serwisu daną stronę bez konieczności jej odwiedzania. Cała różnica pomiędzy zwykłym URL-em w zakładkach, a skryptozakładką sprowadza się więc do uchwytu (handlera), który pozwala na uruchomienie kodu JavaScriptu. Wygląda to zazwyczaj tak:

javascript:<polecenia JavaScriptu>

Na przykład:

javascript:void(document.bgColor='#fff')

co pozwala nam na zmianę własności koloru tła obiektu window.document na biały – przydatne dla tych wszystkich witryn, których autorom wydaje się, że czytanie na np. ciemnoszarym tle jest fajne.

Skryptozakładkę udostępnia się poprzez utworzenie z niej kotwicy,

a następnie pozwala użytkownikowi na zrobienie z niej zakładki. Jeśli teraz klikną zakładkę, czy to na pasku, czy z menu, kod zostanie wykonany.

Dwie zasady składniowe

Spacje są problemem – w kodzie skryptozakładki trzeba pozbyć się wszelkich spacji.
Przeglądarki mają limit długości URL. Wpływa on na długość użytego JavaScriptu. Dłuższy kod można więc skompresować, np. za pomocą narzędzi Closure. Można też zastosować sztuczkę polegającą na ładowaniu w skryptozakładce kodu z zewnątrz.

Najprzydatniejsze obiekty, metody i funkcje skryptozakładek

location.href – pozwala na dostęp do URL aktualnej strony,
document.title – pozwala na dostęp do tytułu dokumentu HTML,
window.getSelection – pozwala na dostęp do zaznaczonego tekstu,
decodeURIComponent() i encodeURIComponent() – zakodowanie nazwy lub adresu strony do bezpiecznej postaci.

Skryptozakładka del.icio.us

javascript:location.href='http://del.icio.us/post?v=4;url='+encodeURIComponent(location.href)+';title='+encodeURIComponent(document.title)

Co robi ta skryptozakładka? Jak widać, zmienia aktualny adres i ustawia parametry żądania na adres aktualnej strony i jej tytuł. Przed przesłaniem oba parametry zostają zakodowane.

Szybkość i usability

Skryptozakładki nie powinny:

dezorientować użytkownika, zakłócając jego doświadczenie strony czy przekierowując nie wiadomo gdzie,
być powolne. Aby przyspieszyć działanie skryptozakładek, możemy stosować te same tricki co wobec normalnego JavaScriptu – poprzez optymalizację kodu (ponownie warto zerknąć na Closure Tools) i kompresję gzip.