Open Source im professionellen Einsatz

Firefox-Extensions selbst entwickeln

Rangeschraubt

Mathias Huber

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").

Münchner Kindl

Das Linux-Team der Münchner Stadtverwaltung, die ihre PC-Arbeitsplätze derzeit auf Linux und KDE umstellt, hatte ein Usability-Problem zu lösen: Will der kommunale Linux-Anwender aus Firefox oder Thunderbird drucken, erscheint zunächst der Druckdialog der Anwendung, danach erst Kprinter. Für Umsteiger von Windows ist das weder nachvollziehbar noch besonders attraktiv. Eine Mozilla-Extension sorgte für Abhilfe.

Florian Schießl vom städtischen Projekt Limux berichtet über seine Erfahrungen bei der Bewältigung des Problems: "Wir sind bei eigenen Versuchen, dies im Quellcode zu erreichen, nicht weitergekommen und haben mittels Problemschilderung und Nachfrage im IRC Kontakt zu dem Entwickler Mike Hokenson bekommen. Er vertrat die Ansicht, das ginge mit einer Erweiterung schnell und einfach und hat das auch gleich in der Autoprint-Extension [11] umgesetzt. Im Grunde klickt diese Extension den originären Druckdialog einfach weiter. Der Ausdruck erfolgt dadurch auf dem eingestellten Standarddrucker, in unserem Falle Kprinter. Der Endbenutzer bekommt also nur den Standard-Druckdialog von KDE zu sehen."

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].

Listing 1: Einfaches XUL-Beispiel

01 <?xml version="1.0"?>
02 <?xml-stylesheet href="chrome://global/skin/" 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.