Technologie

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, CrossPlatform 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">
<!-- tu wstawiamy zawartość, własności, metody i
opisy zdarzeń -->
</binding>
<binding id="binding2">
<!-- tu wstawiamy zawartość, własności, metody i
opisy zdarzeń -->
</binding>
</bindings>
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:[email protected]"
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ę