Ihre erste Erweiterung

Erstellen Sie an einem geeigneten Ort, z.B. im Dokuments-Verzeichnis, ein neues Verzeichnis namens borderify und navigieren Sie dorthin. Sie können dies über den Dateiexplorer Ihres Computers oder das Befehlszeilen-Terminal tun. Zu wissen, wie man das Befehlszeilen-Terminal benutzt, ist eine nützliche Fähigkeit, da es Ihnen bei der fortgeschritteneren Entwicklung von Erweiterungen hilft. Über das Terminal erstellen Sie das Verzeichnis wie folgt:

mkdir borderify
cd borderify

Verwenden Sie einen geeigneten Texteditor, um eine neue Datei namens "manifest.json" direkt im "borderify"-Verzeichnis zu erstellen. Geben Sie ihr den 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 Schlüssel: manifest_version, name und version sind obligatorisch und enthalten grundlegende Metadaten für die Erweiterung.
• description ist optional, aber empfehlenswert: Sie wird im Add-ons-Verwalter angezeigt.
• icons ist optional, aber empfehlenswert: Es ermöglicht Ihnen, ein Symbol für die Erweiterung anzugeben, das im Add-ons-Verwalter angezeigt wird.

Der interessanteste Schlüssel hier ist content_scripts, der Firefox anweist, ein Skript in Webseiten zu laden, deren URL einem bestimmten Muster entspricht. In diesem Fall bitten wir Firefox, ein Skript namens "borderify.js" in alle HTTP- oder HTTPS-Seiten zu laden, die von "mozilla.org" oder einem seiner Subdomains bedient werden.

• Erfahren Sie mehr über Content-Skripte.
• Erfahren Sie mehr über Abgleichmuster.

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

Die Erweiterung sollte ein Symbol haben. Dieses wird neben dem Eintrag der Erweiterung im Add-ons-Verwalter angezeigt. Unser manifest.json versprach, dass wir ein Symbol unter "icons/border-48.png" haben würden.

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

Wenn Sie sich entscheiden, Ihr eigenes Symbol bereitzustellen, sollte es 48x48 Pixel groß sein. Sie könnten auch ein 96x96-Pixel-Symbol für hochauflösende Displays bereitstellen. Wenn Sie dies tun, wird es als 96-Eigenschaft des icons-Objekts in manifest.json angegeben:

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

Alternativ könnten Sie hier eine SVG-Datei bereitstellen, und sie wird korrekt skaliert. (Wenn Sie SVG verwenden und Ihr Symbol Text enthält, möchten Sie möglicherweise das "zum Pfad konvertieren"-Werkzeug Ihres SVG-Editors verwenden, um den Text zu vereinfachen, sodass er mit einer konsistenten Größe/Position skaliert wird.)

• Erfahren Sie mehr über das Angeben von Symbolen.

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

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

Dieses Skript wird in die Seiten geladen, die dem im content_scripts manifest.json-Schlüssel 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.

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

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

In Firefox: Öffnen Sie die Seite about:debugging, klicken Sie auf die Option „Dieses Firefox“, klicken Sie auf die Schaltfläche „Vorübergehendes Add-on laden“ und wählen Sie dann eine Datei im Verzeichnis Ihrer Erweiterung aus.

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

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

Besuchen Sie nun eine Seite unter "https://www.mozilla.org/en-US/", und Sie sollten die rote Umrandung um die Seite sehen.

Versuchen Sie ein wenig zu experimentieren. Bearbeiten Sie das Inhaltsskript, um die Farbe des Rahmens zu ändern oder etwas anderes am Seiteninhalt vorzunehmen. Speichern Sie das Inhaltsskript und laden Sie dann die Dateien der Erweiterung durch Klicken auf die Schaltfläche „Neu laden“ in "about:debugging" neu. Sie können die Änderungen sofort sehen.

• Erfahren Sie mehr über das Laden von Erweiterungen.

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

Jetzt haben Sie eine Einführung in den Prozess der Entwicklung einer WebExtension für Firefox gehabt:

• Schreiben Sie eine komplexere Erweiterung
• Lesen Sie mehr über den Aufbau einer Erweiterung
• Erkunden Sie die Erweiterungsbeispiele
• Finden Sie heraus, was Sie zum Entwickeln, Testen und Veröffentlichen Ihrer Erweiterung benötigen
• Setzen Sie Ihr Lernen fort.