Freigeben über

Beispiel: Bildeinfügung mithilfe eines Inhaltsskripts

  • Artikel

In diesem Beispiel wird JavaScript-Code verwendet, um das stars.jpeg Bild oben auf der aktuellen Webseite innerhalb des <body> -Elements einzufügen. Das Popupfenster der Erweiterung enthält einen Titel und eine HTML-Schaltfläche mit der Bezeichnung Bild einfügen. Wenn Sie auf die Schaltfläche Bild einfügen klicken, sendet der JavaScript-Code der Erweiterung eine Nachricht aus dem Popupfenster des Erweiterungssymbols und fügt dynamisch JavaScript ein, das auf der Browserregisterkarte ausgeführt wird.

In diesem Beispiel werden die folgenden Erweiterungsfeatures veranschaulicht:

  • Einfügen von JavaScript-Bibliotheken in eine Erweiterung.
  • Verfügbarmachen von Erweiterungsressourcen auf Browserregisterkarten.
  • Einschließen von Inhaltswebseiten in vorhandene Browserregisterkarten.
  • Inhaltswebseiten lauschen auf Nachrichten aus Popups und antworten.

Vorschau des Beispiels

Sie installieren das Erweiterungsbeispiel über die Registerkarte Erweiterungen verwalten des Browsers, klicken Sie auf die Schaltfläche Erweiterungen (Symbol Erweiterungen), um die Liste der installierten Erweiterungen anzuzeigen, und klicken Sie dann auf diese Beispielerweiterung:

Klicken auf das Symbol der Erweiterung, um die Erweiterung zu öffnen

Die Erweiterung zeigt eine kleine HTML-Webseite in einem Popupfenster an, die einen Titel, eine Schaltfläche "Bild einfügen " und Anweisungen enthält:

popup.html nach auswahl des Erweiterungssymbols angezeigt

Wenn Sie auf die Schaltfläche Bild einfügen klicken, wird JavaScript-Code vorübergehend am oberen Rand der aktuellen Webseite eingefügt stars.jpeg , wodurch der Inhalt der Webseite unter das Bild verschoben wird. Der eingefügte Inhalt legt das image-Element so fest, dass das statische Bild stars.jpeg oben auf der aktuellen Webseite angezeigt wird:

Die Abbildung, die im Browser angezeigt wird

Wenn Sie auf das Bild klicken, entfernt das eingefügte JavaScript das Bild aus der DOM-Struktur und webseite.

