Tutoriel sur la création d’une extension, partie 1
L’objectif de ce didacticiel est de créer une extension Microsoft Edge, en commençant par un répertoire vide. Vous créez une extension qui affiche l’image de la NASA de la journée. Dans ce tutoriel, vous allez apprendre à créer une extension en :
- Création d’un
manifest.json
fichier. - Ajout d’icônes.
- Ouverture d’une boîte de dialogue contextuelle par défaut.
Si vous souhaitez tester l’extension terminée que vous générez dans ce tutoriel, téléchargez le code source à partir de MicrosoftEdge-Extensions repo > extension-getting-started-part1. Le code source a été mis à jour de Manifest V2 vers Manifest V3.
Étape 1 : Créer un fichier manifest.json
Chaque package d’extension doit avoir un manifest.json
fichier à la racine. Le manifeste fournit les détails de votre extension, la version du package d’extension, le nom et la description de l’extension, etc.
Le code suivant décrit les informations de base nécessaires dans votre manifest.json
fichier :
{
"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."
}
Étape 2 : Ajouter des icônes
Commencez par créer le icons
répertoire dans votre projet pour stocker les fichiers image d’icône. Les icônes sont utilisées pour l’image d’arrière-plan du bouton que les utilisateurs sélectionnent pour lancer l’extension.
Pour les icônes :
- Nous vous recommandons d’utiliser
PNG
le format, mais vous pouvez également utiliserBMP
des formats ,GIF
ICO
ouJPEG
. - Nous vous recommandons d’utiliser des images de 128 x 128 px, qui sont redimensionnées par le navigateur si nécessaire.
Les répertoires de votre projet doivent être similaires à la structure suivante :
└── part1
├── manifest.json
└── icons
├── nasapod16x16.png
├── nasapod32x32.png
├── nasapod48x48.png
└── nasapod128x128.png
Ensuite, ajoutez les icônes au manifest.json
fichier. Mettez à jour votre manifest.json
fichier avec les informations d’icônes afin qu’il corresponde au code suivant. Les png
fichiers répertoriés dans le code suivant sont disponibles dans le fichier de téléchargement mentionné plus haut dans cet article.
{
"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"
}
}
Étape 3 : Ouvrir une boîte de dialogue contextuelle par défaut
À présent, créez un HTML
fichier à exécuter lorsque l’utilisateur lance votre extension. Créez le fichier HTML nommé popup.html
dans un répertoire nommé popup
. Lorsque les utilisateurs sélectionnent l’icône pour lancer l’extension, popup/popup.html
est affiché sous forme de boîte de dialogue modale.
Ajoutez le code de la liste suivante à popup.html
pour afficher l’image des étoiles :
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>NASA picture of the day</title>
</head>
<body>
<div>
<img src="/images/stars.jpeg" alt="Display the stars image" />
</div>
</body>
</html>
Veillez à ajouter le fichier images/stars.jpeg
image au dossier images. Les répertoires de votre projet doivent être similaires à la structure suivante :
└── part1
├── manifest.json
├── icons
│ ├── nasapod16x16.png
│ ├── nasapod32x32.png
│ ├── nasapod48x48.png
│ └── nasapod128x128.png
├── images
│ └── stars.jpeg
└── popup
└── popup.html
Enfin, inscrivez la fenêtre contextuelle sous manifest.json
browser_action
(dans le manifeste V2) ou sous action
(dans le manifeste V3), comme indiqué dans le code suivant :
{
"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"
}
}
Étapes suivantes
C’est tout ce dont vous avez besoin pour développer une extension opérationnelle. À présent, continuez à charger une version test et à tester votre extension. Pour plus d’informations, consultez Chargement indépendant d’une extension.