Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

In diesem Artikel wird die Erstellung einer Erweiterung für Firefox komplett beschrieben. Die Erweiterung soll einen roten Rand zu jeder von "mozilla.org", sowie dessen Subdomain geladenen Seiten 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 dem Verzeichnis:

mkdir borderify
cd borderify

manifest.json

Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis. Gib ihr die folgenden Inhalte:

{

  "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: es wird 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 Teil hier ist  content_scripts, welcher Firefox sagt, ein Script in Webseiten zu laden dessen URL ein spezifisches Muster zuzuordnen ist. Ist dies der Fall, dann fragen wir Firefox ein Script namens "borderify.js" in allen HTTP oder HTTPS Seiten von "mozilla.org" oder jene Subdomain von "mozilla.org" 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 soll ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json verspricht, dass wir ein Icon in "icons/border-48.png" haben.

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 ist und unter den Richtlinien der Creative Commons Attribution-ShareAlike Lizens steht.

Wenn du dich entscheidest ein eigenes Icon zu übergeben, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenso ein Icon mit einer Größe von 96x94 Pixel übergeben, welches dann als die 96 Property des icons Objekt in der manifest.json festgelegt wird:

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

Alternativerweise kannst du auch eine SVG Datei übergeben, welche dann automatisch korrekt skaliert wird.

borderify.js

Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify" verzeichnis. Gib ihr diesen Inhalt:

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

Dieser Script wird in Seiten geladen, welche mit dem Muster des  content_scripts Key in der  manifest.json Datei übereinstimmen. Der Script hat direkten Zugriff zu dem Dokument, genau so wie die Script die von der Seite selbst geladen werden.

Austesten

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

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

Installieren

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

Die Erweiterung wird nun installiert und ist solange aktiv, bis du Firefox neustartest.

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

Testen

Nun versuche eine Seite von "mozilla.org" zu besuchen und du solltest einen roten Rand auf der Seite erkennen:

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

Versuche ein bisschen zu experimentieren. bearbeite den "content script" um die farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere den "content script", lade die Erweiterungsdateien neu mit Hilfe von dem "Neu laden" Knopf in about:debugging. Du kannst die Änderungen sofort sehen:

Verpacken und veröffentlichen

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

Was nun?

Jetzt hast du eine Idee von dem Prozess der Erweiterungsentwicklung für Firefox. Versuche:

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: serv-inc, Draphar, flosommerfeld
 Zuletzt aktualisiert von: serv-inc,