Stwórz sobie wymarzonego Firefoksa

Greasemonkey to jeden z najbardziej wszechstronnych dodatków do przeglądarki Firefox, dzięki któremu możemy niemal dowolnie modyfikować wygląd i zawartość każdej strony WWW. Dostępne są liczne gotowe rozwiązania, a odrobina wiedzy na temat języka JavaScript pozwoli tworzyć własne. Ze skryptów Greasemonkey warto jednak korzystać z umiarem - często najlepszym wyjściem jest własnoręczne przygotowanie skryptu do zastosowania w konkretnym wypadku.

Dodatek przeznaczony jest wyłącznie do Firefoksa. Umożliwia uruchomienie specjalnych skryptów, które zmieniają zawartość lub wygląd strony otwartej w przeglądarce. Firefox najpierw pobiera oryginalną zawartość witryny, a następnie uruchamia skrypt ( pod warunkiem, że dodatek Greasemonkey jest aktywny, a skrypt odpowiedni do strony - zainstalowany ). Za pomocą takich skryptów, napisanych w języku JavaScript, można uzyskać naprawdę niesamowite efekty i dopasować zwartość witryn WWW do własnych potrzeb.

Początek pracy z Greasemonkey nie należy do specjalnie skomplikowanych. Należy uruchomić przeglądarkę Firefox i otworzyć stronę z dodatkami do przeglądarki - https://addons.mozilla.org/pl/firefox/addon/748. Po kliknięciu przycisku _ Instaluj _ i potwierdzeniu, Greasemonkey zostanie pobrany i zainstalowany. Wymagane jest ponowne uruchomienie Firefoksa. Poprawne zainstalowanie Greasemonkey można sprawdzić. W prawym dolnym rogu okna Firefoksa powinna znajdować się ikona z rysunkiem stylizowanej małpki. Klikając ją, włączysz lub wyłączysz działanie dodatku. Teraz można na dobre rozpocząć pracę z Greasemonkey.

Przed użyciem skryptu należy go zainstalować. Pokaźny zbiór skryptów do Greasemonkey można znaleźć na stronie UserScripts.org - http://userscripts.org. Jak zainstalować i uruchomić wybrany skrypt? Prześledźmy całą procedurę na przykładzie YouTube HD, pozwalającego oglądać filmy w serwisie YouTube w lepszej jakości ( o ile taka jest dostępna ). Na tej stronie - http://userscripts.org/scripts/show/23366 widzimy opis skryptu oraz przycisk _ Install this scripts _. Po kliknięciu przycisku zostanie wyświetlone okno z ostrzeżeniem. Rzeczywiście, skrypty do Greasemonkey mogą zawierać złośliwy kod ( tak jak i każdy inny program ). Przed instalacją warto sprawdzić komentarze użytkowników i upewnić się, co pobieramy. Zaawansowani użytkownicy mogą przejrzeć kod źródłowy skryptu i samodzielnie sprawdzić, czy nie zawiera podejrzanych instrukcji.

Każdy zainstalowany skrypt jest domyślnie aktywny: gdy odwiedzisz stronę, którą ma modyfikować, zostanie uruchomiony. Można go dowolnie dezaktywować - najprostsza metoda, żeby pozbyć się zmian wprowadzonych przez skrypt, to kliknięcie ikony Greasemonkey i odświeżenie strony. Można też użyć opcji _ Narzędzia | Greasemonkey | Zarządzaj skryptami _. W tym ostatnim wypadku wyświetlone zostanie okno dialogowe umożliwiające nie tylko dezaktywację wybranego skryptu ( zaznacz dany skrypt i zmień opcję Włącz ), ale też zmianę stron, w których skrypt będzie uruchamiany. Można też określić witryny, przy wyświetlaniu których skrypt nie będzie działał. Ta ostatnia opcja jest przydatna, np. gdy chcesz używać skryptu na wszystkich stronach danego serwisu WWW poza swoją własną, np. z twoim profilem użytkownika.

