Freigeben über

Teil 2 des Tutorials: Einfügen eines Bilds in die Webseite mithilfe von JavaScript

  • Artikel

Im Beispiel Teil 2: Verwenden von JavaScript zum Einfügen eines Bilds in die Webseite wird JavaScript-Code verwendet, um das stars.jpeg Bild oben auf der aktuell geöffneten Webseite einzufügen. Das Popupfenster der Erweiterung enthält einen Titel und eine HTML-Schaltfläche mit der Bezeichnung Anzeigen. Wenn Sie auf die Schaltfläche Anzeigen klicken, sendet JavaScript eine Nachricht aus dem Popupfenster des Erweiterungssymbols und fügt javaScript, das als Inhalt ausgeführt wird, dynamisch auf der Browserregisterkarte ein.

Im Beispiel zu Teil 2 werden die folgenden Erweiterungstechnologien verwendet:

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

Sie öffnen die Erweiterung Teil 2 über die Schaltfläche Erweiterungen (Symbol Erweiterungen), nachdem Sie die Erweiterung über die Registerkarte Erweiterungen verwalten installiert haben:

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

Die Erweiterung zeigt eine kleine HTML-Seite in einem Popupfenster an, die einen Titel, Anweisungen und eine Schaltfläche Anzeigen enthält:

popup.html nach auswahl des Erweiterungssymbols angezeigt

Wenn Sie auf die Schaltfläche Anzeigen 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 Bildelement fest, das oben auf der aktuellen Webseite angezeigt werden stars.jpeg soll, und entfernt dann das Bild, wenn Sie auf das Bild klicken:

Die Abbildung, die im Browser angezeigt wird

Wenn Sie die abgeschlossene Erweiterung sofort installieren und ausführen oder den fertig gestellten Code anzeigen möchten, gehen Sie folgendermaßen vor:

Anschließend können Sie die fertige Erweiterung installieren und ausführen, die sich im Repository befindet, per Querladen einer Erweiterung, um sie lokal zu installieren und zu testen. Die Registerkarte muss vor dem Öffnen der Erweiterung eine Webseite enthalten.

Schritt 1: Aktualisieren popup.html, um eine Schaltfläche einzuschließen

Um diesen Artikel zu verwenden, führen Sie zunächst die Schritte unter Tutorial teil 1: Anzeigen eines Bilds in einem Popupfenster aus. Das heißt, klonen Sie das MicrosoftEdge-Extensions Repository, installieren Sie die Demo zu Teil 1, und führen Sie diese Demo aus.

Dieser Schritt wurde bereits in popup.html im MicrosoftEdge-Extensions-Repository ausgeführt.

Der hypothetische Startzustand für diesen Teil 2-Artikel, wenn Sie das Beispiel manuell zum Hinzufügen von JavaScript erstellen würden, ist, dass ein Verzeichnis für den Code von Teil 2 vorhanden ist, das die gleichen Verzeichnisse und Dateien enthält, die im Teil 1-Artikel erstellt wurden. Dies können gleichgeordnete Verzeichnisse für Teil 1 und Teil 2 sein, wie im MicrosoftEdge-Extensions-Repository.

Es ist möglich, die abgeschlossenen Teil 1- und Teil 2-Demos aus dem MicrosoftEdge-Extensions Repository parallel zu installieren. Es wird empfohlen, zuerst das Repository zu klonen und die Demos zu installieren und auszuführen, bevor (oder anstelle von) mit einem leeren Verzeichnis beginnt, und dann manuell Verzeichnisse erstellen, Dateien erstellen und Code in die Dateien einfügen.

Um die abgeschlossene Demo zu Teil 1 manuell zu erweitern, um die Demo zu Teil 2 zu erstellen, müssen Sie die folgenden Schritte ausführen:

  1. Fügen Sie in dem Ordner, der die popup.html Datei für Teil 2 enthält (anfänglich eine Kopie der Datei Teil 1), tagging hinzu, die einen Titel mit einer Schaltfläche anzeigt.
  2. Fügen Sie einen Verweis auf eine JavaScript-Datei ein, popup.js.
  3. Diese Schaltfläche programmieren.

Im Folgenden finden Sie die BEISPIEL-HTML-Datei:

/popup/popup.html (vollständig):

<!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>Display the NASA picture of the day</h1>
        <h2>(click the image to remove it from the webpage)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

Führen Sie die Schritte unter Querladen einer Erweiterung aus, um sie lokal zu installieren und zu testen , um die Erweiterung lokal zu aktualisieren und dann die Erweiterung auszuführen. Die Registerkarte muss vor dem Öffnen der Erweiterung eine Webseite enthalten.

Nach dem Aktualisieren und Öffnen der Erweiterung wird ein Popupfenster geöffnet, das eine kleine HTML-Seite mit einem Titel, Anweisungen und einer Schaltfläche Anzeigen enthält:

popup.html nach dem Klicken auf das Erweiterungssymbol

Schritt 2: Aktualisieren der Webseite, um das Bild oben einzufügen

