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.
Der Quellcode wurde von Manifest V2 auf Manifest V3 aktualisiert.
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.
Diese Schritte erfordern, dass Sie die Schritte für die ersten Schritte des Erweiterungspakets ausführen. Das Tutorial finden Sie unter MicrosoftEdge-Extensions-Repository > extension-getting-started-part1.
Schritt 1: Aktualisieren pop-up.html, um eine Schaltfläche einzuschließen
In dem Popupordner, in dem Sie die popup.html Datei aus dem ersten Teil des Tutorials erstellt haben, fügen Sie Tags hinzu, die einen Titel mit einer Schaltfläche anzeigen. Sie programmieren diese Schaltfläche später in einem anderen Schritt, fügen aber vorerst einen Verweis auf eine leere JavaScript-Datei popup.jshinzu.
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.getURLstattdessen . 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-scriptsweb_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.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
Denken Sie daran, dass selbst wenn auf der Browserregisterkarte JavaScript auf der geladenen Webseite ausgeführt wird, alle eingefügten Inhalte keinen Zugriff auf dieses JavaScript haben. 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.jsoncontent-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
imgElement direkt unterhalb derbodyRegisterkarte Ihres Browsers an, dem sowohl dieslide-imageKlasse als auch dieimageDivIdID dieses Bildelements zugewiesen ist.Die zweite Skriptzeile fügt dynamisch einen Stilabschnitt> in den DOM-Header ein<, den Sie Ihrem
imgElement alsslide-imageKlasse zuweisen müssen.Die dritte Skriptzeile fügt ein
clickEreignis 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 das als Inhalt ausgeführte JavaScript dynamisch auf der Browserregisterkarte eingefügt. Der eingefügte Inhalt legt das Imageelement so fest, dass Ihre statische Sternendatei .jpeg angezeigt wird.