Workshops::Firefox-Erweiterungen mit dem Add-on-SDK erstellen

Firefox-Erweiterungen mit dem Add-on-SDK erstellen – Teil III

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.

Von gulp21

Im letzten Teil ging es darum, wie die aktuelle Auswahl festgestellt werden kann und der passende Wikipedia-Artikel in einem neuem Tab geöffnet wird. Jetzt soll es alternativ möglich sein, den Artikel in einem Panel anzuzeigen.

Erstellen von Panels

Ein Panel ist ein kleiner Dialog, dessen Inhalt mit HTML, CSS und Javascript erstellt wird. Nach dem Einbinden des Moduls panel wird ein Panel wie folgt deklariert:

var panels = require("panel");
var self = require("self");

var panel = panels.Panel ({
  contentURL: self.data.url("panel.html")
});

Der Inhalt des Panels steht in der Datei panel.html (der Dateiname kann beliebig gewählt werden). Diese Datei muss im data-Ordner der Erweiterung angelegt werden und kann mithilfe des Moduls self gefunden werden. Eine einfache Datei, die die Hauptseite der mobilen Wikipedia anzeigt, könnte so aussehen:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="panel.css" />
</head>
<body>
<iframe id="article" src="http://de.m.wikipedia.org"/>
</body> 
</html>

Hinweis:: Man kann http://de.m.wikipedia.org auch direkt als contentURL angeben, der Umweg über panel.html ist aber für spätere Zusatzfunktionen notwendig.

Damit der iframe, in dem der Artikel angezeigt wird, auch den gesamten Platz im Panel ausnutzt, werden ein paar Stileigenschaften in der Datei panel.css, die ebenfalls im Ordner data abgelegt ist, festgelegt:

body {
  height: 100%;
  width: 100%;
  background: white;
}
iframe {
  border: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

Um das Panel anzuzeigen, wenn auf das »W«-Symbol geklickt wird, muss die panel-Eigenschaft des Widgets gesetzt werden:

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

Damit auf die Variable panel zugegriffen werden kann, muss dieser Codeblock hinter der Deklaration von panel stehen. Außerdem wird eine andere onClick-Funktion aufgerufen, denn der Artikel soll nicht mehr in einem neuem Tab erscheinen, sondern im Panel.

Die Startseite der mobilen Wikipedia in einem Panel

Markus Brenneis

Die Startseite der mobilen Wikipedia in einem Panel

Laden des Artikels

Jetzt muss diese Funktion angelegt werden. Wie bereits im letzten Artikel erwähnt, kommunizieren die unterschiedlichen Teile der Erweiterung (und des Browsers) über Content-Skripte miteinander. Um dem Panel mitzuteilen, welcher Artikel angezeigt werden soll, wird auch ein Content-Skript verwendet.

Der Code befindet sich in der Datei panel.js, die wieder im data-Verzeichnis abgelegt wird, und wird mit der Eigenschaft contentScriptFile dem Panel zugeordnet:

var panel = panels.Panel ({
  contentURL: self.data.url("panel.html"),
  contentScriptFile: self.data.url("panel.js")
});

Der markierte Begriff »Mozilla Public License« wurde in Wikipedia nachgeschlagen

Markus Brenneis

Der markierte Begriff »Mozilla Public License« wurde in Wikipedia nachgeschlagen

Das Skript enthält folgenden Code:

self.port.on("loadPage", function(page) {
  document.getElementById("article").src=page;
});

Die Kommunikation läuft über das globale port-Objekt. Wenn das Panel ein Ereignis mit dem Namen loadPage erhält, setzt es die src-Eigenschaft des iframes article auf den Wert des Parameters page.

Die Funktion openArticleInPanel muss nun ein solches Ereignis mit panel.port.emit auslösen:

function openArticleInPanel() {
  panel.port.emit("loadPage", "http://de.m.wikipedia.org/w/index.php?search=" + 
selectedText);
}

Ein Test mit cfx run zeigt, dass diese Implementierung bereits sehr gut funktioniert.