Mise en Service et Test de l'Extension Google Chome pour la Milestone : Création et Déploiement de la Première Extension Google Chrome (#1, #2)

[jean-ely-gendrau]

🛠️ Issue : Mise en Service et Test de l'Extension Google Chrome

Description

Cette issue a pour objectif de guider les étapes nécessaires pour la mise en service et les tests de votre extension Google Chrome sans utiliser de package manager. Vous allez apprendre à charger votre extension dans Chrome, à tester ses fonctionnalités, et à vérifier son bon fonctionnement.

Étapes à suivre :

1. Préparer le projet :

   • Assurez-vous que la structure de votre projet est correcte et que tous les fichiers nécessaires sont présents.
   • Vous devriez avoir les dossiers et fichiers suivants :

     my-extension/
     ├── images/
     │   └── icon16.png
     │   └── icon48.png
     │   └── icon128.png
     ├── popup/
     │   ├── popup.html
     │   ├── popup.js
     │   └── popup.css
     └── manifest.json
     

2. Charger l'extension dans Chrome :

   • Ouvrir Chrome : Lancez Google Chrome.
   • Accéder à la page des extensions : Cliquez sur le menu à trois points en haut à droite, puis allez dans Extensions (chrome://extensions/).
     
   • Activer le mode développeur : Activez le Mode développeur en haut à droite de la page.
     
   • Charger l'extension non empaquetée : Cliquez sur Charger l'extension non empaquetée et sélectionnez le dossier de votre projet.
     

3. Tester l'extension :

   • Vérifier le chargement : Assurez-vous que votre extension s'affiche dans la liste des extensions avec l'icône correcte.
     
   • Ouvrir le popup : Cliquez sur l'icône de votre extension à côté de la barre d'adresse pour ouvrir le popup et vérifier qu'il s'affiche correctement.
     
   • Tester les fonctionnalités : Interagissez avec votre extension pour vous assurer que les fonctionnalités implémentées fonctionnent comme prévu.
     

4. Debugging :

   • Ouvrir la console développeur : Si votre extension ne fonctionne pas comme prévu, faites un clic droit sur le popup de l'extension et sélectionnez Inspecter pour ouvrir la console développeur.
     
   • Consulter les erreurs : Vérifiez les messages d'erreur et les logs dans la console pour identifier et corriger les problèmes.
     

Tâche à réaliser :

• Modifier la couleur du title de l'extension.

Pour ce faire modifier le fichier popup/popup.css avec ceci où celons vos idées

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  color: brown;
}

Visualiser les changements :

• Accéder de nouveau à la page des extensions : Cliquez sur le menu à trois points en haut à droite, puis allez dans Extensions (chrome://extensions/).
  

Trouvez votre extension dans la liste et cliquez sur l'icône d'actualisation. Ouvrez votre extension en haut à droite de la barre de recherche !

Vous devriez apercevoir le changement de couleur effectué. Sinon, vérifiez que vous n'avez pas fait d'erreur.

COMMIT

    git add . && git commit -m "#2 Modifier la couleur du `title` de l'extension."

Pousser les Modifications et Demande de tirage

Passez à l'étape 7. Pousser les Modifications vers GitHub --pull-request.

Vous avez maintenant toutes les informations nécessaires pour mettre en service et tester votre extension Google Chrome. Bon développement !