Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Własne rozszerzenie do Firefoksa

Autor: Piotr Karpiuk o czwartek 1. Grudzień 2011

Przeglądarka jest już trochę jak system operacyjny, a dla wielu z nas staje się powoli synonimem słowa „komputer”. Jeśli używasz Firefoksa, to zapewne posiadasz szereg rozszerzeń do niego, takich jak AdBlock Plus, Firebug, SQLiteManager, czy Web Developer. Jako programista, być może naszła Cię nieraz ochota żeby samodzielnie rozszerzyć możliwości tej aplikacji. Jeśli nieobce są Ci terminy takie jak HTML, CSS i JavaScript, to masz już 80% wiedzy aby stworzyć własne rozszerzenie. Dzięki takim technologiom na ogół nie będziesz się musiał przejmować różnicami między Windowsem a Linuksem czy MacOSem.

Krótkie rozeznanie w systemie pojęć Mozilli: dodatki Firefoksa (ang. add-ons) to tematy (ang. themes), wtyczki (ang. plugins, np. Adobe Reader, Flash), rozszerzenia (ang. extensions) i pakiety językowe. Rozszerzenia również dzielą się na Jetpacks, bootstraped extensions oraz traditional extensions. Dwa pierwsze nie wymagają restartów, ale to ostatnie są najpowszechniejsze i na nich skupia się niniejszy artykuł. Wszystkie rozszerzenia umieszczone na stronie rozszerzeń przechodzą różne sprawdziany bezpieczeństwa.

W porównaniu z Google Chrome, możliwości rozbudowy Firefoksa poprzez rozszerzenia są znacznie większe. Stwierdzenie, że twórca rozszerzenia staje się deweloperem Mozilli i może dowolnie rozbudowywać przeglądarkę, wcale nie jest dalekie od prawdy.

Możesz zatem:

  • dodawać polecenia do menu i przyciski na paskach narzędziowych oraz tworzyć własne paski narzędziowe,
  • tworzyć w języku XUL (aplikacja XML) własne okna dialogowe z całym bogactwem kontrolek (przy czym zwraca uwagę dość oryginalne połączenie drzewa i tabelki w jeden komponent), a nawet tworzyć własne kontrolki scalając elementy XUL, HTML i SVG za pomocą XBL (XMLowy język do opisu zachowania kontrolek XUL); możesz również rozbudowywać istniejące okna (tzw. overlays) poprzez dodawanie lub zastępowanie kontrolek,
  • dodawać własne paski boczne (takie jak ten z historią po naciśnięciu Ctrl+H),
  • korzystać z notyfikacji (żółty pasek na górze strony, np. z pytaniem czy zapamiętać hasło) oraz powiadomień natywnych dla systemu operacyjnego.

Ponadto, jak się pewnie spodziewasz, masz dostęp poprzez JavaScript do „flaków” przeglądarki i możesz zajrzeć do dokumentu DOM każdej otwartej zakładki, reagować na zdarzenia takie jak załadowanie nowej strony, czy przechwytywać komunikację sieciową. Warto zwrócić uwagę, że jest m.in. dostęp do systemu plików (np. katalogu domowego użytkownika) czy uruchamianie zewnętrznych aplikacji.

XPCOM

Firefox składa się z dwóch warstw. Dolna (największa) to środowisko uruchomieniowe XULRunner – skompilowany C++. Druga to interfejs użytkownika zbudowany głównie przy użyciu XML, JavaScriptu i CSS. Warto nadmienić, że można użyć XULRunnera jako podstawy własnej aplikacji desktopowej, zresztą na bazie tego środowiska powstał nie tylko Firefox, ale także Thunderbird (klient poczty) czy mniej znane SongBird (audio player) albo Sunbird.

XPCOM to sposób w jaki XULRunner i chrom komunikują się ze sobą. Większość obiektów i funkcji dolnej warstwy jest ukryta przed warstwą górną – te które mają być widoczne, są eksponowane poprzez komponenty i interfejsy XPCOM.

API oferowane przez XPCOM jest dość trudne w czytaniu, a korzystanie w JavaScripcie bezpośrednio z komponentów XPCOM może być uciążliwe:

    this._prefService = Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);  
    this._prefValue = this._prefService.getBoolPref("somePreferenceName");

dlatego też powstały udogodnienia w postaci bibliotek takich jak FUEL (obecna w FF 3+), czy JSLib.

Jeśli chcesz, możesz udostępnić JavaScriptowi w przeglądarce własny kod napisany np. w C++ – wymaga to utworzenia komponentów XPCOM, co pociąga za sobą m.in. potrzebę napisania pliku interfejsu IDL i skompilowania go.

Anatomia pakietu i narzędzia

Typowe rozszerzenie, to katalog o określonej strukturze spakowany ZIPem i zmienionym rozszerzeniem na *.xpi. Czasami stosuje się sygnatury cyfrowe, ale nie jest to powszechne. Kluczowy jest plik install.rdf gdzie definiujemy identyfikator rozszerzenia (np. adres e-mail), jego nazwę i wersję. Oprócz tego mamy tu pliki z rozszerzeniami *.xul (interfejs GUI), *.js (JavaScript), *.css (arkusze stylu dla interfejsu GUI), obrazki i pliki *.properties zawierające dane lokalizacyjne (można definiować osobne komunikaty dla języka polskiego, a inne dla angielskiego).

Nie ma oficjalnego Mozilla IDE. Do edycji plików źródłowych rozszerzeń polecany jest opensource’owy Komodo Edit: wspiera automatyczne uzupełnianie znaczników XUL i atrybutów, „zna” Mozillowe rozszerzenia CSS, można go uzupełnić o szereg wtyczek.

Od czego zacząć

W strefie autora witryny z dodatkami znajduje się wiele materiałów, z których polecam zwłaszcza tutorial oraz Code snippets.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>