Tworzenie rozszerzeń dla aplikacji Mozilla Firefox Michał Sadowski
Plan prezentacji Wstęp Technologie Struktura rozszerzeń Instalacja Chrome Skin Narzędzia Podsumowanie Bibliografia
Wstęp Mozilla Firefox Jedna z najpopularniejszych przeglądarek internetowych Produkt freeware owy Open-source Duży nacisk na feedback ze strony użytkowników Lokalizacja generowana jest przez samych użytkowników Największy konkurent MS Explorer Wsparcie wielkich firm takich jak Sun Microsystems, IBM, Apple czy Adobe
Wstęp Czym są rozszerzenia? Definicja Rozszerzenia są aplikacjami, które zmieniają lub rozszerzają funkcjonalność programów opartych o kod Mozilli. Zazwyczaj są dystrybuowane w postaci samoinstalujących się archiwów XPI. Najpopularniejsze rozszerzenia Bookmarks Synchroniser - Aplikacja ta umożliwia przechowywanie zakładek ze stronami w trybie online w pliku XBL automatycznie ściągając je na komputer, na którym uruchamiamy Firefoksa. Foxy Tunes Rozszerzenie umożliwia słuchanie muzyki w czasie przeglądania stron bez przełączania okien. Sage RSS Reader - Umożliwia większą kontrolę nad źródłami wiadomości RSS i ich organizacją.
Technologie XUL (XML User-Interface Language) - Definiuje wygląd ekranu interfejsu użytkownika i dołącza do niego skrypty i style. Javascript - Główny język skryptowy, na bazie którego zbudowana jest Mozilla Firefox. Większość rozszerzeń pisana jest w tym właśnie języku. DOM (Document Object Model) - Używany do manipulowania XUL em w czasie rzeczywistym. XPCOM (Cross-Platform Component Object Model) Umożliwia dostęp do pełnej struktury aplikacji Mozilla Firefox, włącznie z dostępem do ustawień oraz systemu plików. CSS (Cascading Style Sheets) - Odpowiada za style interfejsu, jak i dołączanie wiązań XBL do dokumentów XUL. XBL (XML Binding Language) - Rozszerza XUL, pozwalając na kreowanie nowych obiektów. RDF (Resource Description Framework) - Używany jako format przechowywania danych w niektórych częściach Mozilli Firefox oraz w niektórych rozszerzeniach.
Technologie XUL Jego powstanie miało na celu ułatwienie i przyspieszenie projektowania Mozilli. Jest to język rodziny XML, a zatem udostępnia wszystkie możliwości, które udostępnia jego przodek Zaprojektowany z myślą o tworzeniu łatwo przenośnych interfejsów użytkownika Może korzystać z innych języków takich jak MathML lub SVG Wyświetlany tekstujest łatwo lokalizowalny Prostota wykorzystywania szablonów styli Elementy interfejsu przygotowane w XUL u są łatwe do podglądu poprzez otwarcie ich za pomocą przeglądarki Przykładowe elementy możliwe do wytworzenia za pomocą XUL a: Kontrolki wejścia (textbox, checkbox) Paski narzędzi wraz z przyciskami i zawartością Menu w pasku menu oraz pop-up menu Dialogi przełączane tabulatorem Drzewa o strukturach hierarchicznej i tabelarycznej Skróty klawiszowe
Technologie XUL Przykładowy dokument Przykładowy dokument XUL: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="center"> <label value="witaj, świecie!" /> </box> </window>
Technologie Document Object Model Document Object Model stanowi API dla dokumentów HTML i XML Zapewnia strukturalną reprezentacje dokumentów Łączy wyświetlane strony ze skryptami oraz językami programowania Zorganizowany w obiekty Obiekty są dostępne za pomocą skryptów Mimo że jest mocno powiązany z JavaScriptem, może być tworzony z myślą o dowolnym języku Standard W3C DOM
Technologie XPCOM Zaprojektowany dla Netscape Communicator Komponenty Mozilli są komponentami XPCOM XPCOM (Wieloplatformowy Obiektowy Model Komponentu, Cross- Platform Component Object Model) został początkowo utworzony jako część projektu Mozilla, ale obecnie używany jest przez wiele różnych projektów XPCOM jest lekkim wieloplatformowym wariantem szeroko znanego Obiektowego Modelu Komponentu (Component Object Model, COM) Obsługuje każdą platformę sprzętową (Microsoft Windows, Linux, HP-UX, AIX, Solaris, OpenVMS, MacOS, BSD)
Technologie CSS i XBL CSS posiada specyficzną dla Mozilli Firefox listę własności (mozappearance, moz-background-clip, moz-binding, moz-border-radius) XUL nie umożliwia zmiany funkcjonalności istniejących elementów, tu z pomocą przychodzi XBL XBL należy do rodziny języków XML owych Plik XBL zawiera szereg wiązań, z których każde opisuje działanie poszczególnego widget u XUL XBL i CSS współdziałają poprzez własność -moz-binding
Technologie CSS i XBL - Przykład Przykładowy dokument XBL: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> </binding> <!-- tu wstawiamy zawartość, własności, metody i opisy zdarzeń --> <binding id="binding2"> </binding> </bindings> <!-- tu wstawiamy zawartość, własności, metody i opisy zdarzeń -->
Technologie RDF RDF to bazujący na grafach model opisujący zasoby internetowe (takie jak strony www, maile) oraz ich wzajemne relacje W Mozilla Firefox służy do integracji i organizacji zasobów internetowych RDF Model wraz z szablonami XUL służy przede wszystkim jako API do wyświetlania informacji Odpowiada on również za składnie serializacji RDF jest również używany do tworzenia multi-platformowych baz danych służących przechowywaniu niewielkich pamięciowo danych
Struktura rozszerzeń Rozszerzenia są rozprowadzane jako pliki XPI Pliki XPI są to archiwa spakowane według algorytmu zip W środku zawsze się znajduje plik install.js, który jest instalatorem dodatku w przeglądarce Czasem może także występować plik z tekstami dla instalatora (locale.inf) albo plik z początkowymi ustawieniami rozszerzenia Właściwy kod dodatku umieszczony jest w katalogach lub jako archiwum jar, w którym te katalogi są spakowane Jar'y także są pakowane według algorytmu zip Zazwyczaj można spotkać 3 katalogi: Locale gdzie znajdują się spakowane archiwa językowe, kodowane w standardzie UTF-8 Skin gdzie znajdują się elementy graficzne rozszerzenia Content właściwy kod rozszerzenia
Instalacja Plik instal.rdf Instalacja opiera się na pliku install.rdf, który dołączony jest do archiwum xpi W przypadku, kiedy ścieżki do plików instalacyjnych zawarte w pliku install.rdf są błędnie podane, instalacja zostanie przerwana Plik ten determinuje lokalizacje poszczególnych części składowych rozszerzenia Plik posiada również identyfikator rozszerzenia, który odróżnia je od innych Identyfikator znajduje się w tagu <em:id> i generowany jest na podstawie standardu registry GUID. Do generowania identyfikatora może posłużyć aplikacja Microsoft GUIDgen Przykładowy identyfikator ma postać: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
Instalacja Plik instal.rdf Microsoft GUIDGen
Instalacja Przykładowy plik instal.rdf <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>{xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}</em:id> <em:name>sample Extension</em:name> <em:version>1.0</em:version> <em:description>a sample extension with advanced features</em:description> <em:creator>your Name Here</em:creator> <em:targetapplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>0.9</em:minversion> <em:maxversion>1.0</em:maxversion> </Description </em:targetapplication> <em:file> <Description about="urn:mozilla:extension:file:sampleext.jar"> <em:package>content/</em:package> <!-- optional items --> <em:skin>skin/classic/</em:skin> <em:locale>locale/en-us/</em:locale> <em:locale>locale/ru-ru/</em:locale> </Description> </em:file> </Description> </RDF>
Instalacja Przykładowy plik instal.rdf - dodatki <!-- optional items --> <em:contributor>a person who helped you</em:contributor> <em:contributor>another one</em:contributor> <em:homepageurl>http://sampleextension.mozdev.org/</em:homepageurl> <em:optionsurl>chrome://sampleext/content/settings.xul</em:optionsurl> <em:abouturl>chrome://sampleext/content/about.xul</em:abouturl> <em:iconurl>chrome://sampleext/skin/mainicon.png</em:iconurl> <em:updateurl>http://sampleextension.mozdev.org/update.rdf</em:updateurl>
Chrome (1) Chrome zawiera części interfejsu użytkownika okna aplikacji, wyłączając te związane z zawartością Przykładami części Chrome a są paski narzędziowe, paski menu, paski postępu, nagłówki tytułowe okien etc Chrome Providers dostarczają elementy chrome a dla konkretnych typów okien. Wyróżniamy następujących Chrome Providerów: Content główny plik źródłowy pochodzi właśnie od tego providera i może to być dowolny plik widzialny dla Mozilli. Standardowo jest to plik XUL. Dostarcza on również plików JavaScript oraz XBL Locale lokalizowalne aplikacje trzymają tu wszystkie swoje informacje. Pozwala to translatorom na podłączenie różnych archiwów chrome, co pozwala na tłumaczenie rozszerzenia bez edycji kodu źródłowego. Dwa główne typy w jakich zapisywane są pliki do lokalizacji to DTD oraz właściwości oparte java-style Skin ten provider zapewnia kompletny zbiór plików, które opisują wygląd chrome a. Zazwyczaj są to pliki CSS oraz pliki obrazów
Chrome (2) Przykładowy plik about.xul <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window class="dialog title="hello, world! About orient="vertical autostretch="always" onload="sizetocontent() xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <groupbox align="center" orient="horizontal"> <vbox> <text value="hello, world!" style="font-weight: bold; font-size: x-large;"/> <text value="ver. 0.1"/> <separator class="thin"/> <text value="created By:" style="font-weight: bold;"/> <text value="eric Hamiter" class="url" onclick="window.open('http://extensions.roachfiend.com'); window.close();"/> <text value="home Page:" style="font-weight: bold;"/> <text value="http://extensions.roachfiend.com/" class="url" onclick="window.open('http://extensions.roachfiend.com/'); window.close();"/> </vbox> </groupbox> <hbox> <spacer flex="1"/> <button label="close" oncommand="window.close();"/> </hbox> </window>
Chrome (3) Przykładowy plik about.xul
Chrome (4) Przykładowy plik contents.rdf <?xml version="1.0"?> <RDF:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <RDF:Seq RDF:about="urn:mozilla:package:root"> <RDF:li RDF:resource="urn:mozilla:package:helloworld"/> </RDF:Seq> <RDF:Seq RDF:about="urn:mozilla:overlays"> <RDF:li RDF:resource="chrome://browser/content/browser.xul"/> <RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/> </RDF:Seq> <RDF:Seq RDF:about="chrome://browser/content/browser.xul"> <RDF:li>chrome://helloworld/content/helloworldOverlay.xul</RDF:li> </RDF:Seq> <RDF:Seq about="chrome://navigator/content/navigator.xul"> <RDF:li>chrome://helloworld/content/helloworldOverlay.xul</RDF:li> </RDF:Seq> <RDF:Description RDF:about="urn:mozilla:package:helloworld chrome:displayname="hello, world! 0.1" chrome:author="eric Hamiter" chrome:authorurl="mailto:ehamiter@gmail.com" chrome:name="helloworld" chrome:extension="true" chrome:description="displays an alert message via right-click or Tools menu."> </RDF:Description> </RDF:RDF>
Chrome (5) Przykładowy plik helloworldoverlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://helloworld/content/helloworldoverlay.js"> </script> <popup id="contentareacontextmenu"> <menuitem id="helloworld" label="hello, world!" accesskey="h" insertafter="context-stop" oncommand="hello();"/> </popup> <menupopup id="menu_toolspopup"> <menuitem insertafter="devtoolsseparator" label="hello, world!" accesskey="h" oncommand="hello();" /> </menupopup> </overlay>
Chrome (6) Najprostrzy przykład pliku JavaScript // This is our javascript, which will pop up our message // in an alert box. function hello() { } alert("hello, world!");
Skin Pliki Skin a definiują widgety zawarte w plikach XUL Pliki obrazów, pliki CSS oraz inne używane przy tworzeniu stron www Przykładowy plik CSS: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #searchfield { -moz-appearance: none; font: icon; width: 170px; height: 22px; border: none!important; padding: 4px 12px 0 33px; margin-right: 5px; margin-left: 5px; background: transparent url(chrome://simpledictionary/skin/searchicon.png) top left no-repeat; }
Narzędzia IDE: Eclipse Edytor: Eclipse Colorer, Infox, Macromedia Dreamweaver Narzędzie do tworzenia buildów: Ant Narzędzia wersjonowania: CVS,Subversion,RCS Narzędzie zarządzania projektem: Maven
Podsumowanie Rozszerzenia to ogromna zaleta przeglądarki Mozilli Wydatne zwiększenie funkcjonalności produktu Personalizacja przeglądarki Zwiększenie szybkości dostępu do informacji znajdujących się w internecie Ułatwienie korzystania z przeglądarki Open-source jako silnik rozwoju Bogata baza przykładowych rozszerzeń Przyszłość przeglądarek internetowych
Bibliografia MozillaZine.org Mozilla.org Mozdev.org Mozillapl.org Roachfiend.com - Eric Hamiter 2004-2005 XULPlanet.com Bolinfest.com - Michael Bolin BusinessLogs.com MozillaZine.org
Q&A
Dziękuję za uwagę