Rufen Sie das Beispiel wie folgt ab, installieren Sie es und führen Sie es aus.

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.

  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.

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 (Erweiterungssymbol), wenn dieses Symbol angezeigt wird. Oder wählen Sie Einstellungen und mehr (Symbol >Erweiterungen SymbolErweiterungen aus. Das Popupfenster Erweiterungen wird geöffnet:

    Popupfenster

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

    Aktivieren des Entwicklermodus

  3. Aktivieren Sie die Umschaltfläche Entwicklermodus .

  4. Wenn Sie die Beispielerweiterung zum ersten Mal installieren, klicken Sie auf die Schaltfläche Entpackt laden (Symbol 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-inserter-content-script

  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:

    Seite

Ausführen des Beispiels

  1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. toDO-App. Die Registerkarte darf nicht leer sein und darf nicht die Seite Erweiterungen verwalten sein, da in diesem Beispiel Inhalt in die aktuelle Webseite eingefügt wird.

  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 (Erweiterungssymbol). Oder wählen Sie Einstellungen und mehr (Symbol >Erweiterungen aus.

    Das Popupfenster Erweiterungen wird geöffnet:

    Klicken auf das Symbol der Erweiterung, um die Erweiterung zu öffnen

  4. Klicken Sie auf das Symbol oder den Namen der Erweiterung (Bildeinfügung mit Inhaltsskript).

    Die Erweiterung wird geöffnet, und das Symbol der Erweiterung wird neben der Adressleiste und dem Symbol Erweiterungen (Erweiterungssymbol) hinzugefügt.

    Ein Popupfenster wird geöffnet, das eine kleine HTML-Webseite mit einem Titel, einer Schaltfläche "Bild einfügen " und Anweisungen enthält:

    popup.html nach dem Klicken auf das Erweiterungssymbol

  5. Klicken Sie auf die Schaltfläche Bild einfügen . stars.jpeg wird oben auf der aktuellen Webseite auf der aktuellen Registerkarte eingefügt, wodurch der Inhalt der Webseite unter das Bild verschoben wird:

    Die Abbildung, die im Browser angezeigt wird

  6. Klicken Sie auf das stars.jpeg Bild, das oben auf der Webseite ausfüllt. Dieses Bildelement wird aus der DOM-Struktur und der Webseite entfernt, und die aktuelle Webseite wird wiederhergestellt, wobei der Inhalt wieder nach oben auf der Registerkarte verschoben wird.

Die Erweiterung sendet eine Nachricht aus dem Popupfenster des Erweiterungssymbols und fügt dynamisch JavaScript ein, das als Inhalt ausgeführt wird, auf der Browserregisterkarte. Der eingefügte Inhalt legt fest, dass das Bildelement oben auf der aktuellen Webseite angezeigt wird stars.jpeg , und entfernt dann das Bild, wenn Sie auf das Bild klicken.

Siehe auch:

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 und die folgenden Dateien auf.

Beispielpfad für das Beispiel:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

Verzeichnisse und Dateien im /picture-inserter-content-script/ Verzeichnis:

/content-scripts/
   content.js
/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
   popup.js
manifest.json
  • Das /content-scripts/ Verzeichnis enthält content.jsdas Skript, das in die aktuelle Webseite eingefügt wird.
  • Das /icons/ Verzeichnis enthält Versionen einer .png Datei, die verwendet wird, um die Erweiterung in der Nähe der Adressleiste des Browsers, im Popupfenster Erweiterungen und auf der Verwaltungsseite für Erweiterungen darzustellen.
  • Das /images/ Verzeichnis enthält stars.jpeg, das im Popupfenster der Erweiterung angezeigt wird.
  • Das /popup/ Verzeichnis enthält die Dateien:
    • popup.html definiert den Inhalt der anfänglichen Popupwebseite der Erweiterung (Titel, Schaltfläche und Anweisungen).
    • popup.js für die erste Popupwebseite wird eine Nachricht an das Inhaltsskript (content.js) gesendet, das auf der Registerkartenseite ausgeführt wird, und gibt an, welche Bilddatei angezeigt werden soll.
  • manifest.json enthält grundlegende Informationen zur Erweiterung.

Strategie zum Aktualisieren der Webseite, um das Bild oben einzufügen (stars.jpeg)

Dieses Beispiel enthält ein Inhaltsskript, das in die Webseite eingefügt wird, die auf der aktuellen Browserregisterkarte geladen wird.

  1. Wenn Sie das Erweiterungsbeispiel ausführen, wird die erste Popup-HTML-Seite (popup.html) mit einem Titel, Anweisungen und der Schaltfläche Bild einfügen angezeigt.

  2. Wenn Sie auf die Schaltfläche Bild einfügen klicken, sendet javaScript (popup.js) für die erste Popupseite eine Nachricht an das Inhaltsskript (content.js), das auf der Registerkartenseite ausgeführt wird. Die Meldung gibt an, welche Bilddatei angezeigt werden soll.

  3. Das auf der Registerkartenseite ausgeführte Inhaltsskript (content.js) empfängt die Meldung und zeigt die angegebene Bilddatei (stars.jpeg) an.

Die anfängliche Popupwebseite (popup.html)

/popup/popup.html wird in der Manifestdatei als Webseite angegeben, die im anfänglichen Popupfenster der Erweiterung angezeigt werden soll. Die Manifestdatei enthält das Schlüsselfeld "default_popup": "popup/popup.html". Die Datei dieses Beispiels popup.html ist eine kleine Webseite, die einen Titel, eine Schaltfläche Bild einfügen und Anweisungen enthält.

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
                width: 500px;
            }
            button {
                background-color: #336dab;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Picture inserter using a content script</h1>
        <button id="sendmessageid">Insert picture</button>
        <script src="popup.js"></script>
        <p>Click the displayed image to remove it from the webpage.</p>
    </body>
</html>

JavaScript (popup.js) für die anfängliche Popupseite, um eine Nachricht an das eingefügte JavaScript zu senden

/popup/popup.jssendet eine Nachricht an das Inhaltsskript (content.js), das vorübergehend in die Browserregisterkarte eingefügt wird. Fügen Sie dazu popup.js der Schaltfläche Bild einfügen der Popupwebseite ein onclick Ereignis hinzu, das die ID sendmessageidaufweist:

popup.js (Teil):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        ...
    };
}

chrome.tabs.query Sucht in popup.jsnach der aktuellen Browserregisterkarte und sendet dann chrome.tabs.sendMessage eine Nachricht an diese Registerkarte. Das Beispiel übergibt die ID der aktuellen Registerkarte. Die Nachricht muss die URL für das Bild enthalten, das angezeigt wird.

Sie müssen eine eindeutige ID senden, die dem eingefügten Bild zugewiesen werden soll, um das Imageelement später erneut zu finden und zu löschen. Um eine eindeutige ID zu senden, die dem eingefügten Bild zugewiesen werden soll, wird die eindeutige ID in popup.js generiert und an das Inhaltsskript übergeben.

popup.js (vollständig):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    url: chrome.runtime.getURL("images/stars.jpeg"),
                    imageDivId: crypto.randomUUID(),
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
        });
    };
}

Der Nachrichtenlistener des Inhaltsskripts (content.js)

