Ihre erste Erweiterung

Dieser Artikel führt Sie Schritt für Schritt durch die Erstellung einer Erweiterung für Firefox. Die Erweiterung fügt allen Seiten, die von mozilla.org oder einer seiner Subdomains geladen werden, einen roten Rahmen hinzu.

Der Quellcode für dieses Beispiel ist auf GitHub verfügbar.

Die Erweiterung erstellen

Erstellen Sie an einem geeigneten Ort, beispielsweise im Verzeichnis Documents, ein Verzeichnis namens borderify und wechseln Sie dorthin. Dazu können Sie den Dateimanager Ihres Computers oder ein Kommandozeilenterminal verwenden.

Der Umgang mit dem Kommandozeilenterminal ist eine nützliche Fähigkeit bei der Softwareentwicklung. Wenn Sie Hilfe beim Einstieg benötigen, lesen Sie den Schnelleinstieg in die Kommandozeile.

Im Terminal erstellen Sie das Verzeichnis wie folgt:

bash

mkdir borderify
cd borderify

manifest.json

Erstellen Sie mit einem geeigneten Code-Editor im Verzeichnis „borderify“ eine Datei namens „manifest.json“. Geben Sie ihr folgenden Inhalt:

json

{
  "manifest_version": 3,
  "name": "Borderify",
  "version": "1.0",

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

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

  "browser_specific_settings": {
    "gecko": {
      "id": "borderify@mozilla.org",
      "data_collection_permissions": {
        "required": ["none"]
      }
    }
  },

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

Die ersten drei Schlüssel (manifest_version, name und version) sind erforderlich und enthalten grundlegende Metadaten zur Erweiterung.
description ist in Safari erforderlich, andernfalls optional. Es empfiehlt sich jedoch, diese Eigenschaft festzulegen, da sie im Erweiterungsmanager des Browsers angezeigt wird (beispielsweise unter about:addons in Firefox).
icons ist optional, aber empfehlenswert: Damit können Sie ein Symbol für die Erweiterung festlegen.
browser_specific_settings ist für Firefox erforderlich.
- Die Eigenschaft gecko stellt addons.mozilla.org und Firefox zusätzliche Konfigurationsinformationen zur Erweiterung bereit.
  - id legt eine eindeutige Kennung für die Erweiterung fest. Diese Eigenschaft muss angegeben werden, um die Erweiterung auf addons.mozilla.org (AMO) zu veröffentlichen.
  - data_collection_permissions gibt an, ob die Erweiterung personenbezogene Daten erfasst und überträgt. Diese Eigenschaft muss angegeben werden, um die Erweiterung auf addons.mozilla.org (AMO) zu veröffentlichen. Dieses Beispiel erfasst oder überträgt keine Daten.

Bisher liefern diese Schlüssel in manifest.json Informationen über die Erweiterung. Der nächste Schlüssel, content_scripts, beginnt, die Funktionalität der Erweiterung festzulegen. Er weist Firefox an, ein Skript in Webseiten zu laden, deren URL einem bestimmten Muster entspricht. In diesem Fall soll Firefox ein Skript namens „borderify.js“ in alle über HTTP oder HTTPS bereitgestellten Seiten von „mozilla.org“ oder einer seiner Subdomains laden.

icons/border-48.png

Firefox kennzeichnet Erweiterungen an verschiedenen Stellen seiner Benutzeroberfläche durch ein Symbol, beispielsweise in der Symbolleiste und im Add-ons-Manager (about:addons). Wenn Sie kein eigenes Symbol bereitstellen, verwendet Firefox ein Standardsymbol. Bei der Veröffentlichung einer Erweiterung hilft ein eigenes Symbol den Nutzern, Ihre Erweiterung wiederzuerkennen.

Die Datei manifest.json des Beispiels teilt Firefox mit, dass sich ein Symbol unter „icons/border-48.png“ befindet.

Erstellen Sie im Verzeichnis „borderify“ das Verzeichnis „icons“. Speichern Sie dort ein Symbol namens „border-48.png“. Sie können das Symbol aus dem Beispiel verwenden. Es stammt aus dem Google-Material-Design-Icon-Set und wird gemäß den Bedingungen der Lizenz Creative Commons Attribution-ShareAlike verwendet.

Wenn Sie ein Symbol bereitstellen, sollte es 48 × 48 Pixel groß sein. Für hochauflösende Bildschirme können Sie zusätzlich ein Symbol mit 96 × 96 Pixeln bereitstellen. Geben Sie dieses dann als Eigenschaft 96 des Objekts icons in manifest.json an:

json

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

Alternativ können Sie eine SVG-Datei bereitstellen, die Firefox bei Bedarf automatisch skaliert. (Tipp: Wenn Sie SVG verwenden und Ihr Symbol Text enthält, wandeln Sie den Text mit der Funktion „In Pfad umwandeln“ Ihres SVG-Editors in Pfade um. So bleiben Größe und Position beim Skalieren konsistent.)

Weitere Informationen zum Festlegen von Symbolen

borderify.js

Erstellen Sie abschließend im Verzeichnis „borderify“ eine Datei namens „borderify.js“. Geben Sie ihr folgenden Inhalt:

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

Firefox lädt dieses Skript in Seiten, die dem im Schlüssel content_scripts von manifest.json angegebenen Muster entsprechen. Das Skript hat direkten Zugriff auf das Dokument, genau wie Skripte, die von der Seite selbst geladen werden.

Weitere Informationen zu Content Scripts

Die Erweiterung ausprobieren

Prüfen Sie zunächst, ob sich die richtigen Dateien an den richtigen Stellen befinden:

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

Installieren

Öffnen Sie in Firefox die Seite about:debugging, klicken Sie auf Dieser Firefox, dann auf Temporäres Add-on laden und wählen Sie eine beliebige Datei im Verzeichnis Ihrer Erweiterung aus.

Die Erweiterung wird nun installiert und bleibt bis zum nächsten Neustart von Firefox installiert.

Alternativ können Sie die Erweiterung über die Kommandozeile mit dem Tool web-ext ausführen.

Testen

Hinweis: Standardmäßig funktionieren Erweiterungen nicht beim privaten Surfen. Wenn Sie diese Erweiterung beim privaten Surfen testen möchten, öffnen Sie about:addons, klicken Sie auf die Erweiterung und wählen Sie unter „In privaten Fenstern ausführen“ die Option Erlauben.

Rufen Sie nun eine Seite unter https://www.mozilla.org/en-US/ auf. Um die Seite wird ein roter Rahmen angezeigt.

Roter Rahmen um mozilla.org in Firefox

Hinweis: Auf addons.mozilla.org funktioniert die Erweiterung allerdings nicht, da diese Domain Content Scripts blockiert.

Experimentieren Sie: Ändern Sie im Content Script die Rahmenfarbe oder nehmen Sie eine andere Änderung am Seiteninhalt vor. Speichern Sie das Content Script und laden Sie anschließend die Dateien der Erweiterung neu, indem Sie unter about:debugging auf Neu laden klicken. Die Änderungen werden sofort angezeigt.

Weitere Informationen zum Laden von Erweiterungen

Paketieren und veröffentlichen

Damit andere Ihre Erweiterung verwenden können, müssen Sie sie paketieren und zur Signierung bei Mozilla einreichen. Weitere Informationen finden Sie unter „Ihre Erweiterung veröffentlichen“.

Wie geht es weiter?

Sie haben nun eine Einführung in die Entwicklung einer Erweiterung für Firefox erhalten:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden