Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Piszemy pierwszy bookmarklet

W dzisiejszym artykule opowiem Wam czym są bookmarklety, do czego służą i jak się je tworzy. Jak się później okaże, nie jest to nic trudnego.

Czym są bookmarklety?

Za wikipedią:

[...] niewielki skrypt napisany w języku JavaScript przechowywany jako adres URL zakładki w przeglądarce internetowej lub jako adres odsyłacza na stronie internetowej. Skrypt ten uruchamiany jest w momencie kliknięcia takiej specjalnej zakładki, [...] kontekstem wykonania skryptozakładki jest oglądana właśnie strona WWW [...]

Po Polsku to na nawet swoją nazwę - "skryptozakładka"

Co można robić?

Wszystko zależy od Twojej wyobraźni. Możesz:

Jak uruchamiać bookmarklet?

W większości przypadków odbywa się to w dwóch krokach:

  1. W zależności od skomplikowania: dołączamy odpowiednie skrypty JS do strony lub poprostu odpalamy.
  2. Inicjujemy

Aby odpalić bukmarklet trzeba pierw do docelowej strony dołączyć nasz plik JavaScript, dzięki któremu będziemy mieli dostęp do całej strony. Kod wygląda tak:

b=document.body;
if(b){
   void( z=document.createElement('script') );
   void( z.src='Adres do pliku JS' );
   void( b.appendChild(z) );
}
else{}

Nie jest to nic szczególnego, pobieramy body dokumentu i z poziomu JS dołączamy nowy tag script za pomocą metody appendChild. Warto jeszcze wspomnieć, że cały kod powinien być poprzedzony javascript:, dzięki czemy przeglądarka wie, że musi wykonać kod javascript.

Dlaczego void()?

Odpowiedź jest prosta. Jeżeli spróbujemy wykonać powyższy kod bez void(), to owszem, wszystko się wykona oraz zostanie zwrócona "wartość" wykonywanego kodu. Spowoduje to zastąpienie kodu HTML strony wynikiem powyższego kodu.

Funkcja void( wyrażenie ) powoduje obliczenie (wykonanie) wartości wyrażenia w nawiasie, a następnie zwrócenie wartości undefined, niezależnie od wyniku.

Skoro już dołączyliśmy kod do strony, to nie pozostaje nam uruchomić jakiś skrypt. Opisany zostanie tutaj kod, który podświetli na żółto wszystkie linki na stronie, które posiadają atrybut nofollow. Taki skrypt był mi potrzebny do spamowania tych lepszych blogów :). Wiem, że są odpowiednie wtyczki do FireFox'a, ale chodzi przecież o naukę a nie o pójście na łatwizmę.

Jak będzie działał skrypt?

  1. Pobieramy wszystkie anchory.
  2. Dla każdego pobieramy wartość atrybutu rel (musimy tutaj sprawdzić wszystkie wartości, bo czasem mogą tam występować inne wartości np. rel="lightbox nofollow").
  3. Każdemy linkowi, który zawiera wartość nofollow zmieniamy tło.

No to jedziemy:

(function (){
var a=document.getElementsByTagName('a'); //ad. 1
for(i=0; i < a.length; i++){
   if(a[i].rel){ //ad. 2
      var r = a[i].rel.split(' ');
      for(k=0; k < r.length; k++)
         if( r[k] == 'nofollow' )
            a[i].style.backgroundColor='yellow'; //ad. 3
   }
}
})();

Dzięki strukturze (function(){ wyrażenie })();, nasz skrypt zostanie uruchomiony w momencie dołączenia się skryptu.

Przeciągnij ten link do zakładek w FireFox'ie. Następnie kliknij na niego. Ten link podświetli się na żółto.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar empir

01.12.2010 empir

for(i=0; i &lt; a.length; i++)

nie działa mi to!! ;)

Gavatar aju

05.12.2010 aju

Czemu zamiast split i pętli nie użyjesz metody .test() ?

offtop: zrób hipka na górze strony klikalnego żeby można było przejść do strony głównej,
kontakt z górnego menu nie działa :)

Gavatar rad

07.12.2010 rad

Według specyfikacji długość adresu URL nie jest ograniczona, niektóre przeglądarki potrafią jednak obcinać zbyt długie adresy podczas dodawania do zakładek o czym należy pamiętać.

Dla ułatwienia można sobie dodać jakiś framework, np, jQuery. Wcale nie musimy wklejać go w naszą zakładkę czy hostować na własnym serwerze. Google Lib API i podobne przychodzą z pomocą :)

W pierwszym przykładzie brakuje Ci chyba ustawienia rodzaju skryptu:
z.type = 'text/javascript';

Gavatar shpyo

08.12.2010 shpyo

@empir: czepiasz się, jeszcze jest problem z parsowaniem (kolorowaniem) składni :)
@aju: słuszna uwaga, mniej kodu

Gavatar sst

08.12.2010 sst

Witam, mnie zastanawia jedno - gdzie takie coś można wykorzystać? Możesz podać jakieś przykłady bardziej pro/komercyjne?

Gavatar rad

08.12.2010 rad

@sst: ostatnio na własne potrzeby skleciłem coś takiego: http://blog.totallyrad.pl/354/skryptozakladka-click-n-remove/ może nie pro/komercyjne, ale czasami bardzo przydatne.

Skryptozakładki raczej służą do wykonywania drobnych rzeczy, a jeśli już komercyjnie to jako dodatek/usprawnienie do większej usługi niż rozwiązanie standalone, które można sprzedać.

Gavatar Tomasz Kowalczyk

05.01.2011 Tomasz Kowalczyk

Kiedyś interesowałem się tym tematem i nawet "coś tam" skrobnąłem własnego, ale niespecjalnie wgłębiałem się w to, jak ten mechanizm działa. Twój wpis rozjaśnił mi nieco całą sprawę, więc dzięki. ;]

Dodaj komentarz