Développer une extension Chrome avec Manifest V3 : fichiers, contextes et test local

Développer une extension Chrome est accessible avec les bases du Web : HTML pour l’interface, CSS pour la présentation, JavaScript pour les interactions et JSON pour la configuration. Pour commencer, créez un outil simple qui ouvre une fenêtre au clic sur son icône, puis chargez-le localement dans Chrome.

Partir d’un dossier minimal et d’un manifeste Manifest V3

Une extension Chrome est un dossier local dont le point d’entrée est obligatoirement le fichier manifest.json, placé à la racine. Ce fichier décrit le projet, les composants à charger et les autorisations demandées. Utilisez Manifest V3, le format actuel, plutôt que des exemples plus anciens fondés sur Manifest V2.

Créez un dossier nommé ma-premiere-extension, puis ajoutez les fichiers suivants :

• manifest.json : la configuration centrale de l’extension ;
• popup.html : l’interface affichée après un clic sur l’icône ;
• popup.js : le comportement de cette interface ;
• popup.css : la mise en forme, si nécessaire ;
• service-worker.js : la logique exécutée en arrière-plan ;
• un dossier icons contenant notamment une icône de 128 × 128 pixels.

Un manifest.json fonctionnel pour démarrer

Pour une extension qui affiche une pop-up, le manifeste peut contenir les propriétés suivantes : { « manifest_version »: 3, « name »: « Mon outil Chrome », « version »: « 1.0 », « description »: « Une première extension », « action »: { « default_popup »: « popup.html » }, « background »: { « service_worker »: « service-worker.js » }, « icons »: { « 128 »: « icons/icon-128.png » } }.

Respectez la syntaxe JSON : utilisez des guillemets doubles autour des clés et des valeurs textuelles, séparez les propriétés par des virgules et n’en placez jamais après la dernière. Une erreur de syntaxe ou un mauvais chemin de fichier empêche Chrome de charger l’extension. Un validateur JSON peut vous aider à repérer le problème avant le test.

Choisir le bon contexte JavaScript plutôt que tout mettre dans la pop-up

Une extension Chrome ne fonctionne pas comme une page Web unique. Son code est réparti entre plusieurs contextes, chacun avec une responsabilité précise. Cette séparation limite le code exécuté inutilement et facilite les évolutions du projet.

La pop-up : une interface Web compacte

Le fichier popup.html est une page HTML classique. Il peut contenir un bouton, un champ ou un résultat. Par exemple, un bouton portant l’identifiant highlight peut déclencher une action définie dans popup.js. Liez ce script en fin de page avec une balise script qui pointe vers le fichier JavaScript local.

La pop-up convient pour recueillir une action claire de l’utilisateur, mais elle se ferme dès qu’il clique ailleurs. Elle ne doit donc pas porter une logique qui doit continuer après sa fermeture.

Content script et service worker : la passerelle indispensable

Un content script est injecté sur les pages qui correspondent aux motifs d’URL déclarés dans le manifeste. Il peut parcourir le DOM, ajouter une classe CSS ou récupérer un texte sélectionné. Son environnement est isolé et il n’a pas directement accès à toutes les API chrome.*. Pour demander une opération au navigateur, il envoie un message au service worker via l’API chrome.runtime. Le service worker peut alors répondre ou exécuter l’action demandée.

Le service worker coordonne les événements, le stockage, les onglets et les demandes transmises par le content script. Il ne dessine pas l’interface et ne manipule pas directement la page. Cette séparation limite les dépendances entre les composants. Vous pouvez ainsi remplacer une pop-up par une page d’options sans réécrire le mécanisme qui traite les messages.

Déclarer uniquement les permissions réellement utiles

Les permissions indiquent à Chrome et à l’utilisateur quels accès l’extension réclame. Chaque permission doit correspondre à une fonctionnalité identifiable. Une extension qui affiche uniquement une interface n’a pas besoin d’accéder aux onglets ni à toutes les pages Web.

Deux familles sont courantes. Les permissions d’API, comme tabs, storage ou notifications, donnent accès à des capacités du navigateur. Les motifs d’URL, aussi appelés host permissions, autorisent une intervention sur certains sites. Si votre outil fonctionne sur un seul domaine, choisissez un motif ciblé plutôt qu’un accès général à toutes les URL.

