Tutorial zum Erstellen einer Erweiterung, Teil 1

  • Artikel

Das Ziel dieses Tutorials besteht darin, eine Microsoft Edge-Erweiterung zu erstellen, die mit einem leeren Verzeichnis beginnt. Sie erstellen eine Erweiterung, die das NASA-Bild des Tages anzeigt. In diesem Tutorial erfahren Sie, wie Sie eine Erweiterung erstellen, indem Sie:

  • Erstellen einer manifest.json Datei.
  • Hinzufügen von Symbolen.
  • Öffnen eines Standardmäßigen Popupdialogfelds.

Bevor Sie beginnen

Um die fertige Erweiterung zu testen, die Sie in diesem Tutorial erstellen, laden Sie den Quellcode aus dem MicrosoftEdge-Extensions-Repository > extension-getting-started-part1 herunter. Der Quellcode wurde von Manifest V2 auf Manifest V3 aktualisiert.

Schritt 1: Erstellen einer manifest.json-Datei

Jedes Erweiterungspaket muss über eine manifest.json Datei im Stammverzeichnis verfügen. Das Manifest enthält Details zu Ihrer Erweiterung, der Version des Erweiterungspakets, dem Namen und der Beschreibung der Erweiterung usw.

Der folgende Code beschreibt die grundlegenden Informationen, die in Ihrer manifest.json Datei erforderlich sind:

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day."
}

Schritt 2: Hinzufügen von Symbolen

Erstellen Sie zunächst das icons Verzeichnis in Ihrem Projekt, um die Symbolbilddateien zu speichern. Die Symbole werden für das Hintergrundbild der Schaltfläche verwendet, die benutzer zum Starten der Erweiterung auswählen.

Symbol auf der Symbolleiste zum Öffnen der Erweiterung

Für Symbole:

  • Es wird empfohlen, format zu verwendenPNG, aber Sie können auch die Formate , GIFoder ICOJPEG verwendenBMP.
  • Es wird empfohlen, Bilder mit einer Größe von 128 x 128 px zu verwenden, die bei Bedarf vom Browser geändert werden.

Die Verzeichnisse Ihres Projekts sollten der folgenden Struktur ähneln:

└── part1
    ├── manifest.json
    └── icons
        ├── nasapod16x16.png
        ├── nasapod32x32.png
        ├── nasapod48x48.png
        └── nasapod128x128.png

Fügen Sie als Nächstes der Datei die manifest.json Symbole hinzu. Aktualisieren Sie Ihre manifest.json Datei mit den Symbolinformationen, sodass sie dem folgenden Code entspricht. Die png im folgenden Code aufgeführten Dateien sind in der download-Datei verfügbar, die weiter oben in diesem Artikel erwähnt wurde.

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    }
}

Schritt 3: Öffnen eines Standardmäßigen Popupdialogfelds

Erstellen Sie nun eine HTML Datei, die ausgeführt werden soll, wenn der Benutzer Ihre Erweiterung startet. Erstellen Sie die HTML-Datei mit dem Namen popup.html in einem Verzeichnis namens popup. Wenn Benutzer das Symbol auswählen, um die Erweiterung zu starten, popup/popup.html wird als modales Dialogfeld angezeigt.

Fügen Sie den Code aus der folgenden Auflistung zu hinzu, um popup.html das Sternbild anzuzeigen:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>NASA picture of the day</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Display the stars image" />
        </div>
    </body>
</html>

Stellen Sie sicher, dass Sie die Bilddatei images/stars.jpeg dem Ordner images hinzufügen. Die Verzeichnisse Ihres Projekts sollten der folgenden Struktur ähneln:

└── part1
    ├── manifest.json
    ├── icons
    │   ├── nasapod16x16.png
    │   ├── nasapod32x32.png
    │   ├── nasapod48x48.png
    │   └── nasapod128x128.png
    ├── images
    │   └── stars.jpeg
    └── popup
        └── popup.html

Registrieren Sie schließlich das Popupfenster in manifest.json unter browser_action (in Manifest V2) oder unter action (in Manifest V3), wie im folgenden Code gezeigt:

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}

Nächste Schritte

Das ist alles, was Sie benötigen, um eine funktionierende Erweiterung zu entwickeln. Fahren Sie nun mit dem Querladen und Testen Ihrer Erweiterung fort. Weitere Informationen finden Sie unter Querladen einer Erweiterung.