Comment créer une extension Chrome avec votre code

Comment créer une extension Chrome De nombreux utilisateurs souhaitent apprendre à créer une extension Chrome et à améliorer les capacités de leur navigateur. Si vous maîtrisez la partie codage, il n’est pas si difficile de créer une extension Chrome.

Comment créer une extension Chrome ?

1. Créer un fichier manifeste

  1. Créez un nouveau dossier sur votre ordinateur. Ce dossier contiendra tous les fichiers de votre extension. Nommez-le quelque chose comme MonPremièreExtension .
  2. Dans votre dossier de projet, créez un fichier nommé manifest.json . Ce fichier informe Chrome sur votre extension et ses capacités.
  3. Ajoutez le code suivant à manifest.json : JSON{ "manifest_version": 3, "name": "Mon Première Extension", "version": "1.0", "description": "Une simple extension Chrome.", "action": { "default_popup": "popup.html", "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } }, "permissions": [] }

2. Créer le HTML du popup

  1. Créez un fichier nommé popup.html dans votre dossier de projet. Ce fichier définit la structure de la fenêtre popup qui apparaît lorsque vous cliquez sur l’icône de l’extension.
  2. Ajoutez le code suivant à popup.html : HTML Mon Première Extension

    Bonjour, le monde !

3. Ajouter des styles et des fonctionnalités JavaScript (Optionnel)

  1. Si vous souhaitez styliser votre popup, créez un fichier nommé popup.css et liez-le dans popup.html : HTML
  2. Ajoutez vos styles CSS dans popup.css .
  3. Si vous avez besoin de fonctionnalités JavaScript, créez un fichier nommé popup.js et liez-le dans popup.html : HTML
  4. Ajoutez votre code JavaScript dans popup.js .

4. Ajouter une icône et charger votre extension

  1. Ajoutez une image d’icône à votre dossier de projet et nommez-la icon.png . Cette icône sera affichée dans la barre d’outils de Chrome.
  2. Ouvrez Chrome et allez à chrome://extensions/ .
  3. Activez le Mode développeur en basculant l’interrupteur dans le coin supérieur droit.
  4. Cliquez sur le bouton Charger l’extension non empaquetée et sélectionnez votre dossier de projet.

5. Tester votre extension et la publier (Optionnel)

  1. Votre extension devrait maintenant être chargée dans Chrome. Cliquez sur l’icône de l’extension dans la barre d’outils pour voir votre popup.
  2. Si vous souhaitez publier votre extension sur le Chrome Web Store, vous devrez créer un compte développeur et suivre la Documentation pour développeurs du Chrome Web Store.

Nous espérons que cela vous aidera à commencer à créer votre propre extension Chrome ! Faites-nous savoir si vous avez des questions ou si vous avez besoin d’une assistance supplémentaire dans les commentaires ci-dessous.