Tutoriel sur la création d’une extension, partie 1

  • Article

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.

Avant de commencer

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

Icône dans la barre d’outils pour ouvrir votre 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.

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