Ihre erste Erweiterung

Die Erweiterung schreiben

Erstellen Sie an einem geeigneten Ort, zum Beispiel im Verzeichnis Documents, ein neues Verzeichnis namens borderify und navigieren Sie dorthin. Sie können dies mit dem Datei-Explorer Ihres Computers oder einem Befehlszeilen-Terminal tun. Das Verständnis, wie man das Befehlszeilen-Terminal verwendet, ist eine nützliche Fähigkeit, da es Ihnen bei der fortgeschrittenen Erweiterungsentwicklung hilft. Verwenden Sie das Terminal, um das Verzeichnis so zu erstellen:

mkdir borderify
cd borderify

manifest.json

Verwenden Sie einen geeigneten Texteditor, um eine neue Datei namens "manifest.json" direkt unter dem Verzeichnis "borderify" 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 zwingend erforderlich und enthalten grundlegende Metadaten für die Erweiterung.
• description ist optional, aber empfohlen: Es wird im Add-on-Manager angezeigt.
• icons ist optional, aber empfohlen: Es erlaubt Ihnen, ein Symbol für die Erweiterung anzugeben, das im Add-on-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" auf alle HTTP- oder HTTPS-Seiten zu laden, die von "mozilla.org" oder seinen Subdomains bereitgestellt werden.

• Erfahren Sie mehr über Inhalts-Skripte.
• Erfahren Sie mehr über Musterabgleich.

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

icons/border-48.png

Die Erweiterung sollte ein Symbol haben. Dieses wird neben der Auflistung der Erweiterung im Add-on-Manager angezeigt. Unsere manifest.json hat versprochen, dass wir ein Symbol unter "icons/border-48.png" haben würden.

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

Wenn Sie sich dafür entscheiden, Ihr eigenes Symbol bereitzustellen, sollte es eine Größe von 48x48 Pixeln haben. Sie könnten auch ein 96x96-Pixel-Symbol für hochauflösende Bildschirme 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 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 Werkzeug "Umwandeln in Pfad" Ihres SVG-Editors verwenden, um den Text abzuflachen, sodass er mit einer konsistenten Größe/Position skaliert wird.)

• Erfahren Sie mehr über das Angeben von Symbolen.

borderify.js

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

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

Dieses Skript wird in die Seiten geladen, die dem im content_scripts-Schlüssel von manifest.json angegebenen Muster entsprechen. Das Skript hat direkten Zugriff auf die Webseite, genau wie von der Seite selbst geladene Skripte.

• Erfahren Sie mehr über Inhalts-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

In Firefox: Öffnen Sie die Seite about:debugging, klicken Sie auf die Option This Firefox, klicken Sie auf die Schaltfläche Temporäres Add-on laden und wählen Sie dann eine beliebige Datei in Ihrem Erweiterungsverzeichnis aus.

Die Erweiterung wird nun 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.

Testen

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

Experimentieren Sie ein wenig. Bearbeiten Sie das Inhalts-Skript, um die Farbe des Rahmens zu ändern, oder um etwas anderes mit dem Seiteninhalt zu machen. Speichern Sie das Inhalts-Skript und laden Sie dann die Dateien der Erweiterung, indem Sie auf die Schaltfläche Laden in about:debugging klicken. Sie können die Änderungen sofort sehen.

• Erfahren Sie mehr über das Laden von Erweiterungen

Verpackung und Veröffentlichung

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

Was kommt als nächstes?

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 benötigen, um Ihre Erweiterung zu entwickeln, zu testen und zu veröffentlichen
• vertiefen Sie Ihre Lernerfahrung.