Skryptozakładki: najlepsze porcje kodu JavaScript dla webmasterów

Skryptozakładki to krótkie fragmenty JavaScriptu (aplety), które zostały zapisane w formie podobnej do adresu URL. Pełnią one taką funkcję jak dodatki czy wtyczki. Udostępniają użytkownikowi nowe opcje, funkcjonują jako skróty do często wydawanych poleceń, a także przyspieszają przeglądanie stron WWW. Sprawdźcie sami.

Jak skorzystać ze skryptozakładki

Tworzenie skryptozakładek jest całkiem proste. Wystarcza podstawowa znajomość JavaScriptu. Można stosować wszystkie znane z tego języka programowania polecenia. Przykładowo, aby przygotować skrót uruchamiający w odrębnej karcie stronę główną Webhosting.pl, należy utworzyć nową zakładkę i zamiast linku wpisać kod:

javascript:(function(){ window.open('http://www.webhosting.pl/'); })();

Taki element można później umieścić na pasku przeglądarki i korzystać z niego tak samo, jak z tradycyjnych linków.

Zabawki dla dewelopera

W Sieci da się znaleźć tysiące gotowych skryptozakładek. Większość przydaje się miłośnikom konkretnych serwisów (na przykład Bit.ly czy Delicious). My postanowiliśmy wyszukać 15 takich, które ułatwią pracę każdego webmastera czy dewelopera.

Warto pamiętać o tym, że skryptozakładki są pod wieloma względami lepsze od rozszerzeń. Działają w praktycznie każdej przeglądarce (zależy to oczywiście od funkcji oferowanych przez poszczególne aplikacje). Nie ma problemów z kompatybilnością w obrębie różnych wersji programu. Instalacja i deinstalacja nie wymagają ponownego uruchamiania.

Skryptozakładki zazwyczaj nie spowalniają przeglądarki. Firefox nie przyporządkowuje im jednak kolorowych ikon - jak to ma miejsce w wypadku zwykłych zakładek. Z każdym javascriptowym linkiem można na szczęście skojarzyć słowo kluczowe. Wpisanie go w pasek adresu natychmiast aktywuje powiązaną komendę. Skryptozakładek nie trzeba więc umieszczać w widocznym miejscu, na pasku przeglądarki.

Opcja ta działa niestety tylko w aplikacji Mozilli. Użytkownicy Internet Explorera czy Google Chrome muszą uruchamiać skryptozakładki tradycyjnie, klikając je klawiszem myszy. Oba programy dodają jednak do tego rodzaju elementów kolorowe ikony, co ułatwia ogarnięcie zbioru na pasku narzędziowym. Rzadziej używane elementy można schować w menu.

1. Wyszukiwanie otwartych DIV-ów

Wyświetla granice wokół wszystkich elementów ujętych w znaczniki <div>. Wyszukując otwarte obiekty, ułatwia walidację strony. Przydaje się także do weryfikowania tabel.

Kod:

 

javascript:(function(){var s="body",c="",I=" ! important;",i,b,f,x,h; for(i=0;i<17;++i) { x = i.toString(16); b = i>15?"FCC":x+x+x; f = i>9?"000":"FFF"; c += s + " {background: #" + b + I + "border: 1px outset #" + b + I + "color: #" + f + I + "}\n"; s += " *"; } if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+c+"'"); } else { h=document.createElement('link'); h.rel='stylesheet'; h.href='data:text/css,'+escape(c); document.getElementsByTagName("head")[0].appendChild(h);}})()

Zamiast dodawania granic można zastosować kolory. Opcja ta lepiej sprawdza się w Internet Explorerze.

Kod:

javascript:(function(){var s="body",c="",I=" ! important;",i,b,f,x,h; for(i=0;i<17;++i) { x = i.toString(16); b = i>15?"FCC":x+x+x; f = i>9?"000":"FFF"; c += s + " {background: #" + b + I + "border-color: #" + b + I + "color: #" + f + I + "}\n"; s += " *"; } if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+c+"'"); } else { h=document.createElement('link'); h.rel='stylesheet'; h.href='data:text/css,'+escape(c); document.getElementsByTagName("head")[0].appendChild(h);}})()

2. Zarządzanie plikami cookie

Poniższa skryptozakładka wyświetla wszystkie pliki cookie zapisane przez daną witrynę.

Kod:

javascript:alert('Cookies stored by this host or domain:\n\n' + document.cookie.replace(/; /g,'\n'));

Druga usuwa je. Dzięki temu nie trzeba wyszukiwać tych elementów w ustawieniach przeglądarki.

Kod:

