Créer une extension Chrome avec ChatGPT

Créer une extension Chrome personnalisée avec ChatGPT en 5 minutes

Avec l’aide de ChatGPT, un grand modèle de langage formé par OpenAI, nous pouvons créer une extension Chrome adaptée à nos besoins spécifiques et nous aider à rationaliser nos tâches quotidiennes sans écrire une seule ligne de code par nous-mêmes. Voyons comment cela fonctionne…

Dans ce guide étape par étape, nous vous montrerons comment utiliser ChatGPT pour développer une extension Chrome pouvant être utilisée pour créer des notifications. L’extension aura un champ de saisie de texte pour saisir le texte de notification et l’utilisateur aura la possibilité de choisir entre 30 secondes, 5 minutes, 30 minutes et 1 heure. Après avoir cliqué sur un bouton « M’avertir! », Le programme affichera une notification de toast après la durée sélectionnée. L’extension fournira également un bouton « Réinitialiser » qui peut être utilisé pour effacer le champ de saisie de texte. La sélection par défaut pour la période de notification sera de 30 secondes.

Ce guide vous guidera tout au long du processus de création d’une extension Chrome à partir de zéro, y compris la configuration du projet, la génération du code à l’aide de ChatGPT et la publication de l’extension sur le Chrome Web Store. Que vous soyez un développeur débutant ou expérimenté, ce guide vous fournira les connaissances dont vous avez besoin pour créer votre propre extension Chrome personnalisée à l’aide de ChatGPT. Alors, commençons!

Fournir nos exigences à ChatGPT

Afin que ChatGPT génère le code de notre extension Chrome personnalisée, nous devons fournir une description écrite de ce que nous voulons implémenter. Commençons par l’entrée suivante dans ChatGPT :

« Implémentez une extension Chrome qui peut être utilisée pour créer des notifications. L’extension Chrome doit avoir un champ de saisie de texte pour saisir le texte de la notification. L’utilisateur doit avoir la possibilité de choisir entre 30 secondes, 5 minutes, 30 minutes, 1 heure. Après avoir cliqué sur un bouton « Prévenez-moi ! le programme devrait afficher une notification de toast après la durée sélectionnée. L’application doit également fournir un bouton « Réinitialiser ». Ce bouton est utilisé pour effacer le champ de saisie de texte. La sélection par défaut pour la période de notification est de 30 secondes.

C’est une description claire de ce que nous voulons avoir. ChatGPT commence immédiatement à fournir la réponse :

ChatGPT fournit des descriptions détaillées de ce que nous devons faire avec le code source complet qui doit être utilisé.

La première étape consiste à créer un nouveau répertoire pour l’extension, à ajouter un fichier manifest.json et à insérer le code généré suivant :

{ 
    "manifest_version" :  2 , 
    "name" :  "Notification Extension" , 
    "description" :  "Une extension pour créer des notifications" , 
    "version" :  "1.0" , 
    "browser_action" :  { 
        "default_popup" :  "popup.html" 
    } , 
    "autorisations" :  [ 
        "notifications" 
    ] 
}

Un fichier manifest.json est un fichier requis dans une extension Chrome qui fournit des informations importantes sur l’extension au navigateur. Il s’agit d’un fichier au format JSON qui définit le nom, la version, les autorisations et d’autres paramètres de l’extension.

Ajoutez un fichier popup.html avec le contenu suivant :

<!DOCTYPE html > 
< html > 
  < head > 
    < title > Extension de notification </ title > 
  </ head > 
  < body > 
    < h1 > Créer une notification </ h1 > 
    < form > 
        < label  for = "notification-text" > Texte de la notification : </ label > 
        < type d'entrée  = "texte"id = "texte de notification"  placeholder = "Entrez le texte de notification ici" > 
        < br > 
        < label  for = "notification-time" > Heure de notification : </ label > 
        < select  id = "notification-time" > 
            < option  value = "30000" > 30 secondes < / option > 
            < option  value = "300000" > 5 minutes </ option > 
            <valeur de l' option  = "1800000"> 30 minutes </ option > 
            < option  value = "3600000" > 1 heure </ option > 
        </ select > 
        < br > 
        < button  type = "button"  id = "notify-button" > Avertissez-moi ! </ bouton > 
        < type de bouton  = "bouton" id = "bouton de réinitialisation" >  Réinitialiser </ bouton > 
    <
    script  src = "popup.js" > </ script > 
  </ body > 
