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

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

Nachdem es im Teil V um das Einbinden von Community-Modulen ging, beschäftigt sich Teil VI mit dem Anlegen von Tastenkürzeln, der Positionierung des Panels, weiteren Funktionen von cfx und der besonderen Behandlung von Klicks mit der mittleren und rechten Maustaste.

Anlegen von Tastenkürzeln

Neben den Möglichkeiten, den Wikipedia-Artikel über das »w« oder das Kontextmenü abzurufen, soll jetzt noch die Alternative hinzukommen, sich diesen mit Hilfe einer Tastenkombination anzeigen zu lassen. Um Tastenkombinationen anlegen zu können, muss wie üblich ein Modul eingebunden werden, in diesem Fall heißt es hotkeys.

var hotkeys = require("sdk/hotkeys");

Eine neue Tastenkombination erstellt man dann wie folgt:

var openArticleHotKey = hotkeys.Hotkey({
  combo: "shift-w",
  onPress: function() {openArticleInPanelHotkey();}
});

Hinter combo wird angegeben, welche Tasten gedrückt werden müssen, um die hinter onPress angegebene Funktion auszulösen. In diesem Beispiel ist es das gleichzeitige Drücken der Umschalt-Taste und W. Neben der Umschalttaste (engl. »shift key«) können auch andere Hilfstasten verwendet werden: alt (Alt-Taste bzw. die Wahltaste beim Mac), meta (Meta- bzw. Befehlstaste), control (Strg). Des Weiteren gibt es noch accel, das beim Mac für die Befehlstaste und ansonsten für die Steuerungstaste steht; man sollte immer auf accel zurückgreifen, anstatt meta bzw. control direkt zu verwenden, um sicherzustellen, dass auf den unterschiedlichen Plattformen die üblichen Hilfstasten verwendet werden (die Funktion der Befehlstaste entspricht unter Mac OS oft der Funktion der Steuerungstaste unter anderen Betriebssystemen).

Die aufgerufene Funktion openArticleInPanelHotkey unterscheidet sich von der bekannten Funktion openArticleInPanel, wie sie im Teil IV angelegt worden ist, nur dadurch, dass kein Parameter widgetView übergeben wird:

function openArticleInPanelHotkey() {
  if(simpleprefs.prefs.use_panel) {
    panel.port.emit("loadPage", "http://"+simpleprefs.prefs.language+".m.wikipedia.org/w/index.php?search=" + selectedText);
    panel.show();
  } else {
    openArticle();
  }
}

Festlegen der Panelposition

Beim Anzeigen des Panels per Tastenkombination gibt es einen kleinen Schönheitsfehler: Es wird nicht am »w«-Widget ausgerichtet, sondern mitten im Fenster angezeigt. Ab Firefox 23 (Veröffentlichung Anfang August 2013) ist es möglich, die Position des Panels relativ zum Anzeigebereich der Webseite anzugeben. Die Syntax ähnelt dabei der den Positionsangaben bei CSS.

Wird die Paneldeklaration wie folgt abgeändert, wird das Panel immer unten rechts angezeigt, wenn es nicht durch Klick auf das zugeordnete Widget angezeigt worden ist:

var panel = panels.Panel ({
  contentURL: self.data.url("panel.html"),
  contentScriptFile: self.data.url("panel.js"),
  onHide: function () {
    panel.port.emit("loadPage", "about:blank");
  },
  position: {
    right: 0,
    bottom: 0
  },
  width: 450,
  heigth: 450
});