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

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

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 Artikel der Reihe wurde gezeigt, wie Panels angelegt werden und wie die Kommunikation über Content-Skripte funktioniert. In diesem Teil soll es nun darum gehen, wie man es dem Benutzer ermöglicht, Einstellungen zu ändern, und wie die Erweiterung in verschiedene Sprachen übersetzt werden kann.

Anlegen von Einstellungen

Das SDK bietet mit dem Modul simple-prefs ein einfaches Mittel an, mit dem man es dem Benutzer ermöglichen kann, Einstellungen der Erweiterung zu ändern. Um beispielsweise eine Checkbox anzulegen, die es dem Benutzer erlauben soll, die Anzeige des Artikels in einem Panel zu deaktivieren, fügt man folgenden Code in die Datei package.json ein:

"preferences": [{
    "name": "use_panel",
    "title": "Panel benutzen",
    "description": "Den Artikelanfang in einem Panel anzeigen, statt die Seite in einem Tab zu laden",
    "type": "bool",
    "value": true
}]

Die Einstellungen der Erweiterung mit einer Checkbox, einem Textfeld und einer Dropdown-Liste

Markus Brenneis

Die Einstellungen der Erweiterung mit einer Checkbox, einem Textfeld und einer Dropdown-Liste

Alle Einstellungen der Erweiterung werden in der Eigenschaft preferences aufgezählt. name dient der Identifizierung der Einstellung und muss angegeben werden, wenn der Einstellungswert ausgelesen wird. Der Einstellungswert wird in der Konfiguration (about:config) unter dem Namen extensions.jid1-RSMHU8JbD6sBDA@jetpack.use_panel gespeichert, wobei die Zeichenkette zwischen . und @ die Id der Erweiterung ist. title wird als Beschriftung verwendet und das optionale Attribut description enthält eine Beschreibung der Option, die unter dem Titel angezeigt wird. Mit "type": "bool" wird ausgedrückt, dass eine Checkbox angezeigt werden soll. Mit dem value-Attribut wird der Standardwert festgelegt; diese Checkbox ist also standardmäßig markiert.

Daneben gibt es noch eine ganze Reihe andere Typen, die in der Dokumentation aufgeführt sind; auf ein paar von ihnen wird noch eingegangen werden.

Ferner soll es dem Benutzer ermöglicht werden, auszuwählen, in welcher Sprache der Artikel angezeigt wird. Dazu kann z.B. ein Textfeld ("type": "string") angezeigt werden:

{
    "name": "language",
    "title": "Artikelsprache",
    "type": "string",
    "value": "de"
}

Um zu verhindern, dass ungültige Werte in das Textfeld eingetragen werden, sollte als Alternative auf eine Dropdown-Liste zurückgegriffen werden ("type": "menulist"). Damit ergibt sich insgesamt folgender Code für die Datei package.json:

{
    "name": "meine-erweiterung", 
    "license": "GPL 3.0", 
    "author": "Markus Brenneis", 
    "version": "0.4", 
    "fullName": "Meine Erweiterung", 
    "id": "jid1-RSMHU8JbD6sBDA", 
    "description": "Eine Beispiel-Erweiterung",
    "preferences": [{
        "name": "use_panel",
        "title": "Panel benutzen",
        "description": "Den Artikelanfang in einem Panel anzeigen, statt die Seite in einem Tab zu laden",
        "type": "bool",
        "value": true
    }, {
        "name": "language",
        "title": "Artikelsprache",
        "type": "menulist",
        "value": "de",
        "options": [
            {
            "value": "de",
            "label": "Deutsch"
            },
            {
            "value": "en",
            "label": "English"
            }
        ]
    }]
}

Listing: package.json

Die Auswahlmöglichkeiten der Dropdown-Liste werden in der Eigenschaft options aufgezählt. Jede Auswahlmöglichkeit besteht aus einer Beschriftung, die als Listeneintrag angezeigt wird, und einem zugeordneten Wert, welcher in der Konfiguration gespeichert wird und ausgelesen werden kann.

Die Einstellungen können geändert werden, indem der Add-ons-Manager geöffnet wird (Extras -> Add-ons), die Kategorie Erweiterungen ausgewählt wird und dann bei dem Eintrag der Erweiterung auf Einstellungen geklickt wird.

Auslesen der Einstellungen

Jetzt müssen die Einstellungen mit »Sinn« gefüllt werden. Dazu wird zunächst in der Datei main.js das simple-prefs-Module eingebunden:

var simpleprefs=require("sdk/simple-prefs");

Zum Deaktivieren des Panels wird die openArticleInPanel-Funktion wie folgt angepasst:

function openArticleInPanel(widgetView) {
  if(simpleprefs.prefs.use_panel) {
    panel.port.emit("loadPage", "https://de.m.wikipedia.org/w/index.php?search=" 
+ selectedText);
    widgetView.panel=panel;
  } else {
    openArticle();
    widgetView.panel=null;
  }
}

Mit if(simpleprefs.prefs.use_panel) wird abgefragt, ob das Benutzen des Panels aktiviert ist. Ist dies der Fall, wird – wie vorher auch – die Seite im Panel geladen. Neu ist jetzt, dass dem Widget explizit das Panel zugeordnet wird. Hier wird nicht widget verwendet, sondern das an die Funktion übergebene widgetView-Objekt, welches das konkrete Widget repräsentiert, welches gerade angeklickt wurde. Wenn das Panel nicht aktiviert ist, wird die Funktion openArticle, die den Artikel in einem Tab anzeigt, aufgerufen und die Zuordnung des Panels zu dem Widget entfernt, indem die panel-Eigenschaft auf null gesetzt wird. Diese etwas umständlich aussehende Lösung ist notwendig, weil ein widget.hide(); nicht funktionieren würde, da das Widget erst angezeigt wird, wenn die Funktion openArticleInPanel komplett abgearbeitet worden ist; das Panel würde also nach dem Ausblenden direkt wieder eingeblendet werden.

Die Implementierung der Sprachauswahl funktioniert analog: In der Zeichenkette

https://de.m.wikipedia.org/w/index.php?search=

wird das »de« durch den Einstellungswert ersetzt:

https://"+simpleprefs.prefs.language+".m.wikipedia.org/w/index.php?search=