</ html >

Le code crée une interface utilisateur simple pour créer des notifications avec un champ de saisie de texte et des options pour choisir la période de notification.

Le code commence par les balises <!DOCTYPE> et <html>, qui sont des balises standard dans un document HTML. La section <head> contient le titre de la page, qui sera affiché dans l’onglet du navigateur.

Dans la section <body>, il y a un en-tête « Créer une notification » et un formulaire. Le formulaire contient une étiquette et un champ de saisie pour le texte de notification, où l’utilisateur peut saisir le texte dont il souhaite être informé. Il contient également une étiquette et un élément de sélection pour choisir la période de temps pour la notification. Les options pour l’élément sélectionné sont 30 secondes, 5 minutes, 30 minutes et 1 heure. Le formulaire contient deux boutons, un pour déclencher la notification et un pour réinitialiser le champ de saisie de texte. La dernière ligne du code

< script  src = "popup.js" > </ script >

est un lien vers le fichier JavaScript, qui gère les fonctionnalités de l’extension.

Le code complet qui doit entrer dans popup.js est également entièrement généré par ChatGPT :

// Récupère les éléments du HTML 
const notificationText = document . getElementById ( "texte de notification" ); 
const notificationHeure = document . getElementById ( "heure de notification" ); 
const notifyButton = document . getElementById ( "notifier-bouton" ); 
const resetButton = document . getElementById ( "bouton de réinitialisation" ); 

// Définissez la période de temps par défaut à 30 secondes
 notificationTime. valeur =30000 ; 

// Écoutez le "Me notifier !" bouton à cliquer
 notifyButton. addEventListener ( "click" , () => { 
  // Récupère le texte et la période à partir du formulaire 
  const text = notificationText. value ; 
  const time = notificationTime. value ; 

  // Afficher une notification après la période sélectionnée 
  setTimeout ( () => { chrome.notifications.create 
    ( " " , { type : "basic" , iconUrl : " icon.png "
      
      , 
      titre : "Notification" , 
      message : texte, 
      priorité : 2 , 
    }); 
  }, temps); 
}); 

// Écoutez le bouton "Réinitialiser" à cliquer
 resetButton. addEventListener ( "click" , () => { 
  // Efface le champ de saisie de texte
   notificationText. value = "" ; 
});

Il s’agit d’un code JavaScript qui fournit la fonctionnalité d’une extension Chrome qui crée des notifications avec un champ de saisie de texte et des options pour choisir la période de notification.

Le code sélectionne d’abord les éléments DOM du champ de saisie, l’élément de sélection et les boutons du code HTML à l’aide de la getElementByIdméthode. Ensuite, il définit la valeur par défaut de l’élément select à 30 secondes. Ensuite, il écoute les clics sur les deux boutons ‘notify-button’ et ‘reset-button’ en utilisant la addEventListenerméthode.

Lorsque le ‘notify-button’ est cliqué, il récupère la valeur du champ de saisie et sélectionne l’élément à l’aide de la valuepropriété. Ensuite, il utilise la setTimeoutméthode pour afficher la notification après la période sélectionnée en créant la notification à l’aide de la chrome.notifications.createméthode avec certaines options telles que le type, l’icône, le titre, le message et la priorité.

Lorsque le ’bouton de réinitialisation’ est cliqué, il efface le champ de saisie de texte en définissant la valeur du champ de saisie sur une chaîne vide.

Créez popup.js et copiez-collez le code généré.

Télécharger l’extension sur Chrome

Il est maintenant temps d’installer l’extension dans Chrome et de tester si le code généré fonctionne comme prévu.

Ouvrez la vue « Gérer les extensions » dans votre navigateur Chrome et activez le « Mode développeur » :

Vous pouvez maintenant cliquer sur le bouton « Load unpacked » et sélectionner le répertoire du projet de l’extension Chrome. L’extension est ensuite téléchargée et est visible dans l’aperçu des extensions :

Vous pouvez désormais accéder à l’extension de notification depuis la barre d’extensions :

