Beispiel: Anzeigen eines Bilds in einem Popupfenster

Dieses Beispiel ist eine einfache statische Erweiterung ohne JavaScript, die das stars.jpeg Bild auf einer kleinen Webseite in einem Popup auf einer beliebigen Microsoft Edge-Registerkarte anzeigt:

Klonen des MicrosoftEdge-Extensions-Repositorys

Sie können verschiedene Tools verwenden, um ein GitHub-Repository zu klonen. Sie können ein ausgewähltes Verzeichnis herunterladen oder das gesamte Repository klonen. Diese Anweisungen verwenden GitHub Desktop, um das Repository zu klonen und zu einem Arbeitsbranch zu wechseln.

So klonen Sie das MicrosoftEdge-Extensions Repository auf Ihrem lokalen Laufwerk:

1. Falls noch nicht geschehen, installieren Sie GitHub Desktop: Wechseln Sie zu https://github.com/apps/desktop, und klicken Sie dann auf die Schaltfläche Jetzt herunterladen .

2. Wechseln Sie zu MicrosoftEdge-Erweiterungen.

3. Klicken Sie auf die Schaltfläche Code , und wählen Sie dann Mit GitHub Desktop öffnen aus.

   Ein Dialogfeld mit der Meldung Diese Website versucht, GitHubDesktop.exe zu öffnen, wird geöffnet.

4. Klicken Sie auf die Schaltfläche Öffnen .

   GitHub Desktop wird geöffnet, wobei das Repository MicrosoftEdge-Extensions in der Dropdownliste oben links ausgewählt ist.

   Alternativ wird in GitHub Desktop das Dialogfeld Repository klonen geöffnet:

   

5. Geben Sie den pfad des lokalen Laufwerks an, in dem das geklonte Repositoryverzeichnis abgelegt werden soll. Beispiel: C:\Users\accountname\GitHub\.

6. Klicken Sie auf die Schaltfläche Klonen .

   Erstellen eines Arbeitsbranchs:

7. Stellen Sie in GitHub Desktop sicher, dass in der oberen linken Ecke des GitHub-Desktops das aktuelle RepositoryMicrosoftEdge-Extensions lautet.

   In der Dropdownliste Current branch steht Standard.

8. Klicken Sie in der Dropdownliste Aktuelle Verzweigung auf die Registerkarte Verzweigungen , und klicken Sie dann auf die Schaltfläche Neuer Branch .

   Das Dialogfeld Branch erstellen wird geöffnet.

9. Geben Sie im Textfeld Name einen Branchnamen ein, z. B. ext-sample-1, und klicken Sie dann auf die Schaltfläche Branch erstellen .

   In der oberen Mitte und unten links von GitHub Desktop wird der aktuelle Branch angezeigt, z. B. ext-sample-1.

Sie können jetzt den Code in Ihrem Arbeitsbranch ändern, ohne den Code im Branch "Standard" des Repositorys zu ändern. Später möchten Sie möglicherweise zurück zum Branch "Standard" wechseln oder einen anderen Branch basierend auf dem Branch "Standard" erstellen.

Lokales Installieren des Beispiels

Anstatt das Beispiel aus dem Store zu installieren, installieren Sie das Beispiel lokal, sodass Sie es möglicherweise ändern und die Änderungen schnell testen können. Lokales Installieren wird manchmal als Querladen einer Erweiterung bezeichnet.

1. Klicken Sie in Microsoft Edge neben der Adressleiste auf die Schaltfläche Erweiterungen (), wenn dieses Symbol angezeigt wird. Oder wählen Sie Einstellungen und mehr (...) >Erweiterungen. Das Popupfenster Erweiterungen wird geöffnet:

   

2. Klicken Sie auf Erweiterungen verwalten. Die Seite Erweiterungsverwaltung wird auf einer neuen Registerkarte geöffnet:

   

3. Aktivieren Sie die Umschaltfläche Entwicklermodus .

