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.

Git Bash-Eingabeaufforderung

1. Geben Sie in einer Eingabeaufforderung ein git , um zu überprüfen, ob Git installiert ist.

2. Falls noch nicht geschehen, laden Sie Git herunter , und installieren Sie es.

3. Wenn dies noch nicht geschehen ist, starten Sie eine Eingabeaufforderung, in der Git installiert ist.

4. Wechseln Sie zu dem Verzeichnis, in das Sie das Repository MicrosoftEdge-Extensions klonen möchten. Zum Beispiel:

   cd C:/Users/localAccount/GitHub/
   

5. Navigieren Sie in Microsoft Edge zum Repository MicrosoftEdge-Extensions .

6. Klicken Sie rechts neben der grünen Schaltfläche Code auf den Pfeil nach unten, und klicken Sie dann im Abschnitt Klonen mithilfe der Web-URL auf die Schaltfläche URL in Zwischenablage kopieren neben https://github.com/microsoft/MicrosoftEdge-Extensions.git.

7. Geben Sie im Eingabeaufforderungsfenster den folgenden Befehl ein:

   git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git
   

   Das /MicrosoftEdge-Extensions/ Verzeichnis wird innerhalb des von Ihnen angegebenen Verzeichnisses hinzugefügt.

Erstellen eines Arbeitsbranchs und Wechseln zu diesem Branch

1. Überprüfen Sie die Liste der Verzeichnisse:

   ls
   

   Das /MicrosoftEdge-Extensions/ Verzeichnis ist aufgeführt.

2. Wechseln Sie zum neuen Verzeichnis:

   cd MicrosoftEdge-Extensions
   

3. Erstellen Sie einen Arbeitsbranch:

   git branch test
   

4. Wechseln Sie zum Arbeitsbranch:

   git switch test
   

   Ertrag: Switched to branch 'test'

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.

GitHub Desktop

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 zum Repository MicrosoftEdge-Extensions .

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 und Wechseln zu diesem Branch

1. 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.

2. 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.

3. Geben Sie im Textfeld Name einen Branchnamen ein, z. B. test, 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. test.

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 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 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. 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

GitHub:

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