Vous voulez créer une extension Chrome mais vous ne savez pas par où commencer ? Vous pensez que c’est compliqué et réservé aux experts du code ? Et si c’était en fait beaucoup plus simple que vous ne l’imaginez ?

Cet article vous montre comment développer votre première extension Chrome de A à Z. On va utiliser des technologies web que vous connaissez sûrement déjà : le HTML, le CSS et le JavaScript. Suivez ce guide pas à pas pour créer une extension simple, fonctionnelle, et comprendre comment tout s’articule.

Prérequis : Activer le Mode Développeur sur Chrome

Avant de toucher la moindre ligne de code, il y a une étape obligatoire. Vous devez dire à Google Chrome que vous êtes un développeur pour qu’il accepte de charger votre création. Sans ça, impossible de tester votre travail.

C’est très simple et ça prend 10 secondes. Voici comment faire :

  • Ouvrez le menu de Chrome (les trois points en haut à droite).
  • Allez dans Extensions > Gérer les extensions. Vous pouvez aussi taper chrome://extensions directement dans la barre d’adresse.
  • En haut à droite de la page, cherchez l’interrupteur « Mode développeur » et activez-le.

Voilà, votre navigateur est prêt à charger des extensions qui ne viennent pas du Chrome Web Store. On peut maintenant commencer à coder.

L’Anatomie d’une Extension Chrome : Les 3 Fichiers Essentiels

Une extension Chrome, même la plus complexe, repose sur un petit nombre de fichiers de base. Pour notre premier projet, on n’aura besoin que de trois fichiers. Chacun a un rôle très précis.

Pour y voir plus clair, voici un tableau qui résume le rôle de chaque fichier :

Fichier Rôle principal Langage
manifest.json La carte d’identité de l’extension. Définit son nom, sa version, ses permissions et les fichiers qu’elle utilise. JSON
popup.html L’interface utilisateur visible. C’est la petite fenêtre qui s’ouvre quand on clique sur l’icône de l’extension. HTML / CSS
popup.js Le cerveau de la popup. Ajoute de l’interactivité et de la logique à l’interface utilisateur. JavaScript

Le fichier manifest.json : Le Cerveau de l’Opération

Le fichier manifeste, ou manifest.json, est le fichier le plus important. C’est le point d’entrée de votre extension. Google Chrome le lit en premier pour savoir ce que votre extension fait, comment elle s’appelle et de quelles autorisations elle a besoin pour fonctionner.

Important : Vous devez obligatoirement utiliser le Manifest V3. Google a arrêté le support pour l’ancienne version (V2). Tous les nouveaux projets doivent être créés avec la version 3 du manifeste pour être acceptés sur le Chrome Web Store.

Ce fichier définit des informations capitales comme le nom de l’extension, sa version, sa description, et surtout, l’action à réaliser lorsque l’utilisateur clique sur l’icône (ce qu’on appelle `action`). Pour en savoir plus, vous pouvez consulter la documentation officielle du manifest.

Le fichier popup.html : L’Interface Visible

Lorsque vous cliquez sur l’icône d’une extension dans votre barre d’outils, une petite fenêtre apparaît. Cette fenêtre, c’est tout simplement une page web locale, définie par un fichier HTML. On l’appelle la « popup ».

Dans ce fichier popup.html, vous pouvez mettre tout ce que vous mettriez dans une page web classique : du texte, des images, des boutons, des formulaires. C’est l’interface utilisateur principale de votre extension.

Le fichier popup.js : L’Intelligence de la Popup

Une interface sans interactivité n’est pas très utile. Le fichier popup.js contient le code JavaScript qui va donner vie à votre popup.html. C’est ici que vous allez gérer les clics sur les boutons, récupérer des informations, et interagir avec les API de Chrome.

Ce fichier est lié à votre HTML de la même manière qu’un script classique sur une page web, via une balise <script>. C’est lui qui exécute la logique de votre extension lorsque la popup est ouverte.

Tutoriel : Créer votre Première Extension Chrome en 5 Étapes

Passons à la pratique. On va maintenant créer une extension « Hello World » très simple. Elle affichera un message dans sa popup. Suivez bien chaque étape.

Étape 1 : Créer le dossier et les fichiers du projet

Pour commencer, créez un nouveau dossier sur votre ordinateur. Appelez-le ma-premiere-extension. C’est la racine de votre projet. À l’intérieur de ce dossier, créez les trois fichiers dont on vient de parler :

  • manifest.json
  • popup.html
  • popup.js

Votre structure de projet doit ressembler à ça :

ma-premiere-extension/
├── manifest.json
├── popup.html
└── popup.js

Étape 2 : Configurer le manifest.json

Ouvrez le fichier manifest.json avec votre éditeur de code et copiez-collez le contenu suivant. C’est une configuration de base pour une extension Manifest V3.

