Partie 2 du tutoriel : Utiliser JavaScript pour insérer une image dans la page web
L’exemple Partie 2 : Utiliser JavaScript pour insérer une image dans la page web utilise du code JavaScript pour insérer l’image stars.jpeg en haut de la page web actuellement ouverte. La fenêtre contextuelle de l’extension contient un titre et un bouton HTML intitulé Affichage. Lorsque vous cliquez sur le bouton Afficher , JavaScript envoie un message à partir de la fenêtre contextuelle de l’icône d’extension et insère dynamiquement JavaScript en tant que contenu dans l’onglet du navigateur.
L’exemple partie 2 utilise 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 web de contenu dans des onglets de navigateur existants.
- Les pages web de contenu écoutent les messages des fenêtres contextuelles et répondent.
Vous ouvrirez l’extension partie 2 à partir du bouton Extensions (
) après avoir installé l’extension via l’onglet Gérer les extensions :
L’extension affiche une petite page HTML dans une fenêtre contextuelle, contenant un titre, des instructions et un bouton Afficher :
Lorsque vous cliquez sur le bouton Afficher , le code JavaScript s’insère stars.jpeg temporairement en haut de la page web active, ce qui pousse le contenu de la page web sous l’image. Le contenu injecté définit l’élément image à afficher stars.jpeg en haut de la page web active, puis supprime l’image lorsque vous cliquez sur l’image :
Si vous souhaitez installer et exécuter immédiatement l’extension terminée, ou afficher son code terminé, procédez comme suit :
- Clonez le référentiel MicrosoftEdge-Extensions sur votre lecteur local. Utilisez le répertoire
/extension-getting-started-part2/du référentiel . - Téléchargez le code source à partir du dossier /extension-getting-started-part2/ du dépôt MicrosoftEdge-Extensions.
Vous pouvez ensuite installer et exécuter l’extension terminée qui se trouve dans le référentiel, par chargement indépendant d’une extension pour l’installer et la tester localement. L’onglet doit contenir une page web avant d’ouvrir l’extension.
Étape 1 : Mettre à jour popup.html pour inclure un bouton
Pour utiliser cet article, commencez par effectuer les étapes décrites dans tutoriel partie 1 : Afficher une image dans une fenêtre contextuelle ; autrement dit, clonez le dépôt MicrosoftEdge-Extensions, installez la démonstration de la partie 1 et exécutez cette démonstration.
Cette étape a déjà été effectuée dans popup.html dans le dépôt MicrosoftEdge-Extensions.
L’état de départ hypothétique de cet article de la partie 2, si vous deviez générer manuellement l’exemple pour ajouter JavaScript, est qu’il existe un répertoire pour le code de la partie 2, contenant les mêmes répertoires et fichiers que les fichiers créés dans l’article partie 1. Il peut s’agir de répertoires frères pour les parties 1 et 2, comme dans le dépôt MicrosoftEdge-Extensions.
Il est possible d’installer côte à côte les démonstrations des parties 1 et 2 à partir du dépôt MicrosoftEdge-Extensions. Nous vous recommandons d’abord de cloner le référentiel et d’installer et d’exécuter les démonstrations, avant (ou au lieu de) de commencer par un répertoire vide, puis de créer manuellement des répertoires, de créer des fichiers et de coller du code dans les fichiers.
Pour développer manuellement la démonstration de partie 1 terminée afin de créer la démonstration de la partie 2, vous devez effectuer les opérations suivantes :
- Dans le dossier qui contient le fichier de la
popup.htmlpartie 2 (initialement une copie du fichier partie 1), ajoutez un balisage qui affiche un titre avec un bouton. - Incluez une référence à un fichier JavaScript,
popup.js. - Programmez ce bouton.
Voici l’exemple de fichier HTML :
/popup/popup.html (terminé) :
<!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>
Effectuez les étapes décrites dans Charger une extension pour l’installer et la tester localement pour mettre à jour localement l’extension, puis exécuter l’extension. L’onglet doit contenir une page web avant d’ouvrir l’extension.
Après la mise à jour et l’ouverture de l’extension, une fenêtre contextuelle s’ouvre, contenant une petite page HTML avec un titre, des instructions et un bouton Afficher :
Étape 2 : Mettre à jour la page web pour insérer l’image en haut
Après avoir ajouté le bouton Afficher , la tâche suivante consiste à faire en sorte que le bouton affiche le images/stars.jpeg fichier image en haut de la page web qui se trouve dans l’onglet actif.
Chaque page d’onglet (et chaque extension) s’exécute dans son propre thread. Dans une étape ci-dessous, vous allez créer un script de contenu qui est injecté dans la page d’onglet. Le script injecté envoie un message de votre fenêtre contextuelle à ce script de contenu qui s’exécute 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
Cette étape a déjà été effectuée dans popup.js dans le dépôt MicrosoftEdge-Extensions. Si vous souhaitez créer manuellement l’extension partie 2, procédez comme suit.
Créez le popup/popup.js fichier, puis ajoutez le code suivant dans ce fichier.
Ce code envoie un message à votre script de contenu qui n’a pas encore été créé que vous devez créer et injecter momentanément dans l’onglet de votre navigateur. Pour ce faire, le code suivant ajoute un onclick événement à votre bouton d’affichage contextuel :
/popup/popup.js (initial) :
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 :
/popup/popup.js (terminé) :
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
Cette étape a déjà été effectuée dans manifest.json du dépôt MicrosoftEdge-Extensions. Si vous souhaitez créer manuellement l’extension partie 2, procédez comme suit.
Pour rendre images/stars.jpeg disponible à partir d’un onglet de navigateur, vous devez utiliser l’API chrome.runtime.getURL .
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) :
/manifest.json (partie) :
"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.
Étape 5 : Mettre à jour votre manifest.json pour le nouveau contenu et l’accès web
Ensuite, vous allez créer et injecter la page de contenu incorporée dans la page d’onglet active active. Cette étape a déjà été effectuée dans manifest.json du dépôt MicrosoftEdge-Extensions.
Mise à jour manifest.json qui inclut et web_accessible_resourcescontent-scripts est comme suit :
/manifest.json (terminé) :
{
"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>"]
}
]
}
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 copier ce fichier à partir du dossier /lib/ du dépôt MicrosoftEdge-Extensions.
Ajouter jQuery
Cette étape a déjà été effectuée dans jquery.min.js dans le dépôt MicrosoftEdge-Extensions.
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
Pour continuer à créer manuellement la démonstration de la partie 2, vous devez créer ce fichier. Cette étape a déjà été effectuée dans content.js dans le dépôt MicrosoftEdge-Extensions.
Voici le content-scripts\content.js fichier qui est injecté dans chaque page d’onglet du navigateur en fonction de la content-scripts section dans manifest.json:
/content-scripts/content.js (terminé) :
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" });
});
Tout ce que fait JavaScript ci-dessus est d’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).
Étape 7 : Installer et tester l’extension
Installez ou mettez à jour l’extension dans la page Gérer les extensions ; Consultez Charger une extension pour l’installer et la tester localement.
Accédez à une page web, telle que Microsoft.com, dans une nouvelle fenêtre ou un nouvel onglet. L’onglet ne doit pas être vide et ne doit pas être la page Gérer les extensions.
Cliquez sur le bouton Extensions (
), en regard de la barre d’adresses. Vous pouvez également sélectionner Paramètres et plus encore (...) >Extensions.
Cliquez sur l’icône ou le nom de l’image de la NASA de l’extension d’observateur de jour .
La fenêtre contextuelle de l’extension s’ouvre :
Cliquez sur le bouton Afficher .
stars.jpegest inséré en haut de la page web active sous l’onglet actif, en poussant le contenu de la page web vers le bas sous l’image :
Cliquez sur l’image
stars.jpegqui remplit la partie supérieure de la page web. Cet élément d’image est supprimé de l’arborescence dom et de la page web, et la page web actuelle est restaurée, en déplaçant son contenu vers le haut de l’onglet.
Félicitations ! Vous avez créé une extension qui envoie un message à partir de la fenêtre contextuelle de l’icône d’extension et insère dynamiquement JavaScript en tant que contenu dans l’onglet du navigateur. Le contenu injecté définit l’élément image à afficher stars.jpeg en haut de la page web active, puis supprime l’image lorsque vous cliquez sur l’image.
Voir aussi
- Partie 1 du tutoriel : Afficher une image dans une fenêtre contextuelle
- Charger une version test d’une extension pour l’installer et la tester localement
GitHub :
-
Référentiel MicrosoftEdge-Extensions .
- /extension-getting-started-part2/ - code source de l’exemple partie 2.