Dies ist die Datei, die content-scripts\content.js in jede Browserregisterkartenseite eingefügt wird. Diese Datei ist im Abschnitt in content-scriptsmanifest.jsonaufgeführt.

content.js (vollständig):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
});

content.js registriert einen Listener mithilfe der chrome.runtime.onMessage.addListener Erweiterungs-API-Methode. Dieser Listener wartet auf die Nachricht, die beim popup.js Aufrufen chrome.tabs.sendMessagevon gesendet wird.

In content.jsakzeptiert die addListener Methode einen einzelnen Parameter, der eine Funktion ist. Der erste Parameter dieser Funktion, request, enthält die Details der Nachricht, die übergeben wird.

Wenn content.jsin ein Ereignis vom Listener verarbeitet wird, wird die an übergebene addListener Listenerfunktion ausgeführt. Der erste Parameter der übergebenen Listenerfunktion ist ein request Objekt mit Attributen, die von zugewiesen sind sendMessage.

In popup.jssind urlfür den chrome.tabs.sendMessage Methodenaufruf die Attribute des zweiten Parameters für sendMessage , imageDivIdund tabId.

Dies ist die isolierte Listenerfunktion, die an addListenerübergeben wird:

content.js (Teil)

function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
}

Die ersten fünf Zeilen in der Listenerfunktion fügen ein img Element direkt unterhalb des Elements auf der body Browserregisterkarte an.

Die zweite Zeile in der Listenerfunktion, img.id = request.imageDivId;, legt die ID des img Elements auf die imageDivId der übergebenen Anforderung fest.

In der Listenerfunktion fügt der addEventListener Aufruf eine click Ereignislistenerfunktion hinzu, die das gesamte Bild abdeckt, sodass der Benutzer auf eine beliebige Stelle auf das Bild klicken kann. Wenn Sie auf das eingefügte Bild klicken, wird das Bild durch die Zeile img.remove();von der aktuellen Webseite entfernt, und der Ereignislistener wird ebenfalls entfernt, indem angegeben { once: true }wird.

Wie stars.jpeg wird auf jeder Browserregisterkarte verfügbar gemacht?

So stellen Sie eine images/stars.jpeg beliebige Browserregisterkarte zur Verfügung:

  • popup.js (oben) verwendet die chrome.runtime.getURL API.
  • Das Manifest (unten) gibt an, dass web_accessible_resources vom Typ .jpeg mit allen URLs übereinstimmt.

Im Beispiel wird das Bild mithilfe des src -Attributs des img -Elements in die Inhaltsseite eingefügt. Die Inhaltsseite wird in einem eindeutigen Thread ausgeführt, der nicht mit dem Thread identisch ist, der die Erweiterung ausführt. Die statische Bilddatei muss als Webressource verfügbar gemacht werden, damit sie ordnungsgemäß funktioniert.

In der manifest.json Datei wird ein weiterer Eintrag hinzugefügt, um zu deklarieren, dass das Bild für alle Browserregisterkarten verfügbar ist:

/manifest.json (Teil):

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

Der Code in der popup.js Datei sendet eine Nachricht an die Inhaltsseite, die in die aktuell aktive Registerkartenseite eingebettet ist.

So werden Ressourcen im Manifest aufgelistet (manifest.json)

Im Beispiel wird die Inhaltsseite erstellt und eingefügt, die auf der aktuellen aktiven Registerkartenseite eingebettet ist. manifest.json enthält und content-scriptsweb_accessible_resourceswie folgt:

/manifest.json (vollständig):

{
    "name": "Picture inserter using content script",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A browser extension that uses JavaScript to insert an image at the top of the current 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"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

Der Abschnitt des Manifests content_scripts fügt JavaScript in alle Browserregisterkarten ein.

content_scripts Im Schlüsselabschnitt der Manifestdatei wird das matches -Attribut auf <all_urls>festgelegt. Dies bedeutet, dass .js (oder .css) dateien, die content_scripts im Schlüsselabschnitt angegeben sind, in alle Browserregisterkartenseiten eingefügt werden, wenn jede Registerkarte geladen wird. Die zulässigen Dateitypen, die eingefügt werden können, sind JavaScript (.js) und CSS (.css).

Das Manifest dieses Beispiels gibt ein einzelnes Inhaltsskript an, content-scripts/content.js.

Jedes Inhaltsskript wird in einem eigenen Thread mit Sandkasten ausgeführt.

Jede Registerkartenseite (und Erweiterung) wird in einem eigenen Thread ausgeführt. Auch wenn die Browserregisterkarte eine Webseite enthält, auf der JavaScript-Code ausgeführt wird, hat das content.js Skript, das von der Erweiterung in diese Browserregisterkarte eingefügt wird, keinen Zugriff auf diesen JavaScript-Code. Das eingefügte Inhaltsskript hat nur Zugriff auf das DOM der Webseite.

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.

Siehe auch

GitHub: