Ihre erste Erweiterung

Erstellen Sie an einem geeigneten Ort, z. B. im Documents-Verzeichnis, ein neues Verzeichnis namens borderify und navigieren Sie dorthin. Sie können dies mit dem Dateiexplorer Ihres Computers oder mit einem Befehlszeilen-Terminal tun. Die Verwendung des Befehlszeilen-Terminals ist eine nützliche Fähigkeit, da es Ihnen bei der fortgeschritteneren Erweiterungsentwicklung hilft. Mit dem 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. Der Inhalt sollte folgendermaßen aussehen:

{
  "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 anzugeben, 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 einer seiner Subdomains bedient werden.

• Erfahren Sie mehr über Inhaltsskripte.
• Erfahren Sie mehr über Übereinstimmungsmuster.

"browser_specific_settings": {
  "gecko": {
    "id": "[email protected]"
  }
}

Die Erweiterung sollte ein Symbol haben. Dieses wird neben dem Eintrag der Erweiterung im Add-ons-Manager angezeigt. Unser manifest.json hat versprochen, dass wir ein Symbol bei "icons/border-48.png" haben werden.

Erstellen Sie das Verzeichnis "icons" direkt unter dem "borderify"-Verzeichnis. Speichern Sie dort ein Symbol mit dem Namen "border-48.png". Sie könnten 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 Ihr eigenes Symbol bereitstellen, sollte es 48x48 Pixel groß sein. 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, die korrekt skaliert wird. (Allerdings: Wenn Sie SVG verwenden und Ihr Symbol Text enthält, sollten Sie das Tool "In Pfad umwandeln" Ihres SVG-Editors verwenden, um den Text zu glätten, damit er mit einer konsistenten Größe/Position skaliert wird.)

• Erfahren Sie mehr darüber, wie Sie Symbole angeben.

Erstellen Sie schließlich eine Datei namens "borderify.js" direkt im "borderify"-Verzeichnis. Geben Sie ihm 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 von der Seite selbst geladene Skripte.

• Erfahren Sie mehr über Inhaltsskripte.

Überprüfen Sie zuerst, 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, wählen Sie 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 ü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 den roten Rand 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 zu tun. Speichern Sie das Inhaltsskript und laden Sie die Dateien der Erweiterung neu, indem Sie auf 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 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".

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
• erforschen Sie die Erweiterungsbeispiele
• finden Sie heraus, was Sie für die Entwicklung, das Testen und die Veröffentlichung Ihrer Erweiterung benötigen
• führen Sie Ihr Lernen weiter.