Tutoriel sur la création d’une extension, partie 2
Pour voir la source du package d’extension terminée pour cette partie du tutoriel, accédez à MicrosoftEdge-Extensions repo > extension-getting-started-part2.
Le code source a été mis à jour de Manifest V2 vers Manifest V3.
Ce tutoriel couvre les technologies d’extension suivantes :
- Injection de bibliothèques JavaScript dans une extension.
- Exposition des ressources d’extension aux onglets du navigateur.
- Inclusion de pages de contenu dans des onglets de navigateur existants.
- Les pages de contenu écoutent les messages des fenêtres contextuelles et répondent.
Vous allez apprendre à mettre à jour votre menu contextuel pour remplacer votre image d’étoiles statiques par un titre et un bouton HTML standard. Ce bouton, lorsqu’il est sélectionné, transmet cette image d’étoiles à la page de contenu. Cette image est maintenant incorporée dans l’extension et insérée dans l’onglet du navigateur actif. Voici les étapes à suivre.
Ces étapes nécessitent que vous effectuez les étapes pour les étapes initiales du package d’extension. Pour le tutoriel, accédez à Dépôt MicrosoftEdge-Extensions > extension-getting-started-part1.
Étape 1 : Mettre à jour pop-up.html pour inclure un bouton
Dans le dossier contextuel où vous avez créé le popup.html fichier à partir de la partie initiale du tutoriel, vous allez ajouter un balisage qui affiche un titre avec un bouton. Vous programmerez ultérieurement ce bouton dans une autre étape, mais incluez pour l’instant une référence à un fichier popup.jsJavaScript vide.
Voici un exemple de fichier HTML mis à jour :
<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>
Après la mise à jour et l’ouverture de l’extension, une fenêtre contextuelle s’ouvre avec un bouton d’affichage.
Étape 2 : Mettre à jour popup.html pour afficher l’image en haut de l’onglet du navigateur
Après avoir ajouté le bouton, la tâche suivante consiste à faire en sorte qu’il affiche le images/stars.jpeg fichier image en haut de la page d’onglet active.
Chaque page d’onglet (et chaque extension) s’exécute dans son propre thread. Créez un script de contenu qui est injecté dans la page d’onglets. Ensuite, envoyez un message à partir de votre fenêtre contextuelle à ce script de contenu en cours d’exécution sur la page d’onglet. Le script de contenu reçoit le message, qui décrit l’image à afficher.
Étape 3 : Créer le code JavaScript contextuel pour envoyer un message
Créez le popup/popup.js fichier et ajoutez du code pour envoyer un message à votre script de contenu non encore créé que vous devez créer et injecter momentanément dans votre onglet de navigateur. Pour ce faire, le code suivant ajoute un onclick événement à votre bouton d’affichage contextuel :
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
// do something
};
}
Dans le onclick cas présent, recherchez l’onglet actuel du navigateur. Ensuite, utilisez l’API chrome.tabs.sendmessage d’extension pour envoyer un message à cet onglet.
Dans ce message, vous devez inclure l’URL de l’image que vous souhaitez afficher. Veillez à envoyer un ID unique à affecter à l’image insérée.
Pour envoyer un ID unique à attribuer à l’image insérée, deux approches différentes sont possibles :
- Approche 1 : Laissez l’insertion de contenu JavaScript générer cet ID d’image. Nous n’utiliserons pas cette approche ici, pour des raisons qui se manifesteront plus tard.
- Approche 2 : Générez cet ID unique ici dans
popup.js, puis passez cet ID au script de contenu qui n’a pas encore été créé. Nous allons utiliser cette approche.
Le code suivant décrit le code mis à jour dans popup/popup.js. Vous transmettez également l’ID d’onglet actuel, qui sera utilisé plus loin dans cet article :
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());
}
});
};
}
Étape 4 : Rendre votre stars.jpeg disponible à partir de n’importe quel onglet de navigateur
Pour rendre images/stars.jpeg disponible à partir d’un onglet de navigateur, vous devez utiliser l’API chrome.runtime.getURL .
Remarque : Si vous utilisez manifeste V2, utilisez chrome.extension.getURLà la place . Ce préfixe supplémentaire est retourné par getURL avec l’image attachée et ressemble à ce qui suit : httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg
La raison en est que vous injectez l’image à l’aide de l’attribut src de l’élément img dans la page de contenu. La page de contenu s’exécute sur un thread unique qui n’est pas le même que le thread exécutant l’extension. Vous devez exposer le fichier image statique en tant que ressource web pour qu’il fonctionne correctement.
Ajoutez une autre entrée dans le manifest.json fichier pour déclarer que l’image est disponible pour tous les onglets du navigateur. Cette entrée est la suivante (vous devriez la voir dans le fichier complet manifest.json ci-dessous lorsque vous ajoutez la déclaration de script de contenu à venir) :
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
Vous avez maintenant écrit le code dans votre popup.js fichier pour envoyer un message à la page de contenu incorporée dans la page d’onglet active active, mais vous n’avez pas créé et injecté cette page de contenu. Faites-le maintenant.
Étape 5 : Mettre à jour votre manifest.json pour le nouveau contenu et l’accès web
Mise à jour manifest.json qui inclut et web_accessible_resourcescontent-scripts est comme suit :
{
"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>"]
}
]
}
L’attribut matches est défini sur <all_urls>, ce qui signifie que tous les fichiers dans content_scripts sont injectés dans toutes les pages d’onglet du navigateur lorsque chaque onglet est chargé. Les types de fichiers autorisés qui peuvent être injectés sont JavaScript et CSS. Vous avez également ajouté lib\jquery.min.js. Vous pouvez l’inclure à partir du téléchargement mentionné en haut de la section.
Ajouter jQuery
Dans les scripts de contenu que vous injectez, envisagez d’utiliser jQuery ($). Vous avez ajouté une version réduite de jQuery et l’avez placée dans votre package d’extension en tant que lib\jquery.min.js. Ces scripts de contenu s’exécutent dans des bacs à sable individuels, ce qui signifie que le jQuery injecté dans la popup.js page n’est pas partagé avec le contenu.
Présentation du thread
Gardez à l’esprit que même si l’onglet du navigateur comporte JavaScript en cours d’exécution sur la page web chargée, tout contenu injecté n’a pas accès à ce Code JavaScript. Le Code JavaScript injecté a uniquement accès au DOM réel qui est chargé dans cet onglet de navigateur.
Étape 6 : Ajouter l’écouteur de message de script de contenu
Voici ce content-scripts\content.js fichier qui est injecté dans chaque page d’onglet du navigateur en fonction de votre manifest.jsoncontent-scripts section :
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" });
});
Notez que tout ce que javaScript ci-dessus fait consiste à inscrire un listener à l’aide de la méthode d’API d’extension chrome.runtime.onMessage.addListener . Cet écouteur attend des messages comme celui que vous avez envoyé à partir du popup.js décrit précédemment avec la méthode d’API d’extension chrome.tabs.sendMessage .
Le premier paramètre de la addListener méthode est une fonction dont le premier paramètre, request, est les détails du message transmis. N’oubliez pas que, à partir de popup.js, lorsque vous avez utilisé la sendMessage méthode , les attributs du premier paramètre sont url et imageDivId.
Lorsqu’un événement est traité par l’écouteur, la fonction qui est le premier paramètre est exécutée. Le premier paramètre de cette fonction est un objet qui a des attributs attribués par sendMessage. Cette fonction traite simplement les trois lignes de script jQuery.
La première ligne de script ajoute un
imgélément juste sous l’ongletbodyde votre navigateur auquel laslide-imageclasse est affectée, ainsi que l’IDimageDivIdde cet élément d’image.La deuxième ligne de script insère dynamiquement dans l’en-tête DOM une <section de style> que vous devez affecter en tant
slide-imageque classe à votreimgélément.La troisième ligne de script ajoute un
clickévénement qui couvre l’image entière, ce qui permet à l’utilisateur de sélectionner n’importe où sur l’image et cette image est supprimée de la page (avec l’écouteur d’événements).
- Ajouter des fonctionnalités pour supprimer l’image affichée lorsqu’elle est sélectionnée
À présent, lorsque vous accédez à une page et que vous sélectionnez votre icône d’extension , le menu contextuel s’affiche comme suit :
Lorsque vous sélectionnez le Display bouton, vous obtenez ce qui se trouve ci-dessous. Si vous sélectionnez n’importe où sur l’image stars.jpeg , cet élément d’image est supprimé et les pages d’onglets sont réduites à ce qui était affiché à l’origine :
Félicitations ! Vous avez créé une extension qui envoie avec succès un message à partir de la fenêtre contextuelle de l’icône d’extension et vous avez inséré dynamiquement du code JavaScript en tant que contenu sous l’onglet du navigateur. Le contenu injecté définit l’élément image pour afficher votre fichier d’étoiles statiques .jpeg .