• storage : mémoriser un réglage ou une préférence utilisateur ;
• notifications : afficher une notification Chrome lorsqu’elle apporte une information utile ;
• tabs : obtenir les informations nécessaires sur l’onglet actif ;
• host permissions : injecter un content script sur les pages autorisées.

Appliquez le principe du moindre privilège : demandez uniquement les accès nécessaires au fonctionnement de l’extension. Des permissions excessives compliquent son acceptation, réduisent la confiance des utilisateurs et augmentent votre responsabilité en matière de confidentialité. Lorsqu’un accès n’est nécessaire que dans un cas ponctuel, envisagez une permission optionnelle plutôt qu’une demande permanente.

Charger, tester et déboguer l’extension dans Chrome

Ouvrez chrome://extensions/ dans Chrome, activez le mode développeur, puis cliquez sur Charger l’extension non empaquetée. Sélectionnez le dossier qui contient le fichier manifest.json, et non un fichier isolé. Chrome ajoute alors l’extension à la liste locale. Épinglez son icône si vous souhaitez accéder plus rapidement à la pop-up.

Recharger après chaque modification

Après avoir modifié le manifeste, un content script ou le service worker, cliquez sur le bouton de rechargement de la fiche de l’extension. Rafraîchissez également la page Web ciblée pour que le content script soit injecté de nouveau.

Commencez par un scénario simple et observable : cliquez sur l’icône, ouvrez la pop-up, cliquez sur son bouton, vérifiez la réception du message, puis contrôlez la modification attendue dans la page. Cette progression permet de localiser plus facilement une erreur dans l’interface, la communication ou le script injecté.

Lire les journaux au bon endroit

Une erreur de manifeste apparaît sur la page des extensions. Pour le service worker, ouvrez son lien d’inspection depuis la fiche de l’extension afin d’accéder aux outils de développement et à la console. Pour la pop-up, ouvrez son outil d’inspection lorsqu’elle est affichée. Les erreurs du content script sont visibles dans les outils de développement de la page concernée.

Chaque contexte dispose donc de sa propre console. Cette distinction évite de chercher un message d’erreur dans le mauvais emplacement et facilite le diagnostic des problèmes de chargement, de communication ou d’exécution.

Préparer une publication propre dans le Chrome Web Store

Avant de publier, vérifiez que la version du manifeste est cohérente, que les chemins vers les fichiers et les icônes sont valides et que chaque permission est justifiée par une fonction visible. Testez aussi une installation neuve pour vous assurer que l’extension ne dépend pas d’un réglage local oublié.

Lorsque le projet est prêt, compressez le dossier pour préparer son envoi dans le Chrome Web Store. Contrôlez une dernière fois l’arborescence, le fichier manifest.json, les ressources utilisées et le comportement de la pop-up après une installation propre.

Le niveau de diffusion doit correspondre à votre objectif. Une extension peut être publique, non répertoriée, privée ou publiée par groupe. La visibilité non répertoriée convient à une diffusion contrôlée par lien. Les options privées ou par groupe répondent davantage à un usage interne. Pour les exigences techniques et les évolutions de la plateforme, consultez régulièrement la documentation officielle Chrome Extensions.

• À propos
• Articles récents

Élise Prévost-Lemercier

Ingénieure logicielle passionnée par la cybersécurité et la transmission du savoir, je partage ici mes découvertes et conseils pour rendre le code accessible à tous.

Les derniers articles par Élise Prévost-Lemercier (tout voir)

• Développer une extension Chrome avec Manifest V3 : fichiers, contextes et test local - 14 septembre 2026
• Logiciel de gestion des correctifs en entreprise : automatiser sans perdre le contrôle - 13 septembre 2026
• Software middleware : la couche qui simplifie l’intégration des systèmes - 12 septembre 2026

Articles qui pourraient vous intéresser :

QPainter ou Graphics View : deux façons de dessiner avec Qt, deux usages différents Graphisme Python : matplotlib pour les courbes, Tkinter pour les fenêtres, Qt pour aller plus loin Plateformes IoT cloud, open source ou industrielles : le bon choix selon le projet Site mobile illisible, lent ou cassé ? Tester, inspecter et auditer en ligne