Ihre erste Erweiterung

Schreiben der Erweiterung

Erstellen Sie an einem geeigneten Ort, wie dem Documents-Verzeichnis, ein Verzeichnis namens borderify und gehen Sie dann dorthin. Sie können dies mit dem Dateimanager Ihres Computers oder dem Kommandozeilen-Terminal tun.

Zu wissen, wie man das Kommandozeilen-Terminal benutzt, ist eine nützliche Fähigkeit für die Softwareentwicklung. Wenn Sie Unterstützung beim Einstieg in das Terminal benötigen, sehen Sie sich den Kommandozeilen-Crashkurs an.

Erstellen Sie das Verzeichnis mit dem Terminal wie folgt:

mkdir borderify
cd borderify

manifest.json

Erstellen Sie mit einem geeigneten Texteditor eine Datei namens "manifest.json" im "borderify"-Verzeichnis. Geben Sie ihm diesen Inhalt:

{
  "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 obligatorisch und enthalten grundlegende Metadaten für die Erweiterung.
• description ist in Safari erforderlich, andernfalls ist es optional. Es ist jedoch eine gute Idee, diese Eigenschaft festzulegen, da sie im Erweiterungsmanager des Browsers angezeigt wird (zum Beispiel about:addons in Firefox).
• icons ist optional, wird jedoch empfohlen: Es ermöglicht Ihnen, ein Symbol für die Erweiterung festzulegen.
• browser_specific_settings wird von Firefox benötigt.
  • Die gecko-Eigenschaft bietet addons.mozilla.org und Firefox zusätzliche Konfigurationsinformationen über die Erweiterung.
    • id definiert eine eindeutige Kennung für die Erweiterung. Diese Eigenschaft muss angegeben werden, um die Erweiterung auf addons.mozilla.org (AMO) zu veröffentlichen.
    • data_collection_permissions informiert darüber, ob die Erweiterung persönlich identifizierbare Informationen sammelt und überträgt. Diese Eigenschaft muss angegeben werden, um die Erweiterung auf addons.mozilla.org (AMO) zu veröffentlichen. Dieses Beispiel sammelt oder überträgt keine Daten.

Bisher haben diese manifest.json-Schlüssel Informationen über die Erweiterung bereitgestellt. Der nächste Schlüssel, content_scripts, beginnt, die Funktionalität der Erweiterung zu definieren. Dieser Schlüssel weist Firefox an, ein Skript in Webseiten zu laden, deren URL einem bestimmten Muster entspricht. In diesem Fall fordert die Erweiterung Firefox auf, ein Skript namens "borderify.js" in alle HTTP- oder HTTPS-Seiten zu laden, die von "mozilla.org" oder einer ihrer Subdomains bereitgestellt werden.

• Erfahren Sie mehr über Content-Skripte
• Erfahren Sie mehr über Übereinstimmungsmuster

icons/border-48.png

Firefox identifiziert Erweiterungen durch ein Symbol in verschiedenen Teilen seiner Benutzeroberfläche, wie der Symbolleiste und dem Add-ons-Manager (about:addons). Firefox verwendet ein Standardsymbol, es sei denn, Sie stellen eines bereit. Wenn Sie zur Veröffentlichung von Erweiterungen übergehen, ist ein Symbol eine hilfreiche Möglichkeit für Benutzer, Ihre Erweiterung zu identifizieren.

Die manifest.json des Beispiels teilt Firefox mit, dass ein Symbol unter "icons/border-48.png" vorhanden ist.

Erstellen Sie das Verzeichnis "icons" im Verzeichnis "borderify". Speichern Sie dort ein Symbol mit dem Namen "border-48.png". Sie könnten das aus dem Beispiel verwenden, das aus dem Google Material Design-Symbolsatz stammt und unter den Bedingungen der Creative Commons Attribution-ShareAlike Lizenz verwendet wird.

Falls Sie ein Symbol bereitstellen, sollte es 48x48 Pixel groß sein. Sie könnten auch ein 96x96 Pixel großes Symbol für hochauflösende Displays bereitstellen. Wenn Sie dies tun, geben Sie es als 96-Eigenschaft des icons-Objekts in manifest.json an, wie folgt:

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

Alternativ können Sie eine SVG-Datei bereitstellen, die Firefox automatisch nach Bedarf skaliert. (Tipp: Wenn Sie SVG verwenden und Ihr Symbol Text enthält, verwenden Sie das Werkzeug "In Pfad umwandeln" Ihres SVG-Editors, um den Text zu glätten, sodass er mit einer konsistenten Größe und Position skaliert wird.)

Erfahren Sie mehr über das Festlegen von Symbolen

borderify.js

Erstellen Sie schließlich eine Datei namens "borderify.js" im Verzeichnis "borderify". Geben Sie ihr diesen Inhalt:

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

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

Erfahren Sie mehr über Content-Skripte

Ausprobieren

Überprüfen Sie zunächst, ob Sie die richtigen Dateien an den richtigen Stellen haben:

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

Installation

Ö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 aus dem Verzeichnis Ihrer Erweiterung aus.

Die Erweiterung wird nun installiert und bleibt installiert, bis Sie Firefox neu starten.

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

Testen

Besuchen Sie nun eine Seite unter https://www.mozilla.org/en-US/, und Sie sehen einen roten Rahmen um die Seite.

Versuchen Sie zu experimentieren: Bearbeiten Sie das Content-Skript, um die Farbe des Rahmens zu ändern, oder machen Sie etwas anderes mit dem Seiteninhalt. Speichern Sie das Content-Skript, und laden Sie dann die Dateien der Erweiterung neu, indem Sie auf Neu laden in about:debugging klicken. Sie sehen die Änderungen sofort.

Erfahren Sie mehr über das Laden von Erweiterungen

Verpacken und Veröffentlichen

Damit andere Leute Ihre Erweiterung verwenden können, müssen Sie sie verpacken und bei Mozilla zur Signierung einreichen. Um mehr darüber zu erfahren, lesen Sie "Veröffentlichen Ihrer Erweiterung".

Was kommt als Nächstes?

Nun haben Sie eine Einführung in den Prozess der Entwicklung einer Erweiterung für Firefox erhalten:

• Schreiben Sie eine komplexere Erweiterung
• Lesen Sie mehr über den Aufbau einer Erweiterung
• Erkunden Sie die Erweiterungsbeispiele
• Finden Sie heraus, was Sie benötigen, um Ihre Erweiterung zu entwickeln, zu testen und zu veröffentlichen
• Vertiefen Sie Ihr Wissen weiter