Używanie skryptów Greasemonkey jest proste. Niestety, tych przeznaczonych do polskich serwisów internetowych powstało stosunkowo niewiele. Jeśli naprawdę chcesz zmienić wygląd lub działanie swojego ulubionego polskiego portalu, pozostaje ci zapoznać się z programowaniem w JavaScript i przygotować taki skrypt samodzielnie. Przed rozpoczęciem pracy warto wyposażyć system w edytor programistyczny: w zupełności wystarczy darmowy program, taki jak Notepad++. Pierwszy, bardzo prosty skrypt Greasemonkey spowoduje wyświetlenie komunikatu "Witam!".

Najpierw wybierz w Firefoksie opcję _ Narzędzia | Greasemonkey | Nowy skrypt _. W oknie dialogowym podaj nazwę skryptu, lokalizację ( może to być dowolny adres URL, który posłuży do identyfikacji ), należy też podać, przy jakich witrynach skrypt ma być wykonywany ( gwiazdka oznacza dowolną stronę ). Po kliknięciu OK skrypt otworzy się w domyślnym edytorze. Jeśli nie ma przypisanego do Greasemonkey edytora, zostaniesz poproszony o wskazanie programu na dysku. Nowo utworzony skrypt będzie bardzo prosty:

// ==UserScript==
// @name Pierwszy skrypt
// @namespace http://mojastrona.pl
// @description to tylko przykład
// @include *
// ==/UserScript==
Sześć początkowych wierszy rozpoczyna się od dwóch ukośników. Interpretowane są w języku JavaScript jako komentarz i nie są wykonywane. Zawierają jednak istotne informacje konfiguracyjne, typowe dla Greasemonkey, umieszczane między wierszem

// ==UserScript==

a wierszem

// ==/UserScript==

Wiersz rozpoczynający się od // @name zawiera nazwę skryptu, wiersz // @namespace pomaga w identyfikacji. Skrypty różnych autorów mogą mieć tę samą nazwę, dlatego wiersz // @namespace powinien zawierać jednoznaczny identyfikator autora. Najczęściej jest to po prostu adres jego strony domowej. W wierszu // @description można podać krótki opis działania skryptu. W czasie testowania na domowym komputerze początkowe wiersze konfiguracyjne nie mają wielkiego znaczenia ( warto zadbać o ich zawartość przed opublikowaniem skryptu w Internecie ).

Naprawdę ważne są dwa kolejne. W wierszu // @include * określamy, na jakich stronach skrypt będzie uruchamiany ( gwiazdka oznacza dowolną witrynę ). W opcjonalnym wierszu // @exclude określamy, na jakich stronach skrypt nie będzie działać. Przykładowo, wiersz

// @exclude http://mojastrona.pl/*

oznacza, że skrypt nie będzie uruchamiany na witrynach w domenie mojastrona.pl. Uwaga: jeśli docelowa strona może być wyświetlona z użyciem adresów mojastrona.pl i www.mojastrona.pl, należy użyć dwóch wierszy konfiguracyjnych:

// @exclude http://mojastrona.pl/*

// @exclude http://www.mojastrona.pl/*

Właściwa, wykonywalna część skryptu zaczyna się poniżej początkowych komentarzy konfiguracyjnych. W tym przykładzie dodamy tylko jeden wiersz:

alert('Witam!');

Skrypt jest już gotowy. Teraz wystarczy otworzyć w przeglądarce Firefox dowolną stronę, a zostanie wyświetlony komunikat "Witam!" - to właśnie efekt działania naszego przykładowego skryptu. Po tym prostym teście można pokusić się o przygotowanie skryptu, który będzie rzeczywiście przydatny.

Spróbujmy przekształcić za pomocą skryptu Greasemonkey stronę kinodomowe.idg.pl. Witryna ma dość tradycyjny układ, wszystkie elementy ułożone są na pasku o szerokości nieco ponad 500 pikseli. Dzisiejsze monitory z reguły wyświetlają strony w znacznie większej rozdzielczości - można użyć pozostałej powierzchni do przedstawienia dodatkowych informacji.

Najpierw spróbujmy dodać do głównej strony kinodomowe.idg.pl element
czyli prostokątny obszar, wypełniony kolorem i zawierający jakiś tekst. Używając procedury analogicznej do opisanej powyżej, przygotujmy skrypt Greasemonkey.

// ==UserScript==
// @name Testowy DIV
// @namespace http://mojastrona.pl/
// @include http://www.kinodomowe.idg.pl/
// @include http://kinodomowe.idg.pl/
// ==/UserScript==

