Création d’une extension Chrome avec ChatGPT

Comme beaucoup d’entre vous je continue de découvrir et de tester ChatGPT pour optimiser mon travail ou même la vie de tous les jours. Il y a quelques temps j’ai eu envie de créer ma propre extension Google Chrome associée à ChatGPT.

Alors rien de très novateur en soi mais comme je consulte beaucoup de contenu sur Internet parfois les articles ou le contenu sont trop longs. Donc mon idée ça aurait été d’avoir un bouton dans mon navigateur qui puisse me résumer la page que j’ai sous les yeux en quelques secondes. Je me suis donc tourné vers ChatGPT pour savoir s’il pouvait m’aider à cette extension. Je précise d’ailleurs que je n’y connaissais rien : je n’avais aucune idée du langage de programmation, des fichiers à créer, etc.

Et donc, tout a commencé avec ce prompt :

Etape 1 – Se préparer à interagir avec l’API de ChatGPT

Avant d’aller plus loin et si ce n’est pas déjà fait, vous devez disposer d’un compte sur le site de l’API de OpenAI. C’est ce qui vous permettra de dialoguer avec ChatGPT depuis votre extension Google Chrome. Une fois que votre compte est créé, vous devez également le provisionner avec une somme d’argent pour qu’il y ait un peu de crédit dessus. Je vous rassure chaque appel de ChatGPT ne fait que quelques centimes.

J’ai détaillé la procédure dans mon précédent article ici : https://akril.net/utilisation-de-chatgpt-dans-zapier/ ! ⬅️

A l’époque, j’avais mis 15$ et j’ai toujours 8$ qui me reste donc pas de stress vous avez le temps de voir venir. D’autant que dans mon scénarion, votre budget ne sera décompté que lorsque vous cliquerez sur l’extension. 😉

Quand votre compte est créé et approvisionné, créez également une clé d’API pour notre extension Chrome afin qu’elle puisse se connecter aux services OpenAI. Je vous recommande de créer une clé pour chaque besoin / projet sur lesquels vous travaillez.

Passons maintenant au développement (avec ChatGPT) ! 🤖

Etape 2 – Création de notre extension

En réalité, il s’est avéré que c’était bien plus simple que je l’aurais pensé. ChatGPT m’a indiqué le nombre de fichiers ainsi que le code que j’avais besoin de mettre au sein de chaque fichier. Il y a bien sûr eu quelques allers-retours en fonction de la personnalisation que je voulais mais globalement en moins d’1 heure j’avais une extension fonctionnelle pour mon navigateur Internet.

Voici ce que j’ai mis en place :

• manifest.json : c’est le fichier qui permet de définir le nom de votre extension, son numéro de version, les permissions qui seront éventuellement nécessaire au sein de votre navigateur. Vous pouvez même personnaliser l’icône qui sera utilisée pour représenter votre extension (le fichier image doit être positionné dans le même dossier).

{
  "manifest_version": 3,
  "name": "QuickSum",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

• popup.js : c’est évidemment ici que la magie opère. Tout le code est en JavaScript. Pour être tout à fait transparent, je n’ai pas eu grand chose à remplacer car ChatGPT avait très bien compris ce que je cherchais à faire. En dehors du fait de définir que cette extension doit permettre d’ouvrir un popup pour afficher des informations il faut aussi et surtout définir la clé d’API qui va permettre d’intéragir avec ChatGPT. Vous pouvez également personnaliser le prompt afin de venir définir comment votre IA doit vous répondre par rapport à la page Internet qui va lui être partagée. Vous voyez qu’en ce qui me concenre j’affine la réponse attendue en demandant une réponse synthétique qui doit être présenter en une liste à puces de 5 éléments (je trouve ça plus facile et surtout plus rapide à lire). Je personnalise également le prompt qui arracompagnera la page web en lui demdant de formater sa réponse en texte « simple » pour éviter le Markdown. Il ne reste plus qu’une gestion d’erreur au cas où il y aurait un souci sur l’API et c’est bon. 🙂

document.getElementById('resume').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.body.innerText
  }, async (results) => {
    const pageText = results[0].result.slice(0, 3000); // limiter un peu

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer cle_API_ChatGPT' // remplacer ici
      },
      body: JSON.stringify({
        model: "gpt-4o",
        messages: [
          { role: "user", content: `Voici un texte extrait d'une page web :\n\n${pageText}\n\nPeux-tu le résumer de manière claire ?\nPeux-tu présenter ta réponse via une liste à puces composée aux maximum de 5 points. Ta réponse ne doit pas être du Markdown ou de l'HTML mais du text simple.` }
        ],
        max_tokens: 500
      })
    });

    const data = await response.json();
    document.getElementById('resultat').innerText = data.choices?.[0]?.message?.content || "Erreur API";
  });
});

