Firefox-Erweiterungen – Teil I: Einführung

browser-firefox-icon_cc-by-nc-nd_from_Royalflushxx
Der Firefox-Browser ist nicht zuletzt deshalb bei vielen beliebt, weil sein Funktionsumfang einfach mit sogenannten Erweiterungen vergrößert werden kann. Wie man selbst Erweiterungen für Firefox erstellen kann, wird in dieser Artikelreihe erklärt.

Zur Geschichte der Add-ons

Add-ons fügen neue Funktionen zu Mozilla-Anwendungen wie Firefox und Thunderbird hinzu. Zu den Add-ons gehören Themes, die das Aussehen der Anwendung verändern, Plug-ins wie Flash und Java, Suchmaschinen und die Erweiterungen (engl. Extensions).

Vor einigen Jahren war es noch so, dass die Erweiterungen mit Hilfe von JavaScript [3], CSS [4] und XUL [5], einer XML-basierten Beschreibungssprache, in der die Benutzeroberfläche von Firefox geschrieben ist, erstellt wurden. Dies hatte den Vorteil, dass den Entwicklern keine Grenzen bei der Entwicklung gesetzt waren und sehr komplexe Erweiterungen entstehen konnten. Es hat aber den Nachteil, dass ein Neustart des Browsers erforderlich ist, um die Erweiterung nutzen zu können. Außerdem ist der Einstieg in die Entwicklung nicht sehr einfach möglich, da die Mozilla-eigene Auszeichnungssprache XUL beherrscht werden muss.

Um die Entwicklung der Erweiterungen zu Vereinfachen und dabei gleich den Neustart-Zwang abzuschaffen, hat Mozilla 2011 das Jetpack-Projekt [6] ins Leben gerufen. Ergebnis des Projekts sind der Add-on-Builder und das Add-on-SDK [7], die es erlauben, Erweiterungen unter Benutzung der Webtechnologien JavaScript, CSS und HTML [8] zu schreiben. Im selben Jahr wurde auch das Bootstrapping [9] eingeführt, das es auch klassischen Erweiterungen ermöglicht, ohne Neustart installiert zu werden.

Der Add-on-Builder ist eine Entwicklungsumgebung, die direkt in Firefox ausgeführt wird. Der Quellcode wird bei Mozilla gespeichert. Zur Nutzung ist ein Benutzerkonto erforderlich und natürlich auch eine Internetverbindung. Das Add-on-SDK (Software Development Kit, auf Deutsch etwa „Werkzeugsammlung zur Softwareentwicklung“) kann auch ohne Internetverbindung benutzt werden, der Quellcode ist lokal gespeichert und man kann jeden beliebigen Texteditor zum Schreiben des Quelltextes verwenden.

In dieser Artikelreihe wird das Add-on-SDK verwendet. Wer am Add-on-Builder interessiert ist, findet im How-To von Sören Hentzschel [10] ausführliche Informationen.

Einrichten des Add-on-SDK

Um das Add-on-SDK nutzen zu können, müssen (selbstverständlich) Firefox und Python [11] installiert sein. Letzteres gehört bei den meisten Linux-Distributionen zum Standardinstallationsumfang, ansonsten kann es über die Paketverwaltung nachinstalliert werden. Das SDK kann von der Add-on-SDK-Seite [12] über den Link „tarball“ [13]heruntergeladen werden.

Die heruntergeladene Datei kann an einem beliebigen Ort entpackt werden, entweder in einem Dateimanager über Rechtsklick und „Archiv hierher auspacken“ oder in einer Konsole über

1
tar -xf addon-sdk.tar.gz

Anschließend wechselt man in einer Bash (die Shell ist wichtig, da das „einsourcen“ sonst nicht funktioniert) mit dem cd-Befehl in das Verzeichnis mit den entpackten Daten und führt

1
source bin/activate

aus. Wenn alles funktioniert hat, wird man von dem SDK begrüßt und ein (addon-sdk-1.12) vor dem Benutzernamen zeigt an, dass das SDK geladen ist und verwendet werden kann.

