Stwórz sobie wymarzonego Firefoksa

Stwórz sobie wymarzonego Firefoksa
18.04.2008 15:30
Stwórz sobie wymarzonego Firefoksa
Źródło zdjęć: © IDG

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.

Uwaga: skrypty Greasemonkey są bardzo użyteczne, ale należy używać ich ostrożnie. Napisany przez nieznaną osobę, skrypt może zawierać niebezpieczny kod. Należy wybierać skrypty znane i sprawdzone przez wielu internautów lub... pisać własne. Pamiętajmy też, że dodatek Greasemonkey znacząco obciąża pamięć komputera.

288769067022825619
Źródło zdjęć: © Skrypty uruchamianie przez Greasemonkey mogą zmienić wygląd dowolnej strony WWW. W tym wypadku efektem działania skryptu jest dodatkowy panel obok wyników wyszukiwania Google.(fot. IDG)

Najpierw Greasemonkey, potem skrypty

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.

288769067023022227
Źródło zdjęć: © Poprawnie zainstalowany i aktywny dodatek Greasemonkey wyświetla w prawym dolnym rogu okna przeglądarki specjalną ikonę.(fot. IDG)

Zarządzanie skryptami

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.

288769067023153299
Źródło zdjęć: © Specjalne okno dialogowe przypomina, żeby upewnić się, czy instalujemy właściwy skrypt. (fot. IDG)
288769067023218835
Źródło zdjęć: © Okno zarządzania skryptami Greasemonkey pozwala wyłączyć lub włączyć każdy z zainstalowanych skryptów.(fot. IDG)

Zrób to sam

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!".

288769067023349907
Źródło zdjęć: © Tworzenie nowego skryptu rozpoczynamy od użycia opcji w Firefoksie: Narzędzia | Greasemonkey | Nowy skrypt. (fot. IDG)

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.

288769067024332947
Źródło zdjęć: © Pierwszy własnoręcznie stworzony skrypt wyświetla okno komunikatu. (fot. IDG)

Skrypt do kinodomowe.idg.pl

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.

288769067024464019
Źródło zdjęć: © (fot. IDG)

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 = '

test

';
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

288769067024791699
Źródło zdjęć: © (fot. IDG)

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.

288769067025578131
Źródło zdjęć: © Zmodyfikowany skrypt, przetwarzający pobraną z użyciem XMLHttpRequest stronę i dodający zewnętrzne arkusze stylów CSS, wyświetla całkiem zgrabny panel z listą nowych programów. (fot. IDG)

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.

288769067025840275
Źródło zdjęć: © Skrypty można dowolnie rozbudowywać, tutaj widać skrypt dla strony pcworld.pl rozbudowany o wiadomości z serwisu GameStar. (fot. IDG)
Oceń jakość naszego artykułuTwoja opinia pozwala nam tworzyć lepsze treści.
Udostępnij:
Wybrane dla Ciebie
Komentarze (0)