Ihre erste Erweiterung

Erstellen Sie an einem geeigneten Ort, z.B. im Documents Verzeichnis, ein neues Verzeichnis mit dem Namen borderify und navigieren Sie dorthin. Sie können dies mit dem Dateiexplorer Ihres Computers oder dem Befehlszeilen-Terminal tun. Das Verständnis, wie man das Befehlszeilen-Terminal benutzt, ist eine nützliche Fähigkeit, da es Ihnen bei der fortgeschritteneren Erweiterungsentwicklung hilft. Mit dem Terminal erstellen Sie das Verzeichnis so:

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 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 empfohlen: Sie wird im Add-ons Manager angezeigt.
• icons ist optional, aber empfohlen: Es erlaubt Ihnen, ein Symbol für die Erweiterung festzulegen, das im Add-ons Manager 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 bereitgestellt werden.

• Erfahren Sie mehr über Content-Skripte.
• Erfahren Sie mehr über Muster zur Übereinstimmung.

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

Die Erweiterung sollte ein Symbol haben. Dies wird neben dem Eintrag der Erweiterung im Add-ons Manager angezeigt. Unser manifest.json versprach, ein Symbol unter "icons/border-48.png" zu haben.

Erstellen Sie das "icons"-Verzeichnis direkt unter dem "borderify"-Verzeichnis. Speichern Sie ein Symbol dort 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 haben. Sie könnten auch ein 96x96 Pixel großes Symbol für hochauflösende Displays bereitstellen, und 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. (Allerdings: Wenn Sie SVG verwenden und Ihr Symbol Text enthält, möchten Sie möglicherweise das "in Pfad umwandeln"-Werkzeug Ihres SVG-Editors verwenden, um den Text zu plätten, damit er mit einer konsistenten Größe/Position skaliert.)

• Erfahren Sie mehr über das Festlegen 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 wurden.

• Erfahren Sie mehr über Content-Skripte.

Überprüfen Sie zuerst, dass Sie die richtigen Dateien an den richtigen Stellen haben:

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

In Firefox: Öffnen Sie die about:debugging Seite, klicken Sie auf die Option "This Firefox", klicken Sie auf die Schaltfläche "Load Temporary Add-on" und wählen Sie dann eine beliebige Datei im Verzeichnis Ihrer Erweiterung aus.

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

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

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

Experimentieren Sie ein wenig. Bearbeiten Sie das Content-Skript, um die Farbe des Randes zu ändern oder etwas anderes am Seiteninhalt zu tun. Speichern Sie das Content-Skript und laden Sie die Dateien der Erweiterung neu, indem Sie die Schaltfläche "Reload" in about:debugging klicken. Sie können die Änderungen sofort sehen.

• Erfahren Sie mehr über das Laden von Erweiterungen

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

Jetzt haben Sie eine Einführung in den Prozess der Entwicklung einer WebExtension 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 Lernen.