Comment créer une extension Chrome avec ChatGPT, le guide complet

Dans ce guide, nous allons voir comment créer notre propre extension pour les navigateurs basés sur Chromium tels que Brave, Google Chrome, Microsoft Edge ou Opera, et ce en tirant parti de l'expertise de ChatGPT, sans aucune notion de code. Je vous encourage à lancer ChatGPT de votre côté et à vivre l'expérience tout en vous faisant votre propre idée plutôt que d'utiliser le code utilisé dans ce guide. Ainsi, vous pourrez appliquer le code spécifique que ChatGPT vous fournira lui-même tout au long du processus.

Trouver une idée d'extension

Pour commencer, nous devons déterminer quel type d'extension nous souhaitons créer. Personnellement, je souhaite créer une extension qui affiche le prix du Bitcoin en temps réel directement sur l'icône de l'application, et que je pourrai également épingler et visualiser sans avoir à cliquer dessus. Si de votre côté vous manquez d'inspiration, n'hésitez pas à choisir l'une de ces idées d'extension :

1. Gestionnaire de tâches minimaliste : une extension qui permet aux utilisateurs de gérer une liste de tâches à accomplir directement depuis la barre d'outils du navigateur.
2. Convertisseur de devises : une extension qui permet aux utilisateurs de convertir rapidement des devises en utilisant des taux de change en temps réel.
3. Rappel de pause : une extension qui envoie des rappels aux utilisateurs pour qu'ils s'accordent des pauses régulières lors de longues sessions de travail devant l'ordinateur.
4. Générateur de mots de passe : une extension qui génère des mots de passe sécurisés et aléatoires sur demande pour aider les utilisateurs à protéger leurs comptes en ligne.
5. Marque-pages rapides : une extension qui permet aux utilisateurs d'accéder rapidement à leurs sites Web préférés en ajoutant des icônes de raccourci dans la barre d'outils du navigateur.
6. Chronomètre et minuterie : une extension qui permet aux utilisateurs de lancer un chronomètre ou de régler une minuterie directement depuis leur navigateur.
7. Afficheur de météo : une extension qui affiche les conditions météorologiques actuelles et les prévisions pour un lieu spécifique directement sur l'icône de l'extension.
8. Mode lecture simplifié : une extension qui transforme la mise en page des articles en ligne en un format épuré et facile à lire, notamment en supprimant les éléments distrayants.
9. Suivi de l'utilisation des réseaux sociaux : une extension qui aide les utilisateurs à surveiller et à limiter le temps qu'ils passent sur les réseaux sociaux en leur montrant un décompte du temps passé.
10. Raccourcis clavier personnalisés : une extension qui permet aux utilisateurs de définir leurs propres raccourcis clavier pour effectuer des actions fréquentes ou accéder rapidement à des sites Web spécifiques.

Expliquer son idée à ChatGPT

Premièrement, vous allez devoir formuler votre idée à ChatGPT. Soyez clair : ne faites pas de phrases trop longues, et divisez-la en plusieurs points. Voici le prompt que j'ai utilisé pour formuler ma requête :

Bonjour, je souhaite faire une extension chrome qui [principe de l'extension].
Je ne veux pas [choses à ne pas faire].
Je veux pouvoir [comment intéragir avec].

Créer les fichiers de l'extension

À ce stade, ChatGPT devrait vous avoir fourni une liste d'étapes à suivre correspondant au type d'extension que vous souhaitez obtenir. Avant toute chose, prenez le temps de tout lire attentivement afin de vous faire une idée de ce qui vous attend. Pour ma part, je vais créer un dossier portant un nom de mon choix, puis, à l'intérieur, je placerai un fichier manifest.json, un fichier background.js, ainsi qu'une icône de 48x48 pixels.

Si vous ne savez pas comment créer un fichier .json, .js, ou une icône de 48x48 pixels, n'hésitez pas à demander à ChatGPT qui vous guidera à travers les étapes nécessaires sans perdre le fil de la conversation. Tant que vous restez sur la même fenêtre de discussion, il conservera en "mémoire" vos échanges précédents.

Ajouter l'extension à Chrome

Une fois que nous avons tous nos fichiers, nous pouvons passer à la suite. Ouvrons ensuite notre navigateur et rendons-nous sur chrome://extensions. Vous pouvez aussi cliquer sur le logo extension (le puzzle) en haut à droite puis sur Gérer les extensions. Ici, nous allons pouvoir activer le mode développeur.

Une fois le mode développeur activé, cliquez sur Charger l'extension non empaquetée, puis sélectionnez le dossier racine (celui qui contient tout vos fichiers). Il ne faut pas le mettre dans une archive .zip, laissez le dossier tel quel.

Test et debug de l'extension

Votre extension est maintenant dans votre navigateur, sauf en cas d'erreur dans le code. Si chrome vous affiche une erreur, copiez tout le texte et dites ceci à ChatGPT :

J'ai cette erreur en ajoutant mon extension à Chrome : 
[Coller l'erreur]

Dans mon cas, l'extension ne fonctionne pas comme prévu. Je voulais avoir le prix du BTC dans un badge sur l'icône, comme sur l'extension violette à gauche.

Dans le cas où vous vous retrouvez face à un quelconque disfonctionnement, il faudra expliquer de la façon la plus claire possible ce qui ne va pas à ChatGPT :

[Résumer en une phrase ce qui ne va pas]. 
[Éxpliquer ce que vous vouliez]. 
[Donner un exemple si vous en connaissez un].

ChatGPT devrait comprendre l'erreur et vous proposer une solution adaptée. Suivez ses nouvelles instructions.

Appliquer les correctifs

Il suffit de suivre les instructions de ChatGPT pour appliquer les correctifs. Une fois les fichiers modifiés, supprimez l'extension de Chrome depuis le menu de gestion, puis chargez votre nouvelle extension. Si vous constatez une erreur, rechargez votre page avec Cmd+Shift+R sur Mac, ou CTRL+F5 sur Windows et essayez à nouveau.

Vérifiez le fonctionnement de votre extension. Dans notre cas, elle fonctionne parfaitement ! Cependant, on peut toujours l'améliorer. Le dernier caractère est légèrement coupé, nous allons demander une solution à ChatGPT.

Demander des ajustements

Nous allons demander à ChatGPT ce qu'il est possible de faire pour que le texte ne soit pas coupé :

Parfait ça fonctionne très bien, cependant [Expliquer ce que vous souhaitez changer].
Connais-tu une solution à cela ?

ChatGPT va vous donner une solution en réponse. Si elle ne vous convient pas, vous pouvez simplement écrire :

Peux-tu me proposer une solution différente ?

Dans notre cas, la proposition de ChatGPT correspond exactement ce qui nous fallait et nous allons donc l'appliquer.

L'extension est prête

Il ne reste plus qu'a modifier le code, supprimer l'ancienne extension et charger la nouvelle. Et notre extension est désormais prête et fonctionnelle !

Publier une extension sur le Chrome Web Store

Si vous souhaitez ajouter votre extension au Chrome Web Store, vous pouvez tout simplement demander les étapes à ChatGPT :

Merci. Comment ajouter mon extension au chrome web store ?

Fin

En conclusion, ce guide vous a montré comment tirer parti de ChatGPT pour créer une extension Chrome personnalisée sans avoir besoin de compétences en développement préalables. En suivant les étapes décrites ici et en interagissant avec ChatGPT, vous avez pu créer une extension adaptée à vos besoins, la tester et l'améliorer en fonction de vos exigences. N'hésitez pas à continuer d'explorer et d'expérimenter avec ChatGPT pour créer ce dont vous avez envie !