{
  "manifest_version": 3,
  "name": "Ma Première Extension",
  "version": "1.0",
  "description": "Une extension Chrome simple pour débuter.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Quelques explications sur ce manifeste JSON :

  • manifest_version: Doit être 3. C’est non négociable.
  • name, version, description: Des informations de base sur votre extension.
  • action: Indique à Chrome quoi faire quand on clique sur l’icône. Ici, on lui dit d’ouvrir le fichier popup.html.
  • icons: Définit l’icône de votre extension. Pour que ça fonctionne, créez un dossier images à la racine et mettez-y des icônes au format PNG (vous pouvez utiliser des images temporaires pour le moment).

Étape 3 : Coder la popup en HTML et CSS

Maintenant, occupons-nous de l’interface. Ouvrez le fichier popup.html et ajoutez ce code HTML de base. Il contient un titre et un bouton.

<!DOCTYPE html>
<html>
<head>
  <title>Ma Popup</title>
  <style>
    body {
      width: 200px;
      font-family: sans-serif;
      text-align: center;
    }
    button {
      margin-top: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Salut !</h1>
  <button id="monBouton">Clique ici</button>
  <script src="popup.js"></script>
</body>
</html>

On a ajouté un peu de CSS directement dans la balise <style> pour que ce soit plus joli. Notez bien la dernière ligne : <script src="popup.js"></script>. C’est ce qui lie notre code JavaScript à l’interface HTML.

Étape 4 : Ajouter l’interactivité avec JavaScript

Il ne nous reste plus qu’à faire fonctionner le bouton. Ouvrez popup.js et ajoutez ce code. Il va simplement afficher une alerte lorsque l’utilisateur clique sur le bouton.

document.addEventListener('DOMContentLoaded', function() {
  var monBouton = document.getElementById('monBouton');
  
  monBouton.addEventListener('click', function() {
    alert('Bravo, votre première extension fonctionne !');
  });
});

Ce code JavaScript est très simple : il attend que le contenu de la page HTML soit chargé, puis il sélectionne notre bouton par son ID et lui attache un écouteur d’événement. Au clic, une alerte s’affiche.

Étape 5 : Charger et tester votre extension

Tout est prêt ! Il est temps de voir le résultat. Enregistrez bien tous vos fichiers et suivez ces instructions :

  1. Retournez sur la page de gestion des extensions de Chrome (chrome://extensions).
  2. Vérifiez que le Mode développeur est toujours activé.
  3. Cliquez sur le bouton « Charger l’extension non empaquetée » qui est apparu en haut à gauche.
  4. Une fenêtre s’ouvre. Naviguez jusqu’à votre dossier ma-premiere-extension et sélectionnez-le.

Si tout s’est bien passé, votre extension « Ma Première Extension » devrait apparaître dans la liste. Une nouvelle icône a dû aussi s’ajouter à la barre d’outils de votre navigateur. Cliquez dessus : la popup « Salut ! » s’ouvre. Cliquez sur le bouton : l’alerte s’affiche. Félicitations, vous venez de créer une extension Chrome !

Aller Plus Loin : Concepts Clés des Extensions Chrome

Maintenant que vous avez les bases, vous pouvez explorer des concepts plus avancés pour créer des extensions plus puissantes. Voici deux notions fondamentales à connaître.

Les Permissions : Demander l’accès aux fonctionnalités

Par défaut, une extension est très limitée pour des raisons de sécurité. Elle ne peut pas lire le contenu d’un onglet, accéder à votre historique ou modifier une page web. Pour faire ça, vous devez explicitement demander des « permissions » dans le fichier manifest.json.

Par exemple, pour interagir avec les onglets du navigateur (les ouvrir, les fermer, lire leur URL), vous devez ajouter la permission "tabs" à votre manifeste. Chaque fonctionnalité avancée (stockage local, notifications, etc.) nécessite une permission spécifique. Consultez la liste complète des permissions disponibles pour voir tout ce que vous pouvez faire.

Background Scripts vs Content Scripts

Pour l’instant, notre code JavaScript ne s’exécute que lorsque la popup est ouverte. Mais que faire si vous voulez que votre extension travaille en arrière-plan, même quand la popup est fermée ?

C’est là qu’interviennent deux types de scripts différents :

  • Background Scripts (Service Workers) : C’est le cerveau de votre extension qui tourne en permanence en arrière-plan. Il gère les événements à long terme, comme écouter un changement d’onglet ou recevoir une notification push.
  • Scripts de contenu (Content Scripts) : Ce sont des fichiers JavaScript que votre extension injecte directement dans les pages web que l’utilisateur visite. Ils permettent de lire ou de modifier le contenu HTML d’une page, par exemple pour remplir automatiquement un formulaire ou surligner des mots.

La distinction entre ces deux types de scripts est essentielle pour développer des extensions Chrome complexes. Les scripts contenu agissent sur la page web, tandis que les scripts d’arrière-plan gèrent la logique globale de l’extension.

FAQ – Questions Fréquentes sur le Développement d’Extensions Chrome

Pour finir, voici les réponses à quelques questions que beaucoup de débutants se posent.

Dois-je utiliser Manifest V2 ou V3 ?

Vous devez obligatoirement utiliser le Manifest V3. Le Manifest V2 est obsolète. Google a déjà commencé à le désactiver et toutes les nouvelles extensions soumises au Chrome Web Store doivent utiliser la V3. Ne perdez pas de temps à apprendre l’ancienne version.

Comment puis-je déboguer mon extension ?

Le débogage est simple. Pour la popup, faites un clic droit sur l’icône de votre extension et choisissez « Inspecter la popup ». Cela ouvrira les outils de développement Chrome, comme pour une page web classique. Pour les scripts d’arrière-plan, vous trouverez un lien « Inspecter les vues » sur la page chrome://extensions, juste à côté de votre extension.

Est-ce payant de publier une extension sur le Chrome Web Store ?

Oui, mais le coût est minime. Google demande des frais d’inscription uniques de 5$ pour pouvoir créer un compte développeur. Une fois payés, vous pouvez publier jusqu’à 20 extensions. Ce paiement sert surtout à vérifier votre identité et à réduire le nombre d’extensions malveillantes.

Partager : X / Twitter LinkedIn

Articles similaires