ffox_addonsdk_installation.png

Das SDK wurde entpackt, installiert und eine leere Erweiterung wurde erstellt.

Erstellen und Ausführen der ersten Erweiterung

Nun kann es an die eigentliche Arbeit gehen. Zunächst ist es sinnvoll, einen eigenen Ordner für die Erweiterung anzulegen. Dann wechselt man in der Konsole in diesen Ordner und führt den Befehl

1
cfx init

aus. Dieser erstellt das Grundgerüst der Erweiterung. Mit dem Befehl

1
cfx run

kann die Erweiterung getestet werden. Wird dieser Befehl zum ersten Mal ausgeführt, wird zunächst eine ID für die Erweiterung erstellt.

Jetzt sollte man die Datei package.json [14] bearbeiten. Diese enthält standardmäßig den Namen der Erweiterung und des Autors, eine kurze Beschreibung, die Lizenz, die Versionsnummer und die automatisch generierte ID. Die bearbeitete Datei könnte dann so aussehen:

1
2
3
4
5
6
7
8
9
{
"name": "meine-erweiterung",
"license": "GPL 3.0",
"author": "Markus Brenneis",
"version": "0.1",
"fullName": "Meine Erweiterung",
"id": "jid1-RSMHU8JbD6sBDA",
"description": "Eine Beispiel-Erweiterung"
}

Führt man

1
cfx run

ein zweites Mal aus, öffnet sich ein Firefox-Fenster. Dabei wird nicht das Standardprofil [15] von Firefox verwendet, sondern ein leeres Profil. Das hat den Vorteil, dass man sich damit sein Standardprofil nicht beschädigen und die Erweiterung mit den Standardeinstellungen von Firefox testen kann.

Da noch keinerlei Funktionen implementiert wurden, sieht man von der Erweiterung auf den ersten Blick nichts. Nur im Add-ons-Manager („Extras -> Add-ons“) in der Kategorie „Erweiterungen“ erkennt man, dass die Erweiterung installiert ist. Das soll sich nun ändern.

Ein kleines Symbol

Der Hauptcode der Erweiterung befindet sich in der Datei main.js im Ordner lib. Um z. B. ein Symbol in der Add-on-Leiste [16] anzuzeigen, fügt man folgenden Code in die Datei ein:

1
2
3
4
5
6
7
var widgets = require("widget");

var widget = widgets.Widget({
id: 'wikipedia-icon',
label: 'Wikipedia',
content: '<b style="font-family:Times">W</b>'
});

In der ersten Zeile wird das Modul widget [17] geladen, das es erlaubt, Inhalte zur Add-on-Leiste hinzuzufügen. Anschließend wird ein Widget erstellt, welches die IDwikipedia-icon, die Beschriftung Wikipedia und den Inhalt <b style="font-family:Times">W</b> hat. Wie man sieht, darf der Inhalt, der in der Add-on-Leiste erscheint, HTML-Code enthalten. Die Beschriftung wird als Tooltip [18] verwendet.

ffox_addonsdk_wikipedia_icon.png

Ein „W“ wird unten rechts auf der Add-on-Leiste angezeigt.
 

Testet man nun den Code mit

1
cfx run

erscheint unten rechts im Firefox-Fenster ein „W“.

Ausblick

Die Erweiterung kann bisher noch nichts Spektakuläres, das soll sich aber noch ändern. Im nächsten Teil der Reihe soll es möglich sein, den auf einer Seite markierten Begriff in Wikipedia nachzuschlagen.

Der Artikel Firefox-Erweiterungen mit dem Add-on-SDK erstellen – Teil I: Einführung von Markus Brenneis, erschienen bei freiesMagazin unterliegt der CC-BY-SA-3.0 Unportted. Es wird die Erlaubnis gewährt, den Artikel unter den Bestimmungen der Creative-Commons-Lizenz zu kopieren, zu verteilen und/oder zu modifizieren.