Ihre erste Erweiterung

Erstellen Sie an einem geeigneten Ort, beispielsweise im Verzeichnis Documents, ein neues Verzeichnis namens borderify und navigieren Sie dorthin. Sie können dies mit dem Dateiexplorer Ihres Computers oder einem Befehlszeilenterminal tun. Das Verständnis, wie man das Befehlszeilenterminal nutzt, ist eine nützliche Fähigkeit, die Ihnen bei der Entwicklung fortgeschrittenerer Erweiterungen hilft. Verwenden Sie das Terminal, um das Verzeichnis folgendermaßen zu erstellen:

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 empfohlen: Es 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 bereitgestellt werden.

• Erfahren Sie mehr über Inhalts-Skripte.
• Erfahren Sie mehr über Übereinstimmungsmuster..

Warning: In einigen Situationen müssen Sie eine ID für Ihre Erweiterung angeben. Wenn Sie eine Add-on-ID angeben müssen, fügen Sie den Schlüssel browser_specific_settings in die manifest.json ein und setzen Sie seine gecko.id Eigenschaft:

json

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

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

Erstellen Sie das "icons"-Verzeichnis direkt im "borderify"-Verzeichnis. Speichern Sie dort ein Symbol namens "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 Ihr eigenes Symbol bereitstellen möchten, sollte es 48x48 Pixel groß sein. Sie könnten auch ein 96x96 Pixel großes Symbol für hochauflösende Anzeigen bereitstellen, und wenn Sie dies tun, wird es als die 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 glätten, damit 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 Inhalts-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 This Firefox, klicken Sie auf die Schaltfläche Temporäres Add-on laden und wählen Sie dann eine Datei im Verzeichnis Ihrer Erweiterung aus.

Die Erweiterung wird jetzt installiert und bleibt bis zum Neustart von Firefox installiert.

Alternativ können Sie die Erweiterung von der Befehlszeile aus 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 Inhalts-Skript, um die Farbe der Umrandung zu ändern, oder machen Sie etwas anderes mit dem Seiteninhalt. Speichern Sie das Inhalts-Skript und laden Sie die Dateien der Erweiterung neu, indem Sie die Schaltfläche Neu laden 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 Unterzeichnung bei Mozilla einreichen. Um mehr darüber zu erfahren, sehen 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 die Anatomie 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 weiter.