Pour tester la fonction, vous pouvez simplement mettre un court texte de notification, laisser le temps de notification à 30 secondes et appuyer sur le bouton « M’avertir! ». Vous verrez alors la notification apparaître après 30 secondes en chrome :

D’accord, super. Ainsi, War ChatGPT a généré du code pour l’extension qui n’inclut aucun style. C’est à peu près correct parce que nous n’avons pas demandé de le faire.

Ajoutez du style avec Tailwind CSS

Essayons d’adapter le code déjà généré et disons à ChatGPT d’ajouter du style en utilisant Tailwind CSS. Saisissez la requête suivante dans ChatGPT :

« Veuillez ajouter un style à l’interface utilisateur de l’application en utilisant le framework CSS Tailwind. »

ChatGPT vous fournira une réponse immédiatement :

Le code HTML complet est régénéré et mis à jour selon notre demande.

<!DOCTYPE html > 
< html > 
  < head > 
    < title > Extension de notification </ title > 
    < link 
      href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
      rel = "stylesheet "
     /> 
  </ head > 
  < body  class = "bg-gray-100" > 
    < div  class = "container mx-auto p-4" > 
      < h1  class = "texte-2xl police-moyen" >Créer une notification </ h1 > 
      < form  class = "bg-white arrondi-lg p-4" > 
        < label  class = "block text-sm font-medium mb-2"  for = "notification-text"
           > Texte de la notification : </label 
        > 
        < input 
          class = "border-2 round-lg p-2 w-full" 
          type = "text" 
          id = "notification-text" 
          placeholder = "Entrez le texte de la notification ici"
         /> 
        <br /> 
        < étiquette class = "block text-sm font-medium mb-2"  for = "notification-time"
           > Heure de notification :</label
        >
         < select  class = "border-2 round-lg p-2 w-full"  id = " notification-time" > 
          < option  value = "30000" > 30 secondes </ option > 
          < option  value = "300000" > 5 minutes </ option > 
          <valeur de l' option  = "1800000" >30 minutes </ option > 
          < option  value = "3600000" > 1 heure </ option > 
        </ select > 
        < br /> 
        < div  class = "flex justifier-end" > 
          < button 
            class = "bg-blue-500 text -blanc p-2 arrondi-lg m-2" 
            type = "bouton" 
            id = "notifier-bouton"
           >
             Avertissez-moi ! 
          </ bouton > 
          <
            "bg-rouge-500 texte-blanc p-2 arrondi-lg m-2" 
            type = "bouton" 
            id = "bouton de réinitialisation"
           >
             Réinitialiser
           </ bouton > 
        </ div > 
      </ formulaire > 
    </ div > 
    < script  src = "popup.js" > </ script > 
  </ body > 
</ html >

Le code HTML inclut désormais le style en appliquant certaines des classes CSS de Tailwind, de sorte que l’interface utilisateur de l’extension chrome devrait maintenant ressembler à :

Conclusion

En conclusion, la création d’une extension Chrome personnalisée à l’aide de ChatGPT est un processus simple et rapide qui peut grandement améliorer votre productivité et votre efficacité dans vos tâches quotidiennes. En quelques étapes simples et avec un minimum de connaissances en codage, vous pouvez développer une extension adaptée à vos besoins spécifiques et rationaliser votre travail.

Nous espérons que ce guide vous a fourni une compréhension claire de la façon de créer une extension Chrome personnalisée à l’aide de ChatGPT. De la configuration du projet à l’écriture du code et à la publication de l’extension sur le Chrome Web Store, nous avons couvert toutes les étapes importantes pour vous aider à démarrer. Que vous soyez débutant ou développeur expérimenté, vous pouvez désormais créer votre propre extension Chrome personnalisée à l’aide de ChatGPT en seulement 5 minutes.

Créer une extension Chrome personnalisée n’a jamais été aussi facile, grâce à la puissance de ChatGPT. Alors, allez-y et essayez-le – vous pourriez être surpris de tout ce que vous pouvez accomplir en quelques étapes simples. Les possibilités sont infinies, alors laissez libre cours à votre créativité et voyez ce que vous pouvez créer avec ChatGPT !

Retour en haut