Nach dem Hinzufügen der Schaltfläche Anzeigen besteht die nächste Aufgabe darin, dass die Schaltfläche die images/stars.jpeg Bilddatei oben auf der Webseite anzeigt, die sich auf der aktiven Registerkarte befindet.

Jede Registerkartenseite (und Erweiterung) wird in einem eigenen Thread ausgeführt. In einem folgenden Schritt erstellen Sie ein Inhaltsskript, das in die Registerkartenseite eingefügt wird. Das eingefügte Skript sendet eine Nachricht von Ihrem Popupfenster an das Inhaltsskript, das auf der Registerkartenseite ausgeführt wird. Das Inhaltsskript empfängt die Meldung, die beschreibt, welches Bild angezeigt werden soll.

Schritt 3: Erstellen des Popup-JavaScript zum Senden einer Nachricht

Dieser Schritt wurde bereits in popup.js im MicrosoftEdge-Extensions-Repository ausgeführt. Wenn Sie die Erweiterung Teil 2 manuell erstellen möchten, fahren Sie mit den folgenden Schritten fort.

Erstellen Sie die popup/popup.js Datei, und fügen Sie dann den folgenden Code in dieser Datei hinzu.

Dieser Code sendet eine Nachricht an Ihr noch nicht erstelltes Inhaltsskript, die Sie vorübergehend erstellen und in Ihre Browserregisterkarte einfügen müssen. Dazu fügt der folgende Code der Popupschaltfläche Anzeige ein onclick Ereignis hinzu:

/popup/popup.js (initial):

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

Suchen Sie im onclick -Ereignis nach der aktuellen Browserregisterkarte. Verwenden Sie dann die Erweiterungs-API chrome.tabs.sendmessage , um eine Nachricht an diese Registerkarte zu senden.

In dieser Nachricht müssen Sie die URL zu dem Bild angeben, das Sie anzeigen möchten. Stellen Sie sicher, dass Sie eine eindeutige ID senden, die dem eingefügten Bild zugewiesen werden soll.

Um eine eindeutige ID zu senden, die dem eingefügten Bild zugewiesen werden soll, sind verschiedene Ansätze möglich:

  • Ansatz 1: Lassen Sie die JavaScript-Datei zum Einfügen von Inhalten diese Bild-ID generieren. Wir werden diesen Ansatz hier nicht verwenden, aus Gründen, die später offensichtlich werden.
  • Ansatz 2: Generieren Sie diese eindeutige ID hier in popup.js, und übergeben Sie diese ID dann an das noch nicht erstellte Inhaltsskript. Wir verwenden diesen Ansatz.

Der folgende Code beschreibt den aktualisierten Code in popup/popup.js. Sie übergeben auch die aktuelle Registerkarten-ID, die weiter unten in diesem Artikel verwendet wird:

/popup/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: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

Schritt 4: Verfügbarmachen stars.jpeg über eine beliebige Browserregisterkarte

Dieser Schritt wurde bereits in manifest.json im MicrosoftEdge-Extensions-Repository ausgeführt. Wenn Sie die Erweiterung Teil 2 manuell erstellen möchten, fahren Sie mit den folgenden Schritten fort.

Sie müssen die chrome.runtime.getURL API verwenden, um sie über eine beliebige Browserregisterkarte verfügbar zu machenimages/stars.jpeg.

Der Grund dafür ist, dass Sie das Bild mithilfe des src -Attributs des img -Elements in die Inhaltsseite einfügen. Die Inhaltsseite wird in einem eindeutigen Thread ausgeführt, der nicht mit dem Thread identisch ist, der die Erweiterung ausführt. Sie müssen die statische Bilddatei als Webressource verfügbar machen, damit sie ordnungsgemäß funktioniert.

Fügen Sie einen weiteren Eintrag in der manifest.json Datei hinzu, um zu deklarieren, dass das Bild für alle Browserregisterkarten verfügbar ist.

Dieser Eintrag lautet wie folgt (Sie sollten ihn in der vollständigen manifest.json Datei unten sehen, wenn Sie die Inhaltsskriptdeklaration hinzufügen, die angezeigt wird):

/manifest.json (Teil):

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

Sie haben nun den Code in Ihre popup.js Datei geschrieben, um eine Nachricht an die Inhaltsseite zu senden, die auf der aktuell aktiven Registerkartenseite eingebettet ist.

Schritt 5: Aktualisieren von für manifest.json neuen Inhalt und Webzugriff

Als Nächstes erstellen Sie die Inhaltsseite, die auf der aktuell aktiven Registerkartenseite eingebettet ist, und fügen sie ein. Dieser Schritt wurde bereits in manifest.json im MicrosoftEdge-Extensions-Repository ausgeführt.

Die aktualisierte manifest.json , die und content-scriptsweb_accessible_resources enthält, lautet wie folgt:

/manifest.json (vollständig):

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension that uses JavaScript to insert an image at the top of the webpage.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

