Partie 1 du tutoriel : Afficher une image dans une fenêtre contextuelle

L’exemple partie 1 : Afficher une image dans une fenêtre contextuelle est une extension statique simple, sans JavaScript, qui affiche l’image stars.jpeg dans une petite page web dans une fenêtre contextuelle dans un onglet Microsoft Edge :

Vous créez ce type d’extension en procédant comme suit :

1. Créez un fichier manifest.json.
2. Ajoutez des icônes pour lancer l’extension.
3. Ouvrez une boîte de dialogue contextuelle par défaut.

En cours de route, vous installez (ou mettez à jour) et testez l’extension.

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-part1/.
• Téléchargez le code source à partir du dossier /part1/ 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.

É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.

Toutes les étapes de codage décrites dans cet article ont déjà été effectuées dans la démonstration de la partie 1 du dépôt MicrosoftEdge-Extensions . Nous vous recommandons d’abord de cloner le référentiel et d’installer et d’exécuter la démonstration de la partie 1, 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.

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 1 en commençant par un répertoire vide :

• Dans un répertoire de votre ordinateur, à l’aide d’un éditeur, tel que Visual Studio Code, créez un manifest.json fichier qui contient les lignes suivantes :

  {
      "name": "NASA picture of the day pop-up",
      "version": "0.0.0.1",
      "manifest_version": 3,
      "description": "A basic extension that displays an image in a pop-up.",
  }
  

Étape 2 : Ajouter des icônes pour le lancement de l’extension

Cette étape a déjà été effectuée dans la démonstration de la partie 1 du dépôt MicrosoftEdge-Extensions . Si vous souhaitez créer manuellement l’extension Partie 1, procédez comme suit.

1. Créez un icons répertoire dans votre projet, dans le même répertoire que le fichier manifeste, pour stocker les fichiers image d’icône. Les icônes sont utilisées comme image d’arrière-plan pour le bouton sur lequel l’utilisateur clique pour lancer l’extension :

   

   Pour les icônes :

   • Nous vous recommandons d’utiliser PNG le format, mais vous pouvez également utiliser BMPdes formats , GIFICO ou JPEG .
   • Nous vous recommandons d’utiliser des images de 128 x 128 px, qui sont redimensionnées par le navigateur si nécessaire.

2. Vérifiez que les répertoires de votre projet sont similaires à la structure suivante :

   └── part1
       ├── manifest.json
       └── icons
           ├── nasapod16x16.png
           ├── nasapod32x32.png
           ├── nasapod48x48.png
           └── nasapod128x128.png
   

3. Obtenez les .png fichiers à partir du référentiel :

   • nasapod16x16.png
   • nasapod32x32.png
   • nasapod48x48.png
   • nasapod128x128.png

   Par exemple, téléchargez individuellement les fichiers à partir du dossier /icons/ du dépôt MicrosoftEdge-Extensions et placez-les dans votre /icons/ répertoire.

4. Répertoriez les icônes dans le manifest.json fichier, comme suit :

   {
       "name": "NASA picture of the day pop-up",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "description": "A basic extension that displays an image in a pop-up.",
       "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

Cette étape a déjà été effectuée dans popup.html dans le dépôt MicrosoftEdge-Extensions. Si vous souhaitez créer manuellement l’extension Partie 1, procédez comme suit.

Créez un HTML fichier à exécuter lorsque l’utilisateur lance votre extension. Lorsque l’utilisateur clique sur l’icône pour lancer l’extension, ce fichier s’affiche sous forme de boîte de dialogue modale.

1. Créez le fichier HTML nommé popup.html dans un répertoire nommé popup.

2. Ajoutez le code suivant à 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="Stars" />
           </div>
       </body>
   </html>
   

3. Ajoutez le fichier stars.jpeg dans le images dossier . Par exemple, téléchargez stars.jpeg à partir du dépôt MicrosoftEdge-Extensions.

4. Vérifiez que les répertoires de votre projet sont similaires à la structure suivante :

   └── part1
       ├── manifest.json
       ├── icons
       │   ├── nasapod16x16.png
       │   ├── nasapod32x32.png
       │   ├── nasapod48x48.png
       │   └── nasapod128x128.png
       ├── images
       │   └── stars.jpeg
       └── popup
           └── popup.html
   

5. Inscrivez la fenêtre contextuelle sous manifest.jsonaction, comme suit :

   {
       "name": "NASA picture of the day pop-up",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "description": "A basic extension that displays an image in a pop-up.",
       "icons": {
           "16": "icons/nasapod16x16.png",
           "32": "icons/nasapod32x32.png",
           "48": "icons/nasapod48x48.png",
           "128": "icons/nasapod128x128.png"
       },
       "action": {
           "default_popup": "popup/popup.html"
       }
   }
   

C’est tout ce dont vous avez besoin pour développer une extension simple.

Étape 4 : Installer et tester l’extension

Installez et exécutez l’extension ; Consultez Charger une extension pour l’installer et la tester localement. L’extension affiche popup.html, contenant stars.jpeg, dans une fenêtre contextuelle :

Vous pouvez ouvrir cette extension de démonstration de partie 1 dans n’importe quel onglet, y compris un onglet vide ou l’onglet Gérer les extensions.

Après avoir exécuté et testé l’extension, vous pouvez passer à la partie 2 du didacticiel : Utiliser JavaScript pour insérer une image dans la page web.

Voir aussi

• Charger une version test d’une extension pour l’installer et la tester localement
• Partie 2 du tutoriel : Utiliser JavaScript pour insérer une image dans la page web

GitHub :

• Référentiel MicrosoftEdge-Extensions .
  • /part1/ - code source de l’exemple partie 1.