Tutorial zum Erstellen einer Erweiterung, Teil 2
Die vollständige Erweiterungspaketquelle für diesen Teil des Tutorials finden Sie unter MicrosoftEdge-Extensions-Repository > extension-getting-started-part2.
In diesem Tutorial werden die folgenden Erweiterungstechnologien behandelt:
- Einfügen von JavaScript-Bibliotheken in eine Erweiterung.
- Verfügbarmachen von Erweiterungsressourcen auf Browserregisterkarten.
- Inhaltsseiten in vorhandene Browserregisterkarten einschließen.
- Inhaltsseiten lauschen auf Nachrichten aus Popups und antworten.
Sie erfahren, wie Sie Ihr Popupmenü aktualisieren, um Ihr statisches Sternbild durch einen Titel und eine Standard-HTML-Schaltfläche zu ersetzen. Wenn diese Schaltfläche ausgewählt ist, wird dieses Sternbild an die Inhaltsseite übergeben. Dieses Bild wird nun in die Erweiterung eingebettet und in die aktive Browserregisterkarte eingefügt. Hier sind die Schritte.
Für diese Schritte müssen Sie die ersten Schritte für das Erweiterungspaket im Tutorial Erstellen einer Erweiterung, Teil 1, ausführen.
Schritt 1: Aktualisieren pop-up.html, um eine Schaltfläche einzuschließen
In dem Popupordner, in dem Sie die popup.html
Datei erstellt haben, führen Sie die folgenden Schritte aus:
- Fügen Sie Tags hinzu, die einen Titel mit einer Schaltfläche anzeigen.
- Fügen Sie einen Verweis auf eine leere JavaScript-Datei
popup.js
ein. - Diese Schaltfläche programmieren.
Im Folgenden finden Sie ein Beispiel für eine aktualisierte HTML-Datei:
<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>(select the image to remove)</h2>
<button id="sendmessageid">Display</button>
<script src="popup.js"></script>
</body>
</html>
Nach dem Aktualisieren und Öffnen der Erweiterung wird ein Popupfenster mit einer Anzeigeschaltfläche geöffnet:
Schritt 2: Aktualisieren von popup.html, um ein Bild oben auf der Browserregisterkarte anzuzeigen
Nach dem Hinzufügen der Schaltfläche besteht die nächste Aufgabe darin, die images/stars.jpeg
Bilddatei oben auf der aktiven Registerkartenseite anzuzeigen.
Jede Registerkartenseite (und Erweiterung) wird in einem eigenen Thread ausgeführt. Erstellen Sie ein Inhaltsskript, das in die Registerkartenseite eingefügt wird. Senden Sie dann 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
Erstellen Sie die popup/popup.js
Datei, und fügen Sie Code hinzu, um eine Nachricht an Ihr noch nicht erstelltes Inhaltsskript zu senden, das 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:
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:
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
Sie müssen die chrome.runtime.getURL
API verwenden, um sie über eine beliebige Browserregisterkarte verfügbar zu machenimages/stars.jpeg
.
Hinweis: Wenn Sie Manifest V2 verwenden, verwenden Sie chrome.extension.getURL
stattdessen . Dieses zusätzliche Präfix wird von getURL
mit dem angefügten Bild zurückgegeben und sieht in etwa wie folgt aus: httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/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):
"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 aktuellen aktiven Registerkartenseite eingebettet ist, aber Sie haben diese Inhaltsseite nicht erstellt und eingefügt. Tun Sie dies jetzt.
Schritt 5: Aktualisieren von für manifest.json
neuen Inhalt und Webzugriff
Die aktualisierte manifest.json
, die und content-scripts
web_accessible_resources
enthält, lautet wie folgt:
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"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 dies aus dem oben im Abschnitt erwähnten Download einschließen.
Hinzufügen von jQuery
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.js
eingefü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
Hier ist die content-scripts\content.js
Datei, die basierend auf Ihrem manifest.json
content-scripts
Abschnitt in jede Browserregisterkartenseite eingefügt wird:
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" });
});
Beachten Sie, dass javaScript nur einen 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 derbody
Registerkarte Ihres Browsers an, dem sowohl dieslide-image
Klasse als auch dieimageDivId
ID dieses Bildelements zugewiesen ist.Die zweite Skriptzeile fügt dynamisch einen Stilabschnitt> in den DOM-Header ein<, den Sie Ihrem
img
Element alsslide-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).
- Hinzufügen von Funktionen zum Entfernen des angezeigten Bilds bei Auswahl
Wenn Sie nun zu einer beliebigen Seite navigieren und ihr Erweiterungssymbol auswählen, wird das Popupmenü wie folgt angezeigt:
Wenn Sie die Display
Schaltfläche auswählen, erhalten Sie folgendes. Wenn Sie eine beliebige Stelle im stars.jpeg
Bild auswählen, wird dieses Bildelement entfernt, und Registerkartenseiten werden wieder auf das reduziert, was ursprünglich angezeigt wurde:
Herzlichen Glückwunsch! Sie haben eine Erweiterung erstellt, die erfolgreich eine Nachricht aus dem Popupfenster des Erweiterungssymbols sendet und dynamisch JavaScript eingefügt hat, das als Inhalt ausgeführt wird, auf der Browserregisterkarte. Der eingefügte Inhalt legt das Imageelement so fest, dass Ihre statische Sternendatei .jpeg
angezeigt wird.
Siehe auch
- Tutorial zum Erstellen einer Erweiterung, Teil 1
- MicrosoftEdge-Extensions-Repository > extension-getting-started-part2 : Die vollständige Erweiterungspaketquelle für Teil 2 des Tutorials.