Agon Newsletter Ausgabe 02 / 2011.

Zurück

Addons für Firefox 4 jetzt auch mit JavaScript (mit Beispiel)

Die Entwickler des quelloffenen Internet-Browsers Firefox haben im Juni die Version 1.0 ihrer neuen SDK für Addons veröffentlicht. Was die neue SDK-Version mit dem Namen ‚Jetpack' so interessant macht: die Addons können jetzt allein auf Basis von leichtgewichtigen und offenen Web-Technologien wie JavaScript, HTML und CSS entwickelt werden. Damit hält die populäre und dynamische Scriptsprache JavaScript auch Einzug in die Addon-Entwicklung, was ihre Popularität noch weiter steigern dürfte. Addons sind kleine Programme, die man als Plugin in den Firefox einhängen kann, und die verschiedenste Aktionen ausführen können. Eine typische Aufgabe für ein Addon ist z.B. das Abblocken von Werbebannern oder das Filtern bestimmter Seiteninhalte.

Der interessierte Plugin-Entwickler kann sich das neue SDK direkt von der Website bei Mozilla herunterladen (https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/addon-sdk-latest.zip ). Firefox selbst muss, minimal in der Version 4.0 bereits installiert sein. Darüber hinaus setzt das SDK eine lauffähige Python-Installation ab Version 2.5 voraus. Weitere Eingriffe am Rechner sind nicht notwendig, so dass man nach ca. 10 Minuten mit der Entwicklung beginnen kann. Das SDK stellt eine umfangreiche JavaScript-API zur Verfügung, deren Dokumentation nach Eingabe von cfx docs im lokalen Browser erscheint. Hier finden sich u.a. Funktionen, um Widgets zu erstellen, das Kontextmenü zu manipulieren, mit Tabs und Fenstern zu arbeiten und Request im Internet abzusetzen.

Als Beispiel wollen wir ein Plugin entwickeln, mit dem man bestimmte Website bequem aus der Statuszeile des Browsers aufrufen kann. Dazu soll das Plugin ein Icon in die Statuszeile integrieren, das bei einem Mausklick ein kleines Fenster öffnet, das Symbole der betreffenden Websites anzeige. Beim Mausklick auf eines der Symbole wird die jeweilige Website in einem neuen Tab des Browsers gestartet. In unserem Fall wählen wir die Agon Solutions Homepage (http://www.agon-solutions.de ) und die Startseite des Agon Wiki als Webseiten aus.

Zunächst legt man ein neues, noch leeres Verzeichnis im SDK-Verzeichnis an. Wir nennen es agon-sites. Durch den Befehl cfx init wird die vollständige Dateistruktur des Addons in diesem Verzeichnis angelegt. Im Unterverzeichnis Lib findet man die Datei main.js, also ein JavaScript Datei. Hier befindet sich die Funktion main(), die durch Firefox aufgerufen wird, sobald das Plugin geladen wird. Dies ist also auch der geeignete Platz, um unsere Funktionalität zu implementieren. Wir schreiben folgendes:

var agon_panel = require("panel").Panel({
width: 205,
height: 176,
contentScriptFile: [data.url("jquery-1.4.4.min.js"),
data.url("intercept.js")],
contentURL: data.url('agon-panel.html')
});

var agon_icon = widgets.Widget({
id: "agon-icon",
label: "Agon Sites",
contentURL: data.url("swoosh.jpg"),
panel: agon_panel
});

Diese Codezeilen definieren zunächst ein Panel (also ein kleines Fenster) und anschließend ein Icon. Panel wird mit Hilfe des Attributes panel an das Icon gebunden, was dazu führt, dass bei einem Klick auf das Icon das Panel sichtbar wird. Die Konfiguration des Panels enthält zwei JavaScript-Dateien und eine HTML Datei. Diese müssen sich im Unterverzeichnis Data befinden, zusammen mit allen anderen benötigten Dateien (z.B. Bildern oder Icons). Insgesamt stellt sich die Dateistruktur so dar:

 Die Inhalte der erwähnten HTML Datei werden beim Öffenen des Panels angezeigt. Es handelt sich im Wesentlichen um zwei IMG Elemente, die wiederum durch ANCHOR Elemente umgeben sind. Die JavaScript Datei verwendet jQuery, um bei einem Klick auf eines der Images die referenzierte URL auszulesen und mit einem Event weiterzugeben:

$(window).click(function (event) {
var t = event.target;
event.stopPropagation();
event.preventDefault();
if (t.nodeName == "A") {
self.port.emit('click', t.toString() );
} else if (t.nodeName == "IMG") {
self.port.emit('click', $(t).attr('href') );
} else {
self.port.emit('click', "" );
}
});

In unserer Main Funktion müssen wir jetzt noch einen Event-Handler schreiben, der die URL ausliest, in einem neuen Tab öffnet und das Panel wieder schließt.

agon_panel.port.on("click", function(url) {
console.log(url);
if (url != "") {
require("tabs").open(url);
}
agon_panel.hide();
});

Im SDK können wir jetzt das fertige Addon bereits testen. Mit einem Aufruf von cfx run startet eine neue Instanz des Firefox mit unserem Addon. Das sieht dann so aus:

Um das Addon an andere Personen weiterzugeben, muss noch in eine XPI-Datei verpackt werden. Das geschieht mit dem Befehl cfx xpi. Die XPI Datei und der Quelltext des Addons liegen dem Artikel bei. Nicht vergessen: das Addon funktioniert in dieser Form nur im Firefox 4 oder höher.

Das neue SDK macht die Addon-Entwicklung schon jetzt einfacher und schneller. Für die folgenden Releases des SDK in Q3 und Q4 sind Migrationsunterstützung für alte Addons und Support für Mobile Browser geplant. Es steht zu erwarten, dass sowohl JavaScript als auch die Addon-Gemeinde dadurch einen weiteren Produktivitätsschub erhalten werden. JavaScript ist neuerdings allerorten: in mobilen Webanwendungen, in RIA-Frameworks und in Google Gadgets. Insgesamt ist JavaScript auf dem Weg, sich als die Lingua Franca des Internet zu etablieren. Und wer weiß, vielleicht wird sie bald noch an ganz anderer Stelle gebraucht?