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.
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.
Pour effectuer ces étapes, vous devez effectuer les étapes initiales du package d’extension, dans la première partie du didacticiel sur la création d’une extension.
Étape 1 : Mettre à jour pop-up.html pour inclure un bouton
Dans le dossier contextuel où vous avez créé le popup.html
fichier, vous allez effectuer les opérations suivantes :
- Ajoutez un balisage qui affiche un titre avec un bouton.
- Incluez une référence à un fichier
popup.js
JavaScript vide. - Programmez ce bouton.
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_resources
content-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
Même si javaScript s’exécute sur l’onglet du navigateur 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.json
content-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’ongletbody
de votre navigateur auquel laslide-image
classe est affectée, ainsi que l’IDimageDivId
de 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-image
que 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 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
.
Voir aussi
- Tutoriel sur la création d’une extension, partie 1
- MicrosoftEdge-Extensions repo > extension-getting-started-part2 : la source du package d’extension terminée pour la partie 2 du tutoriel.