Exemple : Page web contextuelle de la visionneuse d’images

Cet exemple est une extension de navigateur, sans JavaScript, qui affiche l’image stars.jpeg dans une petite page web dans une fenêtre contextuelle dans n’importe quel onglet Microsoft Edge :

Cloner le référentiel MicrosoftEdge-Extensions

Vous pouvez utiliser différents outils pour cloner un dépôt GitHub. Vous pouvez télécharger un répertoire sélectionné ou cloner l’intégralité du référentiel.

Clonez le référentiel MicrosoftEdge-Extensions sur votre lecteur local, puis basculez vers une branche de travail, comme suit.

Invite de commandes git bash

1. Dans une invite de commandes, entrez git pour case activée si git est installé.

2. Si ce n’est pas encore fait, téléchargez git et installez-le.

3. Si ce n’est pas encore fait, démarrez une invite de commandes où git est installé.

4. Accédez au répertoire dans lequel vous souhaitez cloner le référentiel MicrosoftEdge-Extensions . Par exemple :

   cd C:/Users/localAccount/GitHub/
   

5. Dans Microsoft Edge, accédez au référentiel MicrosoftEdge-Extensions .

6. Cliquez sur la flèche vers le bas à droite du bouton vert Code , puis dans la section Cloner à l’aide de l’URL web , cliquez sur le bouton Copier l’URL dans le Presse-papiers en regard de https://github.com/microsoft/MicrosoftEdge-Extensions.git.

7. Dans la fenêtre d’invite de commandes, entrez la commande :

   git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git
   

   Le /MicrosoftEdge-Extensions/ répertoire est ajouté dans le répertoire que vous avez spécifié.

Créer une branche de travail et basculer vers celle-ci

1. Consultez la liste des répertoires :

   ls
   

   Le /MicrosoftEdge-Extensions/ répertoire est répertorié.

2. Basculez vers le nouveau répertoire :

   cd MicrosoftEdge-Extensions
   

3. Créez une branche de travail :

   git branch test
   

4. Basculez vers la branche de travail :

   git switch test
   

   Retourne: Switched to branch 'test'

Vous êtes désormais libre de modifier le code dans votre branche de travail, sans modifier le code qui se trouve dans la branche « main » du dépôt. Par la suite, vous pouvez revenir à la branche « main » ou créer une autre branche basée sur la branche « main ».

GitHub Desktop

1. Si ce n’est pas déjà fait, installez le bureau GitHub : accédez à https://github.com/apps/desktop, puis cliquez sur le bouton Télécharger maintenant .

2. Accédez au référentiel MicrosoftEdge-Extensions .

3. Cliquez sur le bouton Code , puis sélectionnez Ouvrir avec GitHub Desktop.

   Une boîte de dialogue s’ouvre, indiquant Que ce site tente d’ouvrir GitHubDesktop.exe.

4. Cliquez sur le bouton Ouvrir .

   GitHub Desktop s’ouvre, avec le référentiel MicrosoftEdge-Extensions sélectionné dans la liste déroulante en haut à gauche.

   Ou, dans GitHub Desktop, la boîte de dialogue Cloner un dépôt s’ouvre :

   

5. Spécifiez le chemin d’accès du lecteur local dans lequel placer le répertoire du référentiel cloné ; par exemple : C:\Users\accountname\GitHub\.

6. Cliquez sur le bouton Cloner .

Créer une branche de travail et basculer vers celle-ci

1. Dans GitHub Desktop, assurez-vous qu’en haut à gauche du bureau GitHub, le dépôt actuel est MicrosoftEdge-Extensions.

   Dans la liste déroulante Current Branch, il est indiqué main.

2. Dans la liste déroulante Branche actuelle , cliquez sur l’onglet Branches , puis sur le bouton Nouvelle branche .

   La boîte de dialogue Créer une branche s’ouvre.

3. Dans la zone de texte Nom , entrez un nom de branche, par exemple test, puis cliquez sur le bouton Créer une branche .

   Dans le coin supérieur central et inférieur gauche de GitHub Desktop, la branche actuelle est affichée , par exemple test.

Vous êtes désormais libre de modifier le code dans votre branche de travail, sans modifier le code qui se trouve dans la branche « main » du dépôt. Par la suite, vous pouvez revenir à la branche « main » ou créer une autre branche basée sur la branche « main ».

Installer l’exemple localement

Au lieu d’installer l’exemple à partir du Windows Store, vous allez installer l’exemple localement, afin de pouvoir le modifier et tester rapidement les modifications. L’installation locale est parfois appelée chargement indépendant d’une extension.

1. Dans Microsoft Edge, cliquez sur le bouton Extensions (), en regard de la barre d’adresses, si cette icône s’affiche. Vous pouvez également sélectionner Paramètres et plus (>Extensions. La fenêtre contextuelle Extensions s’ouvre :

   

2. Cliquez sur Gérer les extensions. La page Gestion des extensions s’ouvre dans un nouvel onglet :

   

3. Activez le bouton bascule Mode développeur .

4. Lorsque vous installez votre extension pour la première fois, cliquez sur le bouton Charger décompressé ( . La boîte de dialogue Sélectionner le répertoire de l’extension s’ouvre.

5. Sélectionnez le répertoire qui contient les fichiers sources de l’extension, par manifest.jsonexemple .

   Exemple de chemin d’accès :

   C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

6. Cliquez sur le bouton Sélectionner un dossier .

   La boîte de dialogue Sélectionner le répertoire d’extension se ferme.

   L’extension est installée dans le navigateur, comme une extension installée à partir du magasin :

   

Exécution de l’exemple

1. Accédez à une page web, telle qu’une application TODO, dans une nouvelle fenêtre ou un nouvel onglet. Pour cet exemple, cette étape est facultative et vise simplement à correspondre aux captures d’écran . cet exemple ne nécessite pas l’ouverture d’une page web.

2. Actualisez la page web. Cela est parfois nécessaire après le rechargement d’une extension.

3. Dans Microsoft Edge à droite de la barre d’adresses, si cette icône s’affiche, cliquez sur le bouton Extensions (). Vous pouvez également sélectionner Paramètres et plus (>Extensions.

   La fenêtre contextuelle Extensions s’ouvre :

   

4. Cliquez sur l’icône ou le nom de l’extension (page web contextuelle de la visionneuse d’images).

   L’extension s’ouvre et l’icône de l’extension est ajoutée en regard de la barre d’adresse et de l’icône Extensions (). L’extension affiche popup.html, contenant stars.jpeg, dans une fenêtre contextuelle :

   

5. Cliquez sur le bouton de l’extension en regard de la barre d’adresse. La fenêtre contextuelle se ferme.

Voir aussi :

• Charger une version test d’une extension pour l’installer et la tester localement

Étudier l’exemple

Dans les sections suivantes, vous allez étudier l’exemple. Après cela, pour développer votre propre extension Microsoft Edge, vous pouvez copier et modifier le répertoire de l’exemple, puis installer et tester l’extension résultante.

Fichiers et répertoires

L’exemple a la structure de répertoires suivante :

Exemple de chemin d’accès pour l’exemple :

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

Répertoires et fichiers dans le /picture-viewer-popup-webpage/ répertoire :

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json

• Le /icons/ répertoire contient les versions d’un .png fichier utilisé pour représenter l’extension près de la barre d’adresse du navigateur.
• Le /images/ répertoire contient stars.jpeg, qui s’affiche dans la fenêtre contextuelle de l’extension.
• Le /popup/ répertoire contient popup.html, qui définit le contenu de la page web qui s’affiche dans la fenêtre contextuelle de l’extension.
• manifest.json contient des informations de base sur l’extension.

Fichier manifeste (manifest.json)

Chaque package d’extension doit avoir un manifest.json fichier à la racine. Le manifeste fournit des détails sur votre extension, la version du package d’extension, ainsi que le nom et la description de l’extension.

manifest.json contient les lignes suivantes :

{
  "name": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up webpage.",
  "icons": {
      "16": "icons/extension-icon16x16.png",
      "32": "icons/extension-icon32x32.png",
      "48": "icons/extension-icon48x48.png",
      "128": "icons/extension-icon128x128.png"
  },
  "action": {
      "default_popup": "popup/popup.html"
  }
}

Icônes pour le lancement de l’extension

Le /icons/ répertoire contient les fichiers image d’icône. Les icônes sont utilisées comme image d’arrière-plan pour le bouton sur lequel vous cliquez pour lancer l’extension :

Lorsque l’extension est en cours d’exécution, l’une des icônes s’affiche dans la barre d’outils, en regard de la barre d’adresse :

Pour fermer l’extension, cliquez sur l’icône de l’extension dans la barre d’outils ou cliquez sur le bouton Extensions ().

Recommandations pour les icônes :

• Utilisez le PNG format, mais vous pouvez également utiliser BMPdes formats , GIFICO ou JPEG .
• Si vous fournissez un fichier d’icône unique, utilisez 128 x 128 px, qui peut être redimensionné par le navigateur si nécessaire.

Boîte de dialogue contextuelle (popup.html)

popup.html dans le répertoire s’exécute /popup/ lorsque vous lancez l’extension. Lorsque vous cliquez sur l’icône pour lancer l’extension, ce fichier s’affiche sous la forme d’une boîte de dialogue modale.

popup.html contient le code suivant, pour afficher un titre et l’image des étoiles :

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Picture viewer pop-up webpage</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Stars" />
        </div>
    </body>
</html>

La page web contextuelle (popup.html) est inscrite en tant que "default_popup" dans manifest.json, dans la action section clé :

manifest.json (portion)

{
    "action": {
        "default_popup": "popup/popup.html"
    }
}

Étapes suivantes

Pour développer votre propre extension Microsoft Edge, vous pouvez copier et modifier le répertoire de l’exemple, puis installer et tester l’extension résultante.

Après avoir exécuté et testé cet exemple d’extension, vous pouvez passer à Exemple : Insertion d’images à l’aide d’un script de contenu, qui insère dynamiquement JavaScript en tant que contenu dans l’onglet du navigateur.

Voir aussi

• Charger une version test d’une extension pour l’installer et la tester localement
• Exemple : Insertion d’images à l’aide d’un script de contenu

GitHub :

• Référentiel MicrosoftEdge-Extensions .
  • /picture-viewer-popup-webpage/ - code source de cet exemple.