Jak stworzyć dodatek do FireFoxa.pdf

(279 KB) Pobierz
Technologie
Jeżeli tworzyłeś już wcześniej strony oparte na DHTML prawdopodobnie bardzo szybko
zrozumiesz ideę tworzenia rozszerzeń do FireFox. Wiedza którą posiadasz z dziedziny znanych już
wcześniej technologii wymaga jedynie przestawienia się na inny "framework", jakim jest
środowisko FireFox. Rozszerzenia FireFox opierają się na 4 poniższych technologiach i warstwach:
•
•
•
•
XPCOM
XUL
JavaScript
CSS
XPCOM (Cross Platform Component Object Model)
XPCOM to crossplatformowy model komponentów podobny do rozwiązania Microsoft COM.
Model ten może być używany i implementowany w wielu językach, w tym JavaScript - języku
wykorzystywanym przez dodatki FireFox. Ogólnie XPCOM oferuje zestaw podstawowych
komponentów i klas m.in. do obsługi plików, zarządzania pamięcią, zarządzania wątkami, ... W
przypadku XPCOM FireFox większość komponentów jest częścią silnika Gecko.
Innymi słowy XPCOM to warstwa umożliwiająca dostęp do operacji, które nie są możliwe
bezpośrednio z pozycji JavaScript. Przykładem jest chociażby dostęp do plików. Łącznikiem
pomiędzy JavaScript a XPCOM jest interfejs
XPConnect.
XUL
XUL jest językiem opisu interfejsu użytkownika opartym na język XML. XUL posiada zbiór
podstawowych kontrolek i widgetów używanych w aplikacjach (przyciski, pulldowny, menu, ...).
Najprostszym sposobem, aby przekonać się czym dokładnie jest XUL będzie wpisanie w polu
adresu przeglądarki:
chrome://browser/content/browser.xul
Proszę bardzo, mamy przeglądarkę w przeglądarce! Teraz wystarczy otworzyć Firebug i skorzystać
z funkcji inspect. Mam nadzieję, że jest to dość obrazowe wyjaśnienie roli jaką pełni XUL w
FireFox :-)
JavaScript
Javascript jest warstwą logiki rozszerzeń i łącznikiem z XPCOM i XUL (dzięki DOM).
CSS
Warstwa opisu prezentacji XUL.
Środowisko developerskie
Aby móc efektywnie pisać dodatki do FF musimy przygotować odpowiednie środowisko
developerskie. W pierwszej kolejności należy stworzyć nowy profil FireFoxa. W tym celu
tworzymy nowy skrót:
firefox.exe -no-remote -P dev
Po jego uruchomieniu powinno pojawić się okno zarządzania profilami przeglądarki. Założymy tam
nowy profil 'dev'.
Po uruchomieniu nowego profilu wpisujemy w oknie adesu
about:config
i zmieniamy
konfigurację następujących zmiennych, które będą przydatne przy testowaniu pisanych rozszerzeń:
nglayout.debug.disable_xul_cache - true
browser.dom.window.dump.enabled - true
javascript.options.showInConsole - true
javascript.options.strict - true
Jeżeli któraś z powyższych zmiennych nie istnieje, należy ją dodać naciskając prawy przycisk
myszy i wybierając
Dodaj ustawienie typu -> Wartość logiczna (Boolean)
Warto również zainstalować bardzo pomocne dodatki:
Firebug
oraz
Chromebug.
Chromebug to
narzędzie napisane na bazie Firebug pracujące na warstwie chrome XUL, czyli warstwie niższej od
tej, na której pracuje Firebug. Po instalacji dodatku Chromebug należy uruchomić FireFox z
dodatkowym parametrem:
firefox.exe -no-remote -P dev -chromebug
Struktura plików i katalogów rozszerzeń FireFox
Po dodaniu i skonfigurowaniu nowego profilu w FireFox możemy już rozpocząć pracę nad
własnym dodatkiem. Nowo dodany profil będzie domyślnie dostępny w podobnej ścieżce:
C:\Documents and Settings\nazwa_uzytkownika\Dane
aplikacji\Mozilla\Firefox\Profiles\mhawpb4j.dev\
Tam też utworzymy nowy katalog, w którym znajdzie się nasz dodatek:
extensions\moj_dodatek@dowolna_najlepiej_wlasna_domena.com
Przyjęło się, że nazwa katalogu (również ID dodatku) ma postać adresu e-mail. Jest to jednak rzecz
umowna, możemy go nazwać zupełnie dowolnie.
Wewnątrz nowo utworzonego katalogu należy stworzyć odpowiednią strukturę plików oraz
podkatalogów:
install.rdf
chrome.manifest
content/
locale/
skin/
Pliki oraz ich strukturę opiszę poniżej. Warto zwrócić uwagę na trzy powyższe katalogi tzw.
pakietów:
•
content
- Zawiera pliki XUL oraz JavaScript.
•
locale
- Tutaj znajdują się pliki językowe interfejsu.
•
skin
- Pliki związane z wizualizacją GUI, takie jak pliki CSS i obrazki.
Budujemy dodatek
W tutorialu tym spróbujemy zbudować dodatek, który będzie zapisywał w pliku tekstowym
wyszukiwane w Google wyrażenia oraz ich datę. Nazwiemy go GoogleQueryLog. Dodatek bardzo
prosty, ale może przy okazji komuś się przyda :-).
Do zrobienia mamy następujące elementy:
•
Warstwa logiki (JavaScript) odpowiedzialna za zbieranie informacji o wyszukiwanych
wyrażeniach. Będzie ona realizowała:
•
przechwycenie zdarzenia zmiany adresu w polu adresu przeglądarki
•
sprawdzenie czy adres URL odpowiada wyrażeniu regularnemu odpowiadającemu
URI wyszukiwania w google
•
jeżeli adres będzie pasował do wzorca zostanie z niego pobrane wyszukiwane
wyrażenie
•
wyrażenie zostanie zapisane w pliku tekstowym wraz z datą
•
Nowa pozycja w menu przeglądarki
Google Query Log -> Zobacz logi
•
Okno wyświetlające logi z pliku tekstowego
W katalogu extension profilu 'dev' FireFox zakładamy katalog:
googlequerylog@moje.testy.
Budujemy w nich opisaną powyżej strukturę katalogów i plików.
chrome.manifest
Plik
chrome.manifest
rejestruje pakiet dodatku chrome w FireFox. Zawartość pliku
chrome.manifest
będzie następująca:
content googlequerylog content/
skin googlequerylog classic/1.0 skin/classic/
locale googlequerylog en-US locale/en-US/
locale googlequerylog pl-PL locale/pl-PL/
overlay chrome://browser/content/browser.xul
chrome://googlequerylog/content/overlay.xul
Pierwsza linia rejestruje pakiet typu
content. googlequerylog
to nazwa pakietu,
content/
to relatywna ścieżka do folderu gdzie będą znajdować się pliki źródłowe. W sposób analogiczny
definiowane są pozostałe pakiety:
skin i locale.
Nasz dodatek będzie dostępny w dwóch
wersjach językowych: angielskiej(US) i polskiej. Dla pozostałych wersji językowych FF
domyślnym językiem interfejsu dodatku będzie en-US.
Ostatnia linia określa tzn
overlay.
Overlay to technika pozwalająca na nałożenie na warstwę
dokumentu XUL kolejnej warstwy. Wyżej podałem przykład wpisania adresu
chrome://browser/content/browser.xul
w polu adresu przeglądarki.
browser.xul
to dokument XUL okna przeglądarki FireFox. Na tą warstwę nałożymy własny dokument XUL.
Potrzebne będzie nam to do tego, aby osadzić dodatkowo menu w przeglądarce opisane w
założeniach naszego przykładowego dodatku.
install.rdf
Jest to dokument XML zawierający dane dotyczące dodatku, które są wymagane do jego instalacji
w FireFox. Dokument ten będzie miał postać:
01.<?xml version="1.0"?>
02.<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
03.<Description about="urn:mozilla:install-manifest">
04.<!-- Unikalny identyfikator dodatku -->
05.<em:id>googlequerylog@moje.testy</em:id>
06.<!-- Informacje, że jest to dodatek do FF -->
07.<em:type>2</em:type>
08.<!-- Nazwa dodatku która będzie wyświetlana w menadżerze
dodatków FF -->
09.<em:name>Google Query Log</em:name>
10.<!-- Wersja dodatku -->
11.<em:version>0.0.1</em:version>
12.<!-- Opis który będzie widoczny w menadżerze dodatków FF -->
13.<em:description></em:description>
14.<!-- Autor -->
15.<em:creator>mturek</em:creator>
16.<!-- Strona dodatku -->
17.<em:homepageURL>http://moje.testy/<;/em:homepageURL>
18.<em:targetApplication>
19.<Description>
20.<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
21.<!-- Minimalna wersja FF którą obsługuje dodatek -->
22.<em:minVersion>3.0</em:minVersion>
23.<!-- Maksymalna wersja FF którą obsługuje dodatek -->
24.<em:maxVersion>3.6.*</em:maxVersion>
25.</Description>
26.</em:targetApplication>
27.</Description>
28.</RDF>
content/overlay.xul
Plik
overlay.xul
umieścimy w katalogu
content,
czyli wskazanym w pliku
chrome.manifest:
01.<?xml version="1.0"?>
02.<!DOCTYPE window SYSTEM
"chrome://googlequerylog/locale/qooglequerylog.dtd">
03.<overlay id="googlequerylogOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.x
ul">
04.<script type="application/javascript"
src="chrome://googlequerylog/content/service.js"/>
05.<menubar id="main-menubar">
06.<menu id="googlequerylog-menu" label="Google Query Log"
insertafter="helpMenu">
07.<menupopup id="sitehoover-menupopup">
08.<menuitem id="sitehoover-menu-showlog"
label="&overlay.menuShowLogs;"
oncommand="Service.dialogLogOpen()" />
09.</menupopup>
10.</menu>
11.</menubar>
12.</overlay>
Teraz pora uruchomić developerski profil FireFoxa.
Powinniśmy w menu zobaczyć nową pozycję:
Wytłumaczę w jaki sposób na podstawie powyższego pliku XUL została dodana nowa pozycja
menu. Używając Chromebug skorzystaj z funkcji inspect i najedź myszą na górną belkę menu. W
DOM zauważysz, że w głównym dokumenci XUL przeglądarki
chrome://browser/content/browser.xul
jest obiekt o ID main-menubar. Ten sam ID
jest użyty w naszym dokumencie XUL. FireFox uruchamiając nasz dodatek połączył oba
dokumenty wiedząc do którego obiektu ma się "przykleić". W kolejnym tagu naszego XUL (menu)
jest atrybut
insertafter
który ma wartość
helpMenu.
Jest ID elementu menu "Pomoc" ...

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin