Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

====== Extension navigateur : Exemple de page web contextuelle de la visionneuse d’images ======
===== Ressources =====
  * https://learn.microsoft.com/fr-fr/microsoft-edge/extensions-chromium/getting-started/picture-viewer-popup-webpage?tabs=gitbash
===== Objectif =====
Afficher l’image **stars.jpeg** dans une petite page web dans une fenêtre contextuelle dans n’importe quel onglet Microsoft Edge.

===== Démarche =====
  * cloner le dépôt **[[https://github.com/microsoft/MicrosoftEdge-Extensions|MicrosoftEdge-Extensions]]** dans un dossier
<code shell>
git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git
</code>
  * Créer une branche de travail et basculer vers celle-ci
<code shell>
cd MicrosoftEdge-Extensions
git branch test
git switch test
</code>
  * installer l'extension locale dans Edge
    * bouton **Extensions** > **Gérer les extensions**
    * activer le bouton **Mode développeur**
    * lors de la 1re installation,  cliquez sur **Charger l'extension décompressé** 
    * Sélectionner le répertoire des fichiers en local de l'extension MicrosoftEdge-Extensions contenant un fichier manifestement.json (MicrosoftEdge-Extensions/Extension-samples/picture-viewer-popup-webpage)
    * l'extension est installée **A parti d'autrse sources**. 
{{ :dev:extensionnavigateur:extension_01.png |}}

===== Exécution de l'exemple =====
Dans le navigateur : 
  * cliquez sur le bouton **Extensions**
  * cliquez sur le nom de la nouvelle extension : **Picture viewer pop-up webpage**
  * Le pop-up affiche l'image **stars.jpeg**