Comment développer une extension chrome : Tuto pour créer

Comment créer une extension Chrome ? Tutoriel pour développer votre extension navigateur

Points clésDétails pratiques

Prérequis techniques accessiblesMaîtriser JavaScript, HTML et CSS suffit pour démarrer le développement

Structure de base indispensableCréer un dossier avec manifest.json, fichiers HTML, CSS, JS et icônes

Test en mode développeurActiver le mode développeur dans Chrome pour charger l’extension non empaquetée

Architecture des scriptsUtiliser scripts popup, background et content selon les besoins fonctionnels

Publication sur le Chrome Web StoreCompte développeur à 5 dollars, validation en quelques heures généralement

Vous avez une idée géniale pour personnaliser votre navigateur et vous vous demandez comment créer une extension Chrome ? Je vais vous guider pas à pas dans cette aventure qui, je vous l’assure, est bien moins compliquée qu’elle n’y paraît. Après plus de vingt ans à bricoler du code, j’ai appris que développer une extension navigateur ressemble finalement à assembler des briques Lego : chaque élément a sa place, et une fois qu’on a compris la logique, tout s’emboîte naturellement.

Contrairement aux idées reçues, vous n’avez pas besoin d’être un génie de l’informatique pour vous lancer. Si vous maîtrisez un minimum de JavaScript, HTML et CSS, vous avez déjà tout ce qu’il faut dans votre boîte à outils. D’ailleurs, c’est exactement ce qui rend le développement d’extensions si accessible : on utilise les mêmes langages que pour créer des sites web classiques. Je me souviens encore de ma première extension, créée pour bloquer les pubs trop envahissantes. Mon fils pensait que j’étais devenu un magicien du web (bon, il était petit à l’époque).

Les fondations de votre extension

Pour commencer votre projet, vous devez créer un dossier contenant quatre fichiers essentiels. C’est un peu comme préparer les ingrédients avant de cuisiner : mieux vaut tout avoir sous la main avant de se lancer. Le premier fichier, et sans doute remarquablement le plus important, est le manifest.json. Ce fichier sert de carte d’identité à votre extension et contient toutes les informations de configuration.

Dans ce fichier manifest.json, vous devez renseigner plusieurs paramètres obligatoires : le nom de votre extension, sa description, son numéro de version (commencez par 1.0), et surtout la version du manifest (toujours 2 pour le moment). Pensez aussi à spécifier les permissions dont votre extension aura besoin. Par défaut, une extension Chrome fonctionne dans un environnement totalement isolé, un peu comme un château fort avec le pont-levis relevé. Si vous voulez qu’elle interagisse avec les onglets ou affiche des notifications, il faut explicitement demander ces autorisations.

Ensuite viennent les fichiers HTML, CSS et JavaScript qui donneront vie à votre extension. Le fichier HTML définira l’interface utilisateur de la popup, celle qui s’affiche quand on clique sur l’icône de l’extension dans la barre d’outils. Le CSS s’occupera de l’habillage visuel, et le JavaScript gérera toute la logique et les interactions. N’oubliez pas non plus de créer une icône pour votre extension, idéalement en plusieurs tailles (16×16, 48×48 et 128×128 pixels).

Voici les éléments à inclure dans votre dossier de développement :

• manifest.json pour la configuration principale
• popup.html pour l’interface utilisateur
• popup.css pour les styles visuels
• popup.js pour la logique applicative
• icon.png dans différentes résolutions

Charger et tester son extension en développement

Une fois vos fichiers créés, il est temps de tester votre extension. Pour cela, vous devez activer le mode développeur dans Chrome. Rendez-vous dans les paramètres du navigateur, puis dans « Plus d’outils » et « Extensions ». En haut à droite, vous verrez un interrupteur pour activer ce mode développeur. C’est comme déverrouiller une porte secrète qui donne accès à des fonctionnalités cachées.

Cliquez ensuite sur le bouton « Charger l’extension non empaquetée » et sélectionnez le dossier contenant vos fichiers. Chrome va automatiquement empaqueter votre extension et l’ajouter à votre navigateur. Vous devriez voir apparaître votre icône dans la barre d’outils. Si vous rencontrez des erreurs, Chrome vous les signalera gentiment en rouge sur la page des extensions. C’est plutôt pratique, même si parfois les messages d’erreur ressemblent à du charabia (on a tous connu ça).

