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.
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&format=json&prop=extracts&exintro&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.