Login
Newsletter
Werbung

Do, 7. März 2013, 15:00

Erweiterungen mit dem Add-on-SDK erstellen – Teil II

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 ersten Teil der Reihe wurde erläutert, wie das Add-on-SDK eingerichtet und ein Symbol zur Add-on-Leiste hinzugefügt wird. Es soll nun mit der Erweiterung möglich sein, den gerade markierten Begriff in Wikipedia nachzuschlagen. Außerdem wird erklärt, wie ein Eintrag im Kontextmenü angelegt wird und wie man seine Erweiterung mit anderen Firefox-Nutzern teilen kann.

Ermitteln des ausgewählten Textes

Die an die Erweiterung gestellte Aufgabe umfasst zwei Teilaufgaben: Als erstes muss festgestellt werden, welcher Text gerade markiert ist, und anschließend muss der Wikipedia-Artikel in einem neuem Tab geöffnet werden.

Um den Inhalt der aktuellen Auswahl zu bekommen, stellt das SDK das Modul selection zur Verfügung. Um das Modul nutzen zu können, muss es zunächst – wie schon vom widget-Modul bekannt – per

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

in die main.js eingebunden werden. Mit der Ende Januar erschienenen SDK-Version 1.13 hat sich die Syntax von require übrigens ein wenig verändert. Wegen Änderungen an der SDK-Struktur muss nun sdk/ vor den Modulnamen geschrieben werden; die alte Syntax (require("selection")) ist aber aus Kompatibilitätsgründen zur Zeit auch noch gültig.

Die aktuelle Auswahl soll dann ausgelesen werden, wenn das »W«-Widget angeklickt wird. Dafür wird eine Funktion verwendet, die aufgerufen wird, wenn das click-Event des Widgets ausgelöst wird. Ein erster Ansatz, der die aktuelle Auswahl selection.text in die Fehlerkonsole schreiben soll, könnte so aussehen:

var selection = require("sdk/selection");
var widgets = require("sdk/widget");

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

Das Wort »Mozilla« wurde markiert und mit einem Klick auf das »W« öffnet sich die Fehlerkonsole

Markus Brenneis

Das Wort »Mozilla« wurde markiert und mit einem Klick auf das »W« öffnet sich die Fehlerkonsole

Testet man nun den Code mit cfx run (vorher das Laden des SDK per source bin/active nicht vergessen!), öffnet eine Webseite, markiert Text, klickt auf das »W« und schaut in der Fehlerkonsole (Extras -> Web-Entwickler -> Fehlerkonsole) nach, sieht man aber nur »info: meine-erweiterung: null«. null bedeutet, dass kein Text markiert ist. Wie kann das sein? Sobald auf das »W« geklickt wird, verliert die Webseite – und damit auch die Selektion – den Fokus und es gibt nun tatsächlich keinen markierten Text mehr.

Das Problem lässt sich lösen, indem sich die Erweiterung immer den zuletzt markierten Text merkt. Dazu wird das select-Ereignis des selection-Moduls verwendet:

var selectedText;

function selectionChanged(event) {
  selectedText = selection.text;
}

selection.on("select", selectionChanged);

Die Funktion selectionChanged wird jedes Mal aufgerufen, wenn ein anderer Text markiert wird. Dieser Text wird dann in der Variablen selectedText gespeichert. Die onClick-Funktion muss jetzt noch in

console.log(selectedText);

geändert werden. Erneutes Testen zeigt, dass dieser Lösungsansatz wie gewollt funktioniert.

Öffnen eines Tabs

Nun soll der zum ausgewählten Text passende Wikipedia-Artikel in einem neuen Tab angezeigt werden. Das dafür nötige Modul heißt tabs und wird mit

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

eingebunden. Um einen neuen Tab zu öffnen, wird die Funktion open verwendet:

onClick: function() {
  console.log(selectedText);
  tabs.open("http://de.wikipedia.org/w/index.php?search=" + selectedText);
}

Kommentare (Insgesamt: 0 )
Pro-Linux
Pro-Linux @Facebook
Neue Nachrichten
Werbung