À chaque modification de votre code, vous devrez recharger l’extension depuis la page chrome ://extensions/. Il suffit de cliquer sur le petit bouton de rechargement circulaire à côté de votre extension. C’est un peu fastidieux au début, mais vous vous y habituerez vite. Pour déboguer, utilisez les outils de développement de Chrome : faites un clic droit sur la popup et sélectionnez « Inspecter ». Vous aurez accès à la console JavaScript, indispensable pour traquer les bugs. D’ailleurs, si vous travaillez sous Linux, vous connaissez peut-être les navigateurs internet disponibles sur Linux, qui proposent des fonctionnalités similaires.

Gérer les scripts et la communication

Il existe différentes manières de charger du JavaScript dans une extension Chrome, et chacune a son utilité spécifique. Le script de la popup s’exécute uniquement quand l’utilisateur ouvre la popup. C’est parfait pour gérer les interactions utilisateur comme les clics sur des boutons. Mais attention, ce script ne reste pas actif en permanence : dès que la popup se ferme, tout s’arrête.

Pour avoir du code qui tourne en continu, vous aurez besoin d’un script background. Celui-ci reste actif en arrière-plan du navigateur, même quand la popup est fermée. Il peut surveiller des événements, coordonner les actions entre différents onglets, ou faire des vérifications périodiques. Par exemple, pour une extension qui surveille si un streamer Twitch est en ligne, le script background pourrait interroger l’API Twitch toutes les minutes avec un système de setTimeout récursif.

Il existe aussi les content scripts, qui s’injectent directement dans les pages web que vous visitez. Ces scripts ont accès au DOM de la page et peuvent modifier son contenu, mais ils fonctionnent de manière isolée. Ils ne peuvent pas accéder aux variables JavaScript de la page originale, ni aux APIs chrome.* réservées aux scripts background. À la manière d’un espion infiltré qui peut observer et agir, mais qui ne peut pas communiquer directement avec le quartier général.

La communication entre ces différents composants se fait via un système de messages. Le script de la popup peut envoyer un message au script background avec chrome.runtime.sendMessage, et le background écoute ces messages avec chrome.runtime.onMessage.addListener. C’est comme un système de talkie-walkie interne à votre extension. Cette architecture peut sembler complexe au début, mais elle garantit la sécurité et la stabilité de votre extension.

Type de scriptMoment d’exécutionAccès au DOMAccès aux APIs Chrome

Script popupOuverture de la popupOui (popup uniquement)Oui

Script backgroundEn permanenceNonOui

Content scriptChargement de pageOui (page web)Non

Publier et distribuer votre création

Une fois votre extension finalisée et testée, vous voudrez probablement la partager avec le monde entier. Pour cela, direction le Chrome Web Store, la boutique officielle des extensions Chrome. Vous devrez d’abord créer un compte développeur sur le tableau de bord Google, ce qui nécessite un paiement unique de 5 dollars américains. C’est une sorte de droit d’entrée pour valider votre compte et prouver que vous êtes sérieux.

Préparez ensuite votre dossier pour la publication. Compressez l’intégralité de votre dossier d’extension au format ZIP, en vous assurant que le fichier manifest.json se trouve bien à la racine de l’archive. Téléchargez ce fichier ZIP sur le tableau de bord, puis remplissez les informations requises : description détaillée, captures d’écran, icônes promotionnelles, catégorie, politique de confidentialité si vous collectez des données.

Le processus de validation prend généralement quelques minutes à quelques heures si votre extension ne demande pas de permissions sensibles. Si elle nécessite l’accès à des données utilisateur ou à des sites spécifiques, une révision manuelle par les équipes de Google peut être nécessaire et prendre plus de temps. Une fois validée, votre extension sera disponible publiquement et les utilisateurs pourront l’installer en un clic. Si vous souhaitez toucher plusieurs navigateurs, sachez que Firefox, Opera et Edge utilisent aussi l’API WebExtensions, ce qui facilite le portage. Par contre, chaque plateforme a ses spécificités, un peu comme installer Linux sur différentes machines : les principes restent les mêmes, mais les détails varient.

Voilà, vous avez maintenant toutes les cartes en main pour créer votre propre extension Chrome ! N’hésitez pas à commencer petit, avec une extension simple, avant de vous lancer dans des projets plus ambitieux. Et rappelez-vous que même les développeurs les plus expérimentés ont commencé par des extensions basiques. L’important, c’est de se lancer et d’apprendre en faisant. Qui sait, peut-être que votre extension deviendra indispensable à des millions d’utilisateurs, ou au minimum impressionnera votre famille lors du prochain repas dominical. Après tout, créer quelque chose qui facilite la navigation sur le web, c’est un peu comme améliorer le fonctionnement d’un moteur de recherche à votre échelle : vous participez à rendre Internet plus agréable pour tous.

L’article Comment développer une extension chrome : Tuto pour créer est apparu en premier sur Croc Informatique - Partageons nos Connaissances.