Créer une extension Chrome en 1 heure

Tu utilises des extensions Chrome tous les jours. Un bloqueur de pubs, un gestionnaire de mots de passe, un outil qui change le thème de certains sites...

Mais as-tu déjà pensé à créer la tienne ?

"C'est sûrement compliqué", tu te dis. Et avant, tu aurais eu raison. Mais avec Claude Code, tu peux créer une extension fonctionnelle en un week-end, même si tu n'as jamais codé d'extension de ta vie.

Je te montre comment. On va créer ensemble une extension concrète, étape par étape.

C'est Quoi Exactement Une Extension Chrome ?

Avant de coder, comprenons ce qu'on fait.

Une extension Chrome est un petit programme qui s'installe dans ton navigateur Google Chrome (ou les navigateurs basés sur Chromium comme Brave, Edge, ou Opera). Elle peut :

• Modifier l'apparence des sites : changer les couleurs, cacher des éléments
• Ajouter des fonctionnalités : boutons, raccourcis, automatisations
• Interagir avec les pages : extraire des infos, remplir des formulaires
• Afficher des notifications : alertes, rappels
• Stocker des données : préférences, historique

Quelques exemples d'extensions populaires :

• uBlock Origin : bloque les pubs
• Bitwarden : gère les mots de passe
• Grammarly : corrige l'orthographe
• Dark Reader : met les sites en mode sombre

Et tu vas en créer une toi-même.

Le Projet : Un Compteur de Temps Par Site

On va créer une extension qui compte le temps que tu passes sur chaque site web. Pourquoi ce projet ?

1. C'est utile : Tu vas enfin savoir combien de temps tu perds sur Twitter ou YouTube
2. C'est simple : Pas besoin de backend ou de base de données complexe
3. Ça t'apprend les bases : Structure d'une extension, stockage, UI
4. C'est gratifiant : Tu auras un résultat visible rapidement

Étape 1 : Demande à Claude de Créer la Structure

Ouvre ton terminal (sur Mac, cherche "Terminal" dans Spotlight. Sur Windows, cherche "PowerShell"). Navigue vers le dossier où tu veux créer ton projet :

cd ~/projets
mkdir time-tracker-extension
cd time-tracker-extension
claude

Maintenant, demande à Claude de créer la structure de base :

Claude va créer plusieurs fichiers. Voici ce que chacun fait :

manifest.json : La carte d'identité de l'extension

C'est le fichier le plus important. Il dit à Chrome :

• Le nom de ton extension
• Ce qu'elle a le droit de faire (permissions)
• Quels fichiers elle utilise
• Quelle icône afficher

{
  "manifest_version": 3,
  "name": "Time Tracker",
  "version": "1.0",
  "description": "Comptez le temps passé sur chaque site",
  "permissions": ["storage", "tabs", "alarms"],
  ...
}

popup.html et popup.js : Ce que tu vois quand tu cliques sur l'icône

Le "popup", c'est la petite fenêtre qui s'ouvre quand tu cliques sur l'icône de l'extension. C'est là qu'on affichera la liste des sites et le temps passé.

background.js (ou service-worker.js) : Le cerveau invisible

Ce script tourne en arrière-plan, même quand le popup est fermé. C'est lui qui :

• Détecte quand tu changes de site
• Compte le temps
• Sauvegarde les données

Étape 2 : Comprendre Ce Que Claude a Créé

Ne te contente pas d'avoir du code qui marche. Demande des explications :

Voici les concepts clés que tu dois comprendre :

Les permissions

"permissions": ["storage", "tabs", "alarms"]

- storage : permet de sauvegarder des données (le temps passé sur chaque site) - tabs : permet de savoir sur quel site tu es - alarms : permet de déclencher des actions régulières (compter le temps) Chaque permission que tu demandes doit être justifiée. Plus tu en demandes, plus les utilisateurs seront méfiants.

Le service worker (background.js)

Dans les anciennes extensions (Manifest V2), le background script tournait en permanence. Dans Manifest V3 (la version actuelle obligatoire), c'est un "service worker" qui se réveille quand il a quelque chose à faire et se rendort ensuite. C'est plus économe en ressources.

Le stockage

Chrome offre chrome.storage.local pour sauvegarder des données. C'est comme une petite base de données privée pour ton extension.

