In diesem Artikel wird die Erstellung einer Erweiterung (Extension) für Firefox komplett beschrieben. Diese Erweiterung soll einen roten Rand zu jeder Seite, die von "mozilla.org" oder einer Subdomain geladenen wurde, hinzufügen.

Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: https://github.com/mdn/webextensions-examples/tree/master/borderify.

Als erstes benötigst du Firefox Version 45 oder neuer.

Schreiben der Erweiterung

Erstelle ein neues Verzeichnis und navigiere zu diesem:

mkdir borderify
cd borderify

manifest.json

Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • Die ersten drei Keys: manifest_version, name und version sind verpflichtend und beinhalten grundlegende Metadaten für die Erweiterung.
  • description ist optional, aber empfehlenswert: diese wird dann im Add-ons Manager angezeigt.
  • icons ist optional, aber empfehlenswert: es erlaubt es dir ein Icon für deine Erweiterung festzulegen, welches ebenfalls im Add-ons Manager angezeigt wird.

Der interessanteste Key hier ist  content_scripts, welcher Firefox auffordert, ein Skript in allen Webseiten zu laden, deren URLs einem spezifischen Muster zuzuordnen sind. In diesem Fall, fragen wir Firefox nach dem Skript namens "borderify.js", um es in allen HTTP oder HTTPS Seiten von "mozilla.org" oder einer Subdomain zu laden.

In manchen Situation musst eine ID für deine Erweiterung festlegen. Wenn du eine Add-on ID festlegen musst, schreibe den  applications key in manifest.json und setze die gecko.id-Eigenschaft:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

Die Erweiterung sollte ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json gibt den Ort des Icons unter "icons/border-48.png" an.

Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speicher dort ein Icon namens "border-48.png".  Du kannst dazu das von unserem Beispiel benutzen, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der Creative Commons Attribution-ShareAlike Lizens steht.

Wenn du dich entscheidest ein eigenes Icon zu verwenden, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenfalls ein 96x96 Pixel großes Icon, für hochauflösende Bildschirme, übergeben, welches dann als die 96 Property des icons-Objekts in der manifest.json festgelegt wird:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

Alternativ kannst du auch eine SVG Datei übergeben, welche dann automatisch korrekt skaliert wird.
(Beachte: Wenn du SVG verwendest und dein Symbol Text enthält, kannst du das Werkzeug "convert to path" deines SVG-Editors verwenden, um den Text zu verflachen, so dass er mit einer einheitlichen Größe/Position skaliert wird.

borderify.js

Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesen Inhalt:

document.body.style.border = "5px solid red";

Dieses Skript wird in Seiten geladen, welche mit dem Muster des  content_scripts-Keys in der manifest.json Datei übereinstimmen. Das Skript hat direkten Zugriff auf das Dokument, genauso wie die Skripte, die von der Seite selbst geladen werden.

Probiere es aus:

Als erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Installiere nun das Plugin

Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:

Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.

Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem web-ext Tool ausführen.

Teste es nun aus

Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:

Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.

Experimentiere nun ein bisschen. Bearbeite das "content script", um die Farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere das "content script", lade die Erweiterungsdateien in about:debugging neu mit Hilfe des "Neu laden"-Knopfs. Du kannst die Änderungen sofort sehen:

Verpacken und Veröffentlichen

Damit andere Personen deine Erweiterung benutzen können musst du deine Erweiterung verpacken und zum Signieren an Mozilla senden. Um mehr darüber zu lernen, siehe  "Deine Erweiterung veröffentlichen".

Was nun?

Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: HillOTech, Asozialist, twizzz, serv-inc, Draphar, flosommerfeld
Zuletzt aktualisiert von: HillOTech,