Firefox lässt sich mit allerhand Zubehör aufrüsten. Wer selbst eine Extension schreiben möchte, benötigt Kenntnisse in XML und Javascript und muss sich mit der Architektur des Browsers vertraut machen. Dieser Artikel erklärt die Grundlagen der Extension-Entwicklung und stellt nützliche Werkzeuge vor.

Seine Beliebtheit verdankt der Firefox-Browser unter anderem seiner reichen Auswahl an Zubehör. Die Website [http://addons.mozilla.org] verzeichnet über 2000 Erweiterungen (Extensions), vom Werbeblocker bis zum Web-Notizbuch Scrapbook (siehe Artikel “Wissensspeicher” in dieser Ausgabe).

XML und Javascript

Der Open-Source-Browser zeigt sich für Eigenentwicklungen sehr offen, für eine Firefox-Extension muss der ambitionierte Entwickler nicht einmal zum Compiler greifen: Die meisten Erweiterungen bestehen ausschließlich aus XML und Javascript. Da Firefox zudem einen Installationsmechanismus für Extension-Pakete mitbringt, lassen sich Anpassungen des Browsers am leichtesten als Extensions entwickeln und verteilen, etwa wie es die Stadt München mit einer Usability-Nachbesserung gemacht hat (siehe Kasten “Münchner Kindl”).

Das Mozilla-Projekt hat eine Architektur gewählt, die Anpassungen begünstigt: Die gesamte Benutzeroberfläche des Browsers, Chrome genannt, ist in der XML User Interface Language (XUL) geschrieben. Die Datei »browser.xul« beispielsweise bestimmt das Aussehen des gesamten Browserfensters, abzüglich der enthaltenen Webseite und der Dekorationen des Fenstermanagers. Der Browser lädt die Datei beim Starten als Jar-Archiv aus dem »chrome«-Verzeichnis der Firefox-Installation. Der Browser besitzt ein eigenes System, um XUL-Dateien zu adressieren, die so genannten Chrome-URLs, zum Beispiel »chrome://browser/content/browser.xul«.

XUL kommt auch in anderen Anwendungen zur Beschreibung der Benutzeroberfläche zum Einsatz, zum Beispiel in der proprietären Entwicklungsumgebung Komodo der Firma Active State [1]. Das Listing 1 vermittelt einen Eindruck von der XUL-Syntax, Abbildung 1 zeigt das Resultat, das allerdings noch ohne Funktion ist. Eine praktische Einführung in die Sprache gibt ein Tutorial auf der Website Xulplanet [2].

01 <?xml version="1.0"?>
02 <?xml-stylesheet href="" type="text/css"?>
03 <window id="mywindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
04 <radiogroup id="mygroup">
05   <radio id="linux" selected="true" label="Linux"/>
06   <radio id="windows" label="Windows"/>
07   <radio id="macosx" label="Mac OS X"/>
08 </radiogroup>
09 <button id="mybutton" label="OK"/>
10 </window>

Abbildung 1: Aus dem XUL-Code in Listing

Die GUI-Elemente von Erweiterungen bindet Firefox als so genannte Overlays ein: Der Browser verwaltet seine Oberfläche im Document Object Model (DOM) und fügt dieser Baumstruktur beim Programmstart die Elemente aus den XUL-Dateien der installierten Extensions hinzu. Über DOM spricht auch der Entwickler die Elemente per Javascript an, das die Programmlogik einer Firefox-Erweiterung enthält. So kann er die Oberfläche manipulieren oder mit Event-Handlern wie »oncommand« auf die Aktionen des Benutzers reagieren.

Wie anfangen?

Was in der Theorie logisch klingt, stellt den Extension-Neuling in der Praxis dennoch vor Probleme. Firefox verwendet zwar bekannte Technologien aus der XML-Welt und des Web-Scripting, der funktionsreiche Browser ist aber ein komplexes Gebilde, in dem man sich nicht sofort zurechtfindet.

Da die ersten Versuche zum Teil mit einem kaputten Browserprofil enden, empfiehlt es sich unbedingt, im Homeverzeichnis eine eigene Firefox-Installation für das Entwickeln einzurichten und ihr mit »./firefox -ProfileManager« ein eigenes Profil zuzuweisen.

Zum Glück bietet die rege Firefox-Community Tutorials ([3], [4]) an, die eine Extension Schritt für Schritt entwickeln und dabei die grundlegenden Technologien erläutern. Vor allem liefern sie die Beispiel-Erweiterung als gezipptes Archiv mit, das dem installierbaren Paketformat XPI (Cross Plattform Installer) folgt – diese Struktur kann kein Neuling von Grund auf selbst erstellen.

Generator im Web

Eine weitere Möglichkeit, schnell zum Rumpf einer eigenen Extension zu gelangen, ist Ted Mielczareks Extension Wizard [5]. Das Webformular nimmt die Beschreibung und die gewünschten GUI-Elemente für die Extension entgegen (Abbildung 2) und spuckt eine einfache Hello-World-Anwendung als fertiges Zip-Archiv aus.

Abbildung 2: Ted Mielczareks Extension Wizard erstellt online den Grundstock für die selbst gemachte Erweiterung. Ein Build-Skript zum späteren Einpacken ins installierbare XPI-Format liefert er gleich mit.

Dabei erhält die Erweiterung einen Kurznamen, der später zum Dateinamen für die XPI-Datei wird, sowie eine ID, über die der Browser die Extension identifiziert. Dieser Identifikator war in früheren Versionen eine lange Zahl, für Firefox 1.5 und 2.0 hat sie die Form einer E-Mail-Adresse, unter der der Entwickler erreichbar ist. Wer mehrere Extensions entwickelt, muss allerdings für jede eine neue Adresse vergeben.

Auspacken und bearbeiten

Die Erweiterungen lassen sich nicht nur als XPI-Archiv installieren, sondern zum Entwickeln auch im ausgepackten Zustand in den Browser einbinden. Dazu gibt es zwei Möglichkeiten: Der Browser-Bastler kopiert entweder das komplette Verzeichnis seiner Extension ins Verzeichnis »~/.mozilla/firefox/Profilname/extensions/« oder – eleganter – er teilt Firefox mit, wo dieser die Erweiterung finden kann. Dazu erstellt er im Extensions-Verzeichnis eine Datei, die als Namen die identifizierende E-Mail-Adresse erhält, zum Beispiel »lmext1@linuxnewmedia.de«.

Darin gibt er den Pfad zu seiner Erweiterung an, etwa »/home/testuser/entwicklung/lmext1/«. Nach einem Browser-Neustart ist unter dem Menüpunkt »Extras | Add-ons« zu sehen, ob Firefox die Erweiterung akzeptiert hat.

Abbildung 3 zeigt die Struktur der entpackten Extension. Auf der obersten Ebene der Verzeichnishierarchie befindet sich die Datei »install.rdf«. Sie enthält Meta-Informationen für den Extension-Installer des Browsers, beispielsweise Name, ID und Autor des Pakets. Daneben gibt sie an, für welche Firefox-Versionen die Erweiterung geeignet ist und von welcher URL der Installer Aktualisierungen herunterladen soll.

Abbildung 3: Beim Entwickeln liegt eine Firefox-Extension unkomprimiert als Verzeichnishierarchie auf der Festplatte.

01 <script src="overlay.js"/>
02 
03 [...]
04 
05 <menupopup id="menu_ToolsPopup">
06     <menuitem id="lmext1-hello" label="&lmext1.label;"
07      oncommand="lmext1.onMenuItemCommand(event);"/>
08 </menupopup>

Abbildung 4: Per Overlay kommt ein neuer Punkt ins Menü.

Drübergelegt

Die Datei »chrome.manifest« enthält Pfade zu den Komponenten des Pakets. Am wichtigsten ist hier die Overlay-Anweisung, die dem Browser mitteilt, dass er die Datei »lmext1/content/firefoxOverlay.xul« mit der Standard-XUL-Datei des Browsers verschmelzen soll:

overlay chrome://browser/content/browser.xul chrome://lmext1/content/firefoxOverlay.xul

Die Datei »firefoxOverlay.xul« (Listing 2) fügt einem Ausklapp-Menü (»menupopup«) einen Menüpunkt (»menuitem«) als neuen DOM-Knoten hinzu. Es handelt sich um das Ausklapp-Menü mit der ID »menu_ToolsPopup«, das standardmäßig zu Firefox gehört (Abbildung 4). In der deutsch lokalisierten Version des Browsers taucht es mit der Beschriftung »Extras« auf der Oberfläche auf, was an der ID des XML-Knotens aber nichts ändert. Um solche GUI-Elemente auf der Oberfläche wiederzufinden, ist die Extension DOM-Inspector ein unverzichtbares Tool. Firefox 1.5 und 2.0 liefern sie standardmäßig mit. Dank dieses Werkzeugs findet der Entwickler Knoten im DOM-Baum der XUL-Oberfläche, beispielsweise indem er die Elemente mit der Maus anklickt. Der Inspector zeigt dann den entsprechenden XML-Knoten ausgeklappt an.

Suche nach dem Knoten

Zudem lässt sich das Document Object Model auch durchsuchen. Eine Suche nach der ID »menu_ToolsPopup« fördert das Menü aus diesem Beispiel zutage (Abbildung 5). Sucht der Entwickler nach dem Kurznamen der eigenen Extension, findet er deren GUI-Elemente. Der Inspector hebt sie auf Wunsch mit einem rot blinkenden Rahmen auf der Oberfläche hervor.

Abbildung 5: Mit dem DOM-Inspector findet der Entwickler den gesuchten XML-Knoten im weitläufigen Document Object Model des Browsers

Der neu eingefügte Menüpunkt erhält ebenfalls eine ID. Das Attribut »label« ist für die Beschriftung zuständig. Statt Klartext setzen die meisten Entwickler hier XML-Entities wie zum Beispiel »&lmext1.label;« ein, um ihre Extensions in mehreren Sprachen lokalisierbar zu machen. Die DTD-Dateien im »locale«-Verzeichnis (Abbildung 3) lösen diese Entities in Klartext auf.

Dabei wählt der Browser nach der vom Benutzer eingestellten Locale das passende Verzeichnis, etwa »de-de/«. Dort befinden sich für weitere Strings auch Javascript-Property-Dateien. Solche Dateien, jedoch im Verzeichnis »preferences« speichern auch Einstellungen für die Extension.

Der Event-Handler »oncommand« sorgt dafür, dass etwas passiert, wenn der Benutzer den Menüpunkt auswählt. Er ruft eine Funktion aus der Javascript-Datei »overlay.js« auf, die weiter oben in der XUL-Datei eingebunden ist. Im Beispiel aus Teds Generator ist das nur ein banaler “Hello World”-Alert, aber im Prinzip ist hier alles machbar, was Javascript hergibt – auch mit dem Objekt »XMLHttpRequest()« Informationen aus dem Web holen und weiterverarbeiten. Beim Debuggen der Skripte hilft die in Firefox eingebaute Javascript-Konsole, ein vollständiger Debugger ist die Venkman-Extension [6], die Breakpoints und den Einzelschritt-Modus unterstützt.

Einpacken

Ist die Extension programmiert und getestet, geht es ans Paketieren als installierbare XPI-Datei. Dabei werden die XUL- und Javascript-Dateien in ein Jar-Archiv gepackt, die Pfade in »chrome.manifest« und »install.rdf« angepasst. Danach komprimiert man das gesamte Verzeichnis der Extension zu einem Zip-Archiv mit der Endung XPI, das sich unter allen Betriebssystemen in Firefox laden und installieren lässt. Eine mühselige Arbeit, die am besten ein Skript übernimmt. Glücklicherweise liefert Ted Mielczareks Generator [5] auch das Bash-Skript »build.sh« mit, das genau diese Aufgabe erledigt. Die Konfiguration erfolgt in »config_build.sh«, das sinnvolle Grundeinstellungen enthält.

Entwickler-Extension

Ted gibt dem Firefox-Enthusiasten noch ein weiteres Werkzeug an die Hand: In seiner Developer’s Extension [7] hat er zahlreiche Helferlein zusammengefasst (Abbildung 6). Dazu gehören ein alternatives Build-Werkzeug mit einem Editor für die RDF-Datei, eine Javascript-Shell und ein einfacher XUL-Editor mit Vorschau in Echtzeit.

Abbildung 6: Ein gut gefüllter Werkzeugkasten: Die Developer’s Extension nimmt dem Firefox-Bastler viele Handgriffe ab.

Daneben kann das Entwicklerwerkzeug sinnvolle Javascript-Einstellungen fürs Debugging setzen und erspart es dem Programmierer mit der Funktion »Reload all Chrome«, den Browser nach jeder Änderung an XUL-Dateien neu zu starten. Weitere Unterstützung finden Firefox-Bastler in einer Newsgroup [8] des Mozilla-Projekts. Zudem tummeln sich in einem eigenen IRC-Channel hilfsbereite Extension-Entwickler, die über die ersten Hürden hinweghelfen. Die Website Mozilla Developer Center [10] befindet sich derzeit zwar offiziell noch in der Betaphase, versammelt trotzdem aber bereits jetzt eine Menge an Tutorials und Dokumentation.