Étape 3 : Installer l'Extension Pour Tester

Avant d'aller plus loin, testons ce qu'on a. C'est important de voir le résultat rapidement. 1. Ouvre Chrome 2. Tape chrome://extensions/ dans la barre d'adresse 3. Active le "Mode développeur" (interrupteur en haut à droite) 4. Clique sur "Charger l'extension non empaquetée" 5. Sélectionne le dossier de ton extension Et voilà ! Ton extension apparaît dans la barre Chrome. Clique sur l'icône pour voir le popup. Si ça ne marche pas, Claude peut t'aider à debugger :

Étape 4 : Améliorer L'Extension

La version de base fonctionne. Maintenant, rendons-la vraiment utile.

Aller encore plus loin

Étape 5 : Gérer Les Bugs Courants

Les extensions Chrome ont leurs particularités. Voici les problèmes courants et comment les résoudre.

Problème 1 : "Service worker registration failed"

C'est souvent une erreur de syntaxe dans le background.js ou un mauvais chemin dans le manifest.

Problème 2 : Les données ne persistent pas

Le service worker se "réveille" et "s'endort". Si tu stockes des données dans des variables JavaScript normales, elles disparaissent. Utilise chrome.storage.local pour persister.

Problème 3 : Le popup ne se met pas à jour

Le popup est rechargé à chaque ouverture. Si tu veux qu'il montre des données à jour, il doit les récupérer du storage ou communiquer avec le background.

D'Autres Idées d'Extensions à Créer

Si le compteur de temps ne t'inspire pas, voici d'autres projets de difficulté progressive :

Niveau Débutant

Quelques idées :

• Raccourcis texte : Taper "@@" insère automatiquement ton email
• Screenshot rapide : Un bouton pour capturer la page
• Compteur de mots : Affiche le nombre de mots sur la page

Niveau Intermédiaire

• Mode focus : Bloque certains sites pendant X heures
• Notes sur les pages : Ajoute des annotations persistantes à n'importe quel site
• Traducteur de sélection : Traduit le texte sélectionné au survol

Niveau Avancé

• Dashboard de productivité : Combine compteur de temps, blocage, et statistiques
• Extracteur de données : Récupère des infos structurées de certains sites
• Synchronisation multi-devices : Partage les données entre tes appareils

Publier Sur Le Chrome Web Store

Ton extension fonctionne et tu veux la partager ? Voici comment la publier.

Les points essentiels

• Coût : 5$ de frais d'inscription (une seule fois, à vie)
• Compte développeur : Tu dois créer un compte sur le Chrome Web Store Developer Dashboard
• Assets requis : Au moins 2 screenshots, une icône 128x128, une description
• Review : Google examine ton extension (quelques jours à quelques semaines)
• Règles : Respecte les Developer Program Policies

Les Bonnes Pratiques

Avant de publier, assure-toi de respecter ces règles :

1. Permissions minimales

Ne demande que les permissions dont tu as vraiment besoin. "This extension can read and change all your data on all websites" fait fuir les utilisateurs.

2. Politique de confidentialité

Si tu collectes des données (même juste le temps passé sur les sites), tu dois avoir une politique de confidentialité.

3. Manifest V3 obligatoire

Google a rendu Manifest V3 obligatoire. Si tu trouves des tutoriels qui utilisent Manifest V2, ils sont obsolètes.

---

Pour Aller Plus Loin

Créer une extension Chrome, c'est un super projet pour débuter. C'est concret (tu vois le résultat immédiatement), c'est utile (tu résous un vrai problème), et ça t'apprend comment le web fonctionne.

Et surtout, c'est un excellent projet à montrer. "J'ai créé une extension Chrome" impressionne toujours, même si l'extension est simple.

Pour ceux qui veulent aller plus loin : on a créé le Workshop "Bâtir avec l'IA".

Articles connexes pour continuer ton apprentissage :

• Votre première landing page avant ce soir : un autre projet concret pour débutant
• L'écran noir vous fait peur ? Installer Claude Code : si tu as besoin d'aide pour le terminal
• Git pour les nuls : sauvegarder votre travail : indispensable pour versionner tes projets

Ton navigateur, tes règles. Va créer quelque chose.

— Charles