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

Firefox-Erweiterungen mit dem Add-on-SDK erstellen – Teil VII: Netzwerk-Anfragen

Der letzte Artikel zum Thema »Firefox-Erweiterungen mit dem Add-on-SDK erstellen« ist schon wieder zwei Monate her. Nach der kleinen Sommerpause werden in diesem Teil Netzwerk-Anfragen behandelt.

Probleme mit dem bisherigen Ansatz

Die Erweiterung erfüllt ihren Zweck, ein markiertes Wort in der Wikipedia nachzuschlagen, bisher ganz gut. Allerdings kann es auch vorkommen, dass im Panel bis auf den gesuchten Begriff keinerlei Text angezeigt wird und der Benutzer somit nicht die gewünschten Informationen erhält.

Das Panel enthält keine für den Benutzer hilfreiche Informationen

Markus Brenneis

Das Panel enthält keine für den Benutzer hilfreiche Informationen

Besser wäre es, wenn immer nur die Artikeleinleitung, also der erste Absatz des Wikipediaartikels, angezeigt würde.

Lösung mithilfe der MediaWiki-API

Es gibt die Möglichkeit, mithilfe einer Programmierschnittstelle (API = Application Programming Interface) den ersten Text eines Artikels abzufragen. Die API kann den Artikelinhalt und andere Informationen unter anderem im sogenannten JSON-Format (JavaScript Object Notation) zurückgeben; dieses Format kann einfach in JavaScript verarbeitet werden.

Die Ausgabe der API für die Anfrage https://de.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&titles=OpenStreetMap, welche die Einleitung des Wikipedia-Artikels über OpenStreetMap anfordert, sieht (gekürzt) z.B. so aus:

{
 "query": {
  "pages": {
   "1616095": {
    "pageid": 1616095,
     "ns": 0,
     "title": "OpenStreetMap",
     "extract": "<p><b>
       OpenStreetMap</b> ist ein
       freies Projekt, das f\u00fcr
       jeden frei nutzbare Geodaten
       sammelt (Open Data). [...]
       erforderlich.</p>"
   }
  }
 }
}

Tipp: Ersetzt man das json in der Adresse durch jsonfm, d.h. https://de.wikipedia.org/w/api.php?action=query&format=jsonfm&prop=extracts&exintro&titles=OpenStreetMap, wird die Ausgabe als formatiertes, für Menschen übersichtlicheres HTML-Dokument angezeigt.

Nun muss die Erweiterung, statt den Artikel direkt im Panel zu laden, eine solche Anfrage an die API senden und aus der Antwort den Text nach dem extract extrahieren.

Stellen von Netzwerk-Anfragen

Um solche Anfragen zu stellen, benutzt man das SDK-Modul request, welches zunächst eingebunden werden muss:

var requests = require("sdk/request");

Die resultierende Funktion openArticleInPanelHotkey ist:

function openArticleInPanelHotkey()
{
  requests.Request({
    url: "https://" + simpleprefs.prefs.language + ".wikipedia.org/w/api.php?action=query&amp;format=json&amp;prop=extracts&amp;exintro&amp;titles=" + selectedText,
    onComplete: function(response) {
      var pageContents=response.json.query.pages;
      pageContents=pageContents[Object.keys(pageContents)].extract;
      panel.port.emit("displayContent", pageContents);
    }
  }).get();
}

Die Anfrage hat zwei Eigenschaften: url gibt an, welche Adresse aufgerufen werden soll. Nach onComplete steht eine Funktion, welche die Antwort der Anfrage verarbeitet; die Antwort wird als Parameter response übergeben. Das abschließende get() sorgt dafür, dass die Anfrage sofort ausgeführt wird.

Die onComplete-Funktion geht bei der Verarbeitung in drei Schritten vor:

In der ersten Zeile der Funktion wird die Antwort im JSON-Format ausgelesen (respone.json) und dann wird auf die Eigenschaft query und Untereigenschaft pages (.query.pages) zugegriffen. Der Wert (ein Teil des JSON-Objekts) wird in der Variablen pageContents hinterlegt.

Wie oben in der Beispiel-Ausgabe gesehen, ist der Name der nächsten Eigenschaft die Artikel-ID, die vor der Anfrage nicht bekannt ist und deshalb mit Object.keys(pageContents) ausgelesen werden muss; mit der Funktion keys erhält man die Namen aller Eigenschaften des JSON-Objekts. Somit erhält man den Artikelauszug mit pageContents[Object.keys(pageContents)].extract.

Dieser wird schließlich in einer Nachricht an das Panel gesendet.