Notez que pour que ça fonctionne vous devez modifier la ligne qui commence par « Authorization » dans la méthode POST en indiquant votre clé d’API OpenAI.

• popup.html : Il nous reste à personnaliser l’aspect et l’affichage de la réponse que nous aurons. Là, c’est de l’HTML et du CSS donc rien de complexe. J’ai juste voulu personnaliser la taille du popup et ajouter un peu de bleu histoire de voir à quoi ça pouvait ressembler. En dehors de ça, j’ai conservé les réglages par défaut.

<!DOCTYPE html>
<html>
<head>
  <title>GTP</title>
  <style>
    body {
      width: 500px;
      font-family: Arial, sans-serif;
      padding: 10px;
      background-color: #cecece;
    }

    #resume {
      padding: 10px 15px;
      font-size: 16px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    #resultat {
      max-height: 500px;
      overflow-y: auto;
      border: 5px solid #2d82f5;
      padding: 20px;
      border-radius: 5px;
      background-color: #cecece;
      white-space: pre-wrap;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <button id="resume">Summary</button>
  <div id="resultat"></div>
  <script src="popup.js"></script>
</body>
</html>

Enregistrez tous les fichiers dans un même dossier.

Au final, vous devez avoir quelque-chose comme ça. ⬇️

Etape 3 – Tester l’extension

Une fois l’ensemble des fichiers prêts, regroupez tout dans un dossier.

Depuis Google Chrome, allez sur la page pour gérer les extensions : chrome://extensions/. Tout en haut à droite, vous pourrez activer le mode développeur et charger manuellement votre extension avec le bouton à gauche : Charger l’extension non empaquetée. Dans la fenêtre qui s’ouvre, il ne reste plus qu’à indiquer où se trouve le dossier avec les fichiers que vous venez de créer.

Désormais lorsque je consulte une page sur Internet. J’affiche le popup de mon extension et je peux cliquer sur le bouton Summary pour obtenir un résumé de la page. La page est transférée à ChatGPT qui me la résume en une liste à puce de 5 éléments. 😉

Ci-dessous le test que j’ai fait avec un article du célèbre site Numerama qui traite du retard à la sortie en salles pour le filme Mortal Kombat 2 (bon ok, c’est un sujet et un test comme un autre). 😀

Voici ce que nous obtenons si je zoome un peu :

Au final, le résumé est plutôt fidèle à l’article.

Conclusion

Vous l’aurez compris, l’extension que j’ai développée reste volontairement simple. Et pourtant… c’est justement ce qui rend l’expérience aussi marquante. Ce projet m’a surtout permis de prendre conscience d’une chose : à quel point ChatGPT peut nous accompagner concrètement, au-delà des simples questions-réponses. En quelques échanges, l’outil m’a guidé pas à pas dans un domaine que je ne maîtrisais absolument pas, rendant accessible quelque chose qui me semblait hors de portée.

Aujourd’hui, je suis capable de dire que j’ai créé ma propre extension pour navigateur. De l’idée jusqu’à la première version fonctionnelle, j’ai pu tout construire sans aucune connaissance préalable en développement d’extension Chrome. J’avais juste une intuition, une envie : celle d’avoir un petit outil personnel pour me simplifier la lecture en ligne. Et grâce à l’assistance de l’IA, j’ai pu transformer cette idée floue en quelque chose de concret, d’utile, et surtout que j’ai moi-même conçu (bon toujours moche mais le design est moi c’est compliqué). 😆

Ce genre d’expérience est enthousiasmant, car il ouvre la porte à plein d’autres petites idées qu’on laisse souvent de côté faute de compétences techniques. Aujourd’hui, avec les bons outils et un peu de curiosité, on peut passer de l’envie à la réalisation… et ça, c’est vraiment génial.