javascript:(function(){C=document.cookie.split("; ");for(d="."+location.host;d;d=(""+d).substr(1).match(/\..*$/))for(sl=0;sl<2;++sl)for(p="/"+location.pathname;p;p=p.substring(0,p.lastIndexOf('/')))for(i in C)if(c=C[i]){document.cookie=c+"; domain="+d.slice(sl)+"; path="+p.slice(1)+"/"+"; expires="+new Date((new Date).getTime()-1e11).toGMTString()}})()

«poprzednia 1 2 3 4 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

9 skomentuj »

Komentarze

#1 bitrut 2010-01-20 11:12:13 0
Z każdym javascriptowym linkiem można na szczęście skojarzyć słowo kluczowe. Wpisanie go w pasek adresu natychmiast aktywuje powiązaną komendę. Skryptozakładek nie trzeba więc umieszczać w widocznym miejscu, na pasku przeglądarki.

Opcja ta działa niestety tylko w aplikacji Mozilli. Użytkownicy Internet Explorera czy Google Chrome muszą uruchamiać skryptozakładki tradycyjnie, klikając je klawiszem myszy.

Opera także posiada taką funkcjonalność. Nie rozumiem dlaczego bardzo często pomija się tą przeglądarkę.
IP: 83.27.163.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.2.15 Version/10.10
#2 GalAnonim 2010-01-20 17:57:37 0
Najprawdopodobniej jakiemuś nieszczęsnemu redaktorzynie każą tłumaczyć artykuł z angielskiego na polski. A ponieważ ów jegomość nie ma pojęcia o polskich realiach internetu (popularność Opery) i w artykule oryginalnym nic o tym nie było, to po co się wychylać?
IP: 83.14.136.[...] Opera/9.80 (X11; Linux i686; U; pl) Presto/2.2.15 Version/10.10
#3 Ren 2010-01-21 08:17:53 0
Nikt nie ma większych kompleksów niż użytkownicy Opery. Zawsze czują się pomijani biedacy.
IP: 195.85.230.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)
#4 Adamm^® 2010-01-21 14:13:43 0
@bitrut - dlatego, że jest na zamkniętym kodzie.
IP: 77.112.176.[...] Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
#5 GalAnonim 2010-01-21 19:11:58 0
@Ren:

Masz rację, spójrzmy na to obiektywnie. Ranking.pl - rodziny przeglądarek: Google Chrome - 3,8%, Opera - 11%. A wzmianka w artykule? Tylko o Google Chrome rzecz jasna! PO PROSTU SĄ BEZCZELNIE OMIJANI! Jeżeli Pan Ren lubi zakłamaną rzeczywistość w której pomija się POPULARNIEJSZĄ przeglądarke w artykule to cóż zrobić...

Ledwo co Navjot Pawera zostawił gadżety promujące Operę. A co otrzymuje w zamian? Gadżety są bezczelnie wykorzystywane do promocji webhostingowego forum, a w artykułach o przeglądarkach o operze cisza...

@Adamm: gdyby chociaż promil użytkowników zajrzał do tego kodu... A tak to co za różnica czy otwarty czy zamknięty kod skoro i tak jest za darmo? Ile poprawek sobie nawprowadzałeś do tych o otwartym kodzie? Argument otwartości jest śmieszny.
IP: 87.205.28.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.10
#6 Adamm^® 2010-01-22 20:10:44 0
@GalAnonim, zapomniałem o emotikonie ;) - traktuj moją wypowiedź z przymrużeniem oka.

Swoją drogą, kilka rzeczy w Firefoxie sobie przestawiłem - i nie tylko za to lubię open source ;]
IP: 85.193.251.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
#7 piotreeek 2010-01-24 14:18:23 0
Ja stosuje skryptozakładkę o nazwie "readable" - zdecydowanie poprawia kontrast i czytelnośc dużych ilości tekstu na stronach WWW.
IP: 109.243.101.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.38 Safari/532.0
#8 Gloryficus 2010-05-11 20:20:55 0
Mam pytanie:

Czy można zrobić skryptozakładkę w ten sposób:

Mam stronę internetową i umieszczam na niej odnośnik do zewnętrznej strony internetowej zawierający skryptozakładkę. Po kliknięciu na link i przejściu na nową stronę, pojawiają się na niej np. dodatkowe ikony, funkcje, itd..
IP: 88.156.180.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729) FBSMTWB
#9 kretynofil 2011-06-12 23:36:47 0
Znajomy napisał fajną skryptozakładkę pozwalającą na szybkie korzystanie z Google Tłumacza:

http://www.pokazywarka.pl/gtrans
IP: 78.8.129.[...] Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.91 Safari/534.30

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.