4. Wenn Sie Ihre Erweiterung zum ersten Mal installieren, klicken Sie auf die Schaltfläche Entpackt laden ( Das Dialogfeld Erweiterungsverzeichnis auswählen wird geöffnet.

5. Wählen Sie das Verzeichnis aus, das die Quelldateien der Erweiterung enthält, z manifest.json. B. , und klicken Sie dann auf die Schaltfläche Ordner auswählen .

   Beispielpfad:

   C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\

   Die Erweiterung wird im Browser installiert, ähnlich wie eine Erweiterung, die aus dem Store installiert wird:

   

Ausführen des Beispiels

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. toDO-App. Für dieses Beispiel ist dieser Schritt optional und entspricht nur den Screenshots. Für dieses Beispiel muss keine Webseite geöffnet sein.

2. Klicken Sie oben rechts in Microsoft Edge auf die Schaltfläche Erweiterungen (). Oder wählen Sie Einstellungen und mehr (...) >Erweiterungen.

   Das Popupfenster Erweiterungen wird geöffnet:

   

3. Klicken Sie auf das Symbol oder den Namen der Erweiterung (NASA-Bild des Tages-Popup).

   Die Erweiterung wird geöffnet, und das Symbol der Erweiterung wird neben der Adressleiste und dem Symbol Erweiterungen () hinzugefügt. Die Erweiterung zeigt popup.htmlin einem Popupfenster an, das stars.jpegenthält:

   

   Sie können diese bestimmte Beispielerweiterung auf einer beliebigen Registerkarte öffnen, einschließlich einer leeren Registerkarte oder der Registerkarte Erweiterungen verwalten .

Siehe auch:

• Querladen einer Erweiterung, um sie lokal zu installieren und zu testen

Untersuchen des Beispiels

In den folgenden Abschnitten untersuchen Sie das Beispiel. Anschließend können Sie zum Entwickeln Ihrer eigenen Microsoft Edge-Erweiterung das Verzeichnis des Beispiels kopieren und ändern sowie die resultierende Erweiterung installieren und testen.

Dateien und Verzeichnisse

Das Beispiel weist die folgende Verzeichnisstruktur auf:

Beispielpfad für das Beispiel: C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\

Verzeichnisse und Dateien im \part1\ Verzeichnis:

/icons/
   nasapod16x16.png
   nasapod32x32.png
   nasapod48x48.png
   nasapod128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json

• Das /icons/ Verzeichnis enthält Versionen einer .png Datei, die verwendet wird, um die Erweiterung in der Nähe der Adressleiste des Browsers darzustellen.
• Das /images/ Verzeichnis enthält stars.jpeg, das im Popupfenster der Erweiterung angezeigt wird.
• Das /popup/ Verzeichnis enthält popup.html, das den Webseiteninhalt definiert, der im Popupfenster der Erweiterung angezeigt wird.
• manifest.json enthält grundlegende Informationen zur Erweiterung.

Die Manifestdatei (manifest.json)

Jedes Erweiterungspaket muss über eine manifest.json Datei im Stammverzeichnis verfügen. Das Manifest enthält Details ihrer Erweiterung, die Version des Erweiterungspakets sowie den Namen und die Beschreibung der Erweiterung.

manifest.json enthält die folgenden Zeilen:

{
  "name": "NASA picture of the day pop-up",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A basic extension that displays an image in a pop-up.",
  "icons": {
      "16": "icons/nasapod16x16.png",
      "32": "icons/nasapod32x32.png",
      "48": "icons/nasapod48x48.png",
      "128": "icons/nasapod128x128.png"
  },
  "action": {
      "default_popup": "popup/popup.html"
  }
}

Symbole zum Starten der Erweiterung

Das /icons/ Verzeichnis enthält die Symbolbilddateien. Die Symbole werden als Hintergrundbild für die Schaltfläche verwendet, auf die Sie klicken, um die Erweiterung zu starten:

Wenn die Erweiterung ausgeführt wird, wird eines der Symbole auf der Symbolleiste neben der Adressleiste angezeigt:

Um die Erweiterung zu schließen, klicken Sie auf der Symbolleiste auf das Symbol der Erweiterung, oder klicken Sie auf die Schaltfläche Erweiterungen ().

Empfehlungen für Symbole:

• Verwenden Sie PNG format, aber Sie können auch die Formate , GIFoder ICOJPEG verwendenBMP.
• Wenn Sie eine einzelne Symboldatei angeben, verwenden Sie 128 x 128 px, deren Größe bei Bedarf vom Browser geändert werden kann.

Popupdialogfeld (popup.html)

popup.html im popup Verzeichnis wird ausgeführt, wenn Sie die Erweiterung starten. Wenn Sie auf das Symbol klicken, um die Erweiterung zu starten, wird diese Datei als modales Dialogfeld angezeigt.

popup.html enthält den folgenden Code, um einen Titel und 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="Stars" />
        </div>
    </body>
</html>

Das Popup (popup.html) wird im manifest.jsonaction Schlüsselabschnitt als in "default_popup" registriert:

manifest.json (Teil)

{
    ...
    "action": {
        "default_popup": "popup/popup.html"
    }
}

Nächste Schritte

Um Ihre eigene Microsoft Edge-Erweiterung zu entwickeln, können Sie das Verzeichnis des Beispiels kopieren und ändern sowie die resultierende Erweiterung installieren und testen.

Nachdem Sie dieses Erweiterungsbeispiel ausgeführt und getestet haben, können Sie mit Beispiel: Einfügen eines Bilds auf der Webseite fortfahren, das javaScript dynamisch als Inhalt auf der Browserregisterkarte einfügt.

Siehe auch

• Querladen einer Erweiterung, um sie lokal zu installieren und zu testen
• Beispiel: Einfügen eines Bilds in die Webseite

GitHub:

• MicrosoftEdge-Extensions-Repository .
  • /part1/ – Quellcode des Beispiels für Teil 1.