Das matches -Attribut ist auf <all_urls>festgelegt, was bedeutet, dass alle Dateien in content_scripts in alle Browserregisterkartenseiten eingefügt werden, wenn jede Registerkarte geladen wird. Die zulässigen Dateitypen, die eingefügt werden können, sind JavaScript und CSS. Sie haben auch hinzugefügt lib\jquery.min.js. Sie können diese Datei aus dem Ordner /lib/ des MicrosoftEdge-Extensions Repositorys kopieren.

Hinzufügen von jQuery

Dieser Schritt wurde bereits in jquery.min.js im MicrosoftEdge-Extensions-Repository ausgeführt.

Planen Sie in den Inhaltsskripts, die Sie einfügen, die Verwendung von jQuery ($) vor. Sie haben eine minimierte Version von jQuery hinzugefügt und als in Ihr Erweiterungspaket lib\jquery.min.jseingefügt.

Diese Inhaltsskripts werden in einzelnen Sandboxes ausgeführt, was bedeutet, dass die in die popup.js Seite eingefügte jQuery nicht für den Inhalt freigegeben wird.

Grundlegendes zum Thread

Selbst wenn auf der Browserregisterkarte JavaScript auf der geladenen Webseite ausgeführt wird, haben alle eingefügten Inhalte keinen Zugriff auf dieses JavaScript. Das eingefügte JavaScript hat nur Zugriff auf das tatsächliche DOM, das auf dieser Browserregisterkarte geladen wird.

Schritt 6: Hinzufügen des Nachrichtenlisteners für Inhaltsskripts

Um die Demo in Teil 2 manuell zu erstellen, müssen Sie diese Datei erstellen. Dieser Schritt wurde bereits in content.js im MicrosoftEdge-Extensions-Repository ausgeführt.

Dies ist die Datei, die content-scripts\content.js basierend auf dem content-scripts Abschnitt in manifest.jsonjede Browserregisterkartenseite eingefügt wird:

/content-scripts/content.js (vollständig):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img  src="${request.url}" id="${request.imageDivId}"
               class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
          .slide-image {
              height: auto;
              width: 100vw;
          }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

Mit dem obigen JavaScript wird nur eine listener mithilfe der chrome.runtime.onMessage.addListener Erweiterungs-API-Methode registriert. Dieser Listener wartet auf Nachrichten wie die, die Sie von der popup.js weiter oben beschriebenen mit der chrome.tabs.sendMessage Erweiterungs-API-Methode gesendet haben.

Der erste Parameter der addListener -Methode ist eine Funktion, deren erster Parameter, request, die Details der nachricht ist, die übergeben wird. Denken Sie daran, dass aus popup.js, als Sie die sendMessage -Methode verwendet haben, die Attribute des ersten Parameters und sindurl.imageDivId

Wenn ein Ereignis vom Listener verarbeitet wird, wird die Funktion ausgeführt, bei der es sich um den ersten Parameter handelt. Der erste Parameter dieser Funktion ist ein -Objekt, das über Attribute verfügt, die von zugewiesen werden sendMessage. Diese Funktion verarbeitet einfach die drei jQuery-Skriptzeilen.

  • Die erste Skriptzeile fügt ein img Element direkt unterhalb der body Registerkarte Ihres Browsers an, dem sowohl die slide-image Klasse als auch die imageDivId ID dieses Bildelements zugewiesen ist.

  • Die zweite Skriptzeile fügt dynamisch einen Stilabschnitt> in den DOM-Header ein<, den Sie Ihrem img Element als slide-image Klasse zuweisen müssen.

  • Die dritte Skriptzeile fügt ein click Ereignis hinzu, das das gesamte Bild abdeckt, sodass der Benutzer eine beliebige Stelle auf dem Bild auswählen kann, und dieses Bild wird von der Seite entfernt (zusammen mit dem Ereignislistener).

Schritt 7: Installieren und Testen der Erweiterung

  1. Installieren oder aktualisieren Sie die Erweiterung auf der Seite Erweiterungen verwalten. Weitere Informationen finden Sie unter Querladen einer Erweiterung, um sie lokal zu installieren und zu testen.

  2. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z . B. Microsoft.com. Die Registerkarte darf nicht leer sein und darf nicht die Seite Erweiterungen verwalten sein.

  3. Klicken Sie neben der Adressleiste auf die Schaltfläche Erweiterungen (Symbol Erweiterungen). Oder wählen Sie Einstellungen und mehr (...) >Erweiterungen.

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

  4. Klicken Sie auf das Symbol oder den Namen des NASA-Bilds der Tagesanzeigeerweiterung .

    Das Popupfenster der Erweiterung wird geöffnet:

    popup.html nach auswahl des Erweiterungssymbols angezeigt

  5. Klicken Sie auf die Schaltfläche Anzeigen . 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.

Herzlichen Glückwunsch! Sie haben eine Erweiterung erstellt, die eine Nachricht aus dem Popupfenster des Erweiterungssymbols sendet und dynamisch JavaScript einfügt, 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

GitHub: