Beispiel: Bildanzeige-Popupwebseite

Dieses Beispiel ist eine Browsererweiterung 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.

Klonen Sie das Repository MicrosoftEdge-Extensions auf Ihr lokales Laufwerk, und wechseln Sie dann wie folgt zu einem Arbeitsbranch.

Lokales Installieren des Beispiels

Anstatt das Beispiel aus Microsoft Edge-Add-Ons zu installieren, installieren Sie das Beispiel lokal, damit 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 aus. 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. .

   Beispielpfad:

   C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

6. Klicken Sie auf die Schaltfläche Ordner auswählen .

   Das Dialogfeld Erweiterungsverzeichnis auswählen wird geschlossen.

   Die Erweiterung wird im Browser installiert, ähnlich wie eine Erweiterung, die über Microsoft Edge-Add-Ons 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. Aktualisieren Sie die Webseite. Dies ist manchmal erforderlich, nachdem eine Erweiterung neu geladen wurde.

3. Wenn dieses Symbol in Microsoft Edge rechts neben der Adressleiste angezeigt wird, klicken Sie auf die Schaltfläche Erweiterungen (). Oder wählen Sie Einstellungen und mehr (>Erweiterungen aus.

   Das Popupfenster Erweiterungen wird geöffnet:

   

4. Klicken Sie auf das Symbol oder den Namen der Erweiterung (Bildanzeige-Popupwebseite).

   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:

   

5. Klicken Sie auf die Schaltfläche der Erweiterung neben der Adressleiste. Das Popupfenster wird geschlossen.

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\picture-viewer-popup-webpage

Verzeichnisse und Dateien im /picture-viewer-popup-webpage/ Verzeichnis:

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.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": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up webpage.",
  "icons": {
      "16": "icons/extension-icon16x16.png",
      "32": "icons/extension-icon32x32.png",
      "48": "icons/extension-icon48x48.png",
      "128": "icons/extension-icon128x128.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>Picture viewer pop-up webpage</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Stars" />
        </div>
    </body>
</html>

Die Popupwebseite (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.

Nach dem Ausführen und Testen dieses Erweiterungsbeispiels können Sie mit Beispiel: Bildeinfügung fortfahren, indem Sie ein Inhaltsskript verwenden, das javaScript dynamisch als Inhalt auf der Browserregisterkarte einfügt.

Siehe auch

• Querladen einer Erweiterung, um sie lokal zu installieren und zu testen
• Beispiel: Bildeinfügung mithilfe eines Inhaltsskripts
• Beispiele für Microsoft Edge-Erweiterungen

GitHub:

• MicrosoftEdge-Extensions-Repository .
  • /picture-viewer-popup-webpage/ – Quellcode dieses Beispiels.