Firefox-Erweiterungen mit dem Add-on-SDK erstellen – Teil V
In Teil IV der Reihe ging es um das Anlegen von Einstellungen und Übersetzungen. Dieses Mal wird anhand einer Sidebar-Bibliothek erklärt, wie man Module benutzen kann, die von der Community bereitgestellt werden.
Finden von zusätzlichen Bibliotheken
Die vom SDK bereitgestellten Module bieten nicht immer alle Funktionen an, die man für sein Add-on benötigt. Zum Beispiel gibt es zurzeit (Stand Juni 2013, es wird momentan daran gearbeitet) kein »sidebar«-Modul, mit dem man den abgerufenen Wikipedia-Artikel statt in einem Panel in einer Sidebar anzeigen könnte.
Es gibt aber die einfache Möglichkeit, in einem Add-on Module zu verwenden, die von anderen Entwicklern unabhängig vom SDK entwickelt wurden. Diese Module findet man beispielsweise im SDK-Wiki und auf der Website des Add-on-Builders; letztere Seite hat den Vorteil, dass die Module nicht nur als Quellcode zur Verfügung stehen, sondern auch direkt als fertig gepackte Bibliotheken heruntergeladen werden können.
Sucht man nun auf dieser Seite nach dem Begriff »sidebar«, stößt man schnell auf die sidebar-Bibliothek des Benutzers »dandonkulous«. Diese kann einfach durch einen Klick auf das Symbol (»Quelltext herunterladen«) auf den eigenen Rechner befördert werden.
Einbinden der Bibliothek
Um die Bibliothek nutzen zu können, muss diese zunächst entpackt werden (z.B. im Dateiverwaltungsprogramm durch Rechtsklick und oder ähnlich). Man erhält dann eine Ordnerstruktur, die der eines normal SDK-basierten Add-ons entspricht. Die Datei package.json enthält Informationen zu Autor, Version, Lizenz usw. und im Ordner lib befindet sich der eigentliche Code. Bei dieser einfachen Bibliothek befindet sich in diesem Ordner nur eine einzige Datei, die einfach in den lib-Ordner der Beispielerweiterung kopiert werden kann. Dabei sollte man der Datei einen sprechenderen Namen als index.js geben, z.B. sidebar.js.
Um später noch zu wissen, wo die Datei sidebar.js herkommt und wer sie erstellt hat, sollte diese am Dateianfang um einen Kommentar ergänzt werden, in dem auf die Bibliothek mit Name, Version, Autor und Lizenz verwiesen wird. Dazu kann man den Inhalt der Datei package.js der Bibliothek als Kommentar an den Anfang setzen.
Um die Bibliothek verwenden zu können, muss diese wie jedes normale SDK-Modul auch mit »require« eingebunden werden:
var sidebars = require("./sidebar")
Das ./ steht dabei für das Verzeichnis, in dem sich main.js befindet. Damit wird das SDK angewiesen, das Modul »sidebar« zuerst im lib-Ordner zu suchen und nicht erst nach einem SDK-eigenen Modul mit diesem Namen zu suchen.
Anlegen einer Sidebar
Ein großer Nachteil der zusätzlichen Bibliotheken kann sein, dass diesen keine Dokumentation beigelegt ist, sodass man sich selbst – ggf. unter Zuhilfenahme des Quelltextes – erschließen muss, wie das neue Modul verwendet wird. So ist es leider auch bei diesem Beispiel.
Bindet man ein Modul ein, so hat man auf alle Funktionen Zugriff, die in seinem Quelltext mit »exports.« gekennzeichnet sind. Im Falle von »sidebar« ist dies eine Funktion »sidebar«, die den gesamten Quelltext umfasst und offensichtlich das Objekt »sidebars« zurückliefert, das eine Eigenschaft »instances« hat. Der Funktion werden »options« übergeben. Sucht man im Quelltext nach »options«, stößt man unter anderem auf sidebar.options.url. Die Eigenschaft »url« kann offensichtlich dafür verwendet werden, in der Sidebar eine URL zu laden.
){kind=small}
Markus Brenneis
Die angelegte Sidebar mit dem gewünschten Wikipedia-Artikel
var sidebar = sidebars.sidebar ({
url: "http://de.m.wikipedia.org/w/index.php?search=42+(Antwort)"
});
Ein Test mit cfx run führt zwar nicht zu einer Fehlermeldung (das ist schon mal ein gutes Zeichen), aber es wird keine Sidebar angezeigt. Vermutlich ist die Sidebar – genauso wie ein frisch angelegtes Panel – einfach unsichtbar und muss zunächst mit einem Aufruf von show sichtbar gemacht werden. In der Datei sidebar.js gibt es eine Funktion show, sodass die erste Sidebarinstanz wie folgt angezeigt werden kann:
sidebar.instances[0].show();
Fügt man diese Zeile direkt hinter der Deklaration von sidebar ein und testet den Code, wird der angegebene Artikel in einer Sidebar geladen.
Einen kleinen Makel gibt es noch: Die Sidebar ist etwas zu schmal für den Inhalt. Die Sidebar selbst hat zwar keine Eigenschaft width, aber der enthaltene Container vbox könnte diese besitzen.
sidebar.instances[0].vbox.width=300;
Ein kurzer Test zeigt, dass der Code funktioniert.