var ftpbox = document.createElement("div");
ftpbox.style.position = 'absolute';
ftpbox.style.left = '770px';
ftpbox.style.top = '0px';
ftpbox.style.width = '300px';
ftpbox.style.height = '400px';
ftpbox.style.background = '#ffffcc';
ftpbox.innerHTML = '

';
document.body.insertBefore(ftpbox, document.body.firstChild); Powyższy kod, wykonany przez Greasemonkey po otwarciu strony kinodomowe.idg.pl spowoduje wyświetlenie żółtego prostokąta obok zawartości witryny. Skoro potrafimy już dodać element, zadbajmy, aby wyświetlał interesującą zawartość, np. listę najnowszych programów na FTP. Do tego celu wykorzystamy obiekt XMLHttpRequest, typowy dla technologii AJAX, a umożliwiający wysyłanie zapytań GET i POST oraz odbieranie odpowiedzi bez konieczności przeładowywania strony ( więcej na temat technologii AJAX znajdziesz w wydaniu 2/200. PC World Komputera

Obiekt ten posłuży do pobrania zawartości strony www.kinodomowe.idg.pl/ftp, z której następnie wydobędziemy listę najnowszych programów. Początkowy kod skryptu wygląda następująco:

var ftpbox = document.createElement("div");
ftpbox.style.position = 'absolute';
ftpbox.style.left = '770px';
ftpbox.style.top = '0px';
ftpbox.style.width = '300px';
ftpbox.style.height = '420px';
ftpbox.style.border = '1px solid green;';
ftpbox.style.padding='4px';

var xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET", location.href+"ftp",true);

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
var s = xmlhttp.responseText;
ftpbox.innerHTML = s;
}
}
xmlhttp.overrideMimeType("text/html; charset=ISO-8859-2");
xmlhttp.send(null);

document.body.insertBefore(ftpbox, document.body.firstChild); Zwróćmy uwagę na zapis:

xmlhttp.open("GET", location.href+"ftp",true);

Użycie wartości location.href , zawierającej aktualny adres witryny, powoduje, że nasz skrypt będzie działać zarówno na stronie www.kinodomowe.idg.pl, jak i kinodomowe.idg.pl.

Funkcja obsługująca zdarzenie xmlhttp.onreadystatechange wstawia odpowiedź otrzymaną z zapytania do zmiennej s, którą przypisujemy zawartości naszego dodatkowego pola na stronie. Strony w domenie kinodomowe.idg.pl publikowane są z użyciem kodowania ISO 8859 2, dlatego kodowanie trzeba w dość brutalny sposób wymusić na zapytaniu:

xmlhttp.overrideMimeType("text/html; charset=ISO-8859-2");

Zwracanie wyniku zapytania zakodowanego jako UTF-8 jest typowe dla XMLHttpRequest. Jeśli nie zmienimy kodowania ręcznie, w dodatkowym polu na stronie pojawią się śmieci.

Tak przygotowany skrypt działa, ale wyświetla w dodatkowym polu całą zawartość strony kinodomowe.idg.pl/ftp. Należy więc z całej odpowiedzi zwróconej przez XMLHttpRequest wydłubać tylko interesującą nas ramkę z listą programów. Rzut oka na kod strony kinodomowe.idg.pl/ftp pozwala stwierdzić, że lista programów znajduje się pomiędzy ciągami znaków Ostatnio dodane a
. Wykorzystamy ten fakt i z całej odpowiedzi wybierzemy tylko kod HTML pomiędzy tymi dwoma ciągami znaków.

var s = xmlhttp.responseText;
s = s.substring(s.indexOf('Ostatnio dodane')-164,s.length);
s = s.substring(0,s.indexOf('
'))
;
ftpbox.innerHTML = s;

Tajemnicza wartość 164 pojawiająca się w kodziesłuży do tego by wyciąć odpowiednio duży fragment pobranej strony - całą elegancką tabelę z listą programów. Skrypt powinien już działać poprawnie, oczywiście można go wzbogacić ( np. o rodzaj nagłówka ) i dopasować wygląd do własnych preferencji czy rozbudować, wyświetlając w dodatkowym polu na stronie kinodomowe.idg.pl kolejne elementy.

więcej w serwisie PC World Komputer »