option

Créez et publiez des extensions Chrome en suivant les meilleures pratiques de Manifest V3. Utilisez cette compétence chaque fois qu’un utilisateur souhaite créer, modifier, déboguer ou comprendre des extensions du navigateur Chrome, des add-ons, ou tout élément lié à l’API des extensions Chrome. Cela s’applique aux mentions de : ‘extension Chrome’, ‘extension navigateur’, ‘manifest.json’, ‘content script’, ‘service worker’ (dans le contexte du navigateur), ‘popup’ (dans le contexte d’une extension Chrome), ‘side panel’, ‘chrome.* API’, ‘declarativeNetRequest’, ‘omnibox’, ‘context menu’ (dans les extensions).

...Développer tout
10
Heure mise à jour 26 août 2026

À propos des extensions Chrome

Guides pour créer des extensions Chrome de qualité professionnelle utilisant Manifest V3 et les publier sur le Chrome Web Store. Ce guide est utile chaque fois qu’il s’agit de créer, modifier, déboguer ou comprendre les extensions du navigateur Chrome ainsi que ses APIs chrome.*, y compris les scripts de contenu, les service workers, les fenêtres contextuelles, les panneaux latéraux, les déclarations NetRequest, l’omnibox, les menus contextuels et les scripts utilisateur, ainsi que les tâches de publication sur le Web Store comme les justifications de permissions et les politiques de confidentialité.

La première partie est organisée en un ensemble de règles obligatoires visant à résoudre les causes les plus fréquentes d’extensions défectueuses. Parmi les exemples : ne faire référence qu’à des fichiers d’icônes réellement existants (ou omettre complètement les icônes), fournir un déclencheur explicite pour ouvrir un panneau latéral (un simple default_path ne suffit pas à l’ouvrir), exécuter du code uniquement à l’intérieur d’iframes sandboxés car le CSP de l’extension bloque eval et les scripts en ligne, déclarer la permission relative aux onglets avant d’accéder à tab.url, utiliser systématiquement async/await au lieu de chaînes .then(), regrouper les opérations DOM dans les scripts de contenu pour éviter de bloquer le thread principal, et ne jamais stocker d’état dans des variables de service worker car ces derniers sont éphémères (préférer chrome.storage et utiliser chrome.alarms à la place de setTimeout). D’autres règles visent à stabiliser l’ID de l’extension pour l’authentification chrome.identity OAuth via une clé manifest, à fournir des retours aux utilisateurs après les actions dans les menus contextuels, à utiliser LanguageModel (Prompt API) dans les service workers, les fenêtres contextuelles et les panneaux latéraux, ainsi qu’à exiger une clé d’action dans le manifest avant d’utiliser chrome.action.

Utilisez ce guide lorsque vous souhaitez des extensions qui fonctionnent dès la première utilisation et réussissent les vérifications, plutôt que de déboguer des problèmes subtils liés à Manifest V3. Chaque règle oppose du code défectueux à du code correct et renvoie vers un fichier de référence plus détaillé (pour les icônes, les panneaux latéraux, le sandbox CSP, la gestion des onglets, les scripts de contenu, les service workers, l’authentification, les menus contextuels et la Prompt API). Une deuxième partie aborde la publication sur le Chrome Web Store, y compris la préparation de l’extension, la réponse aux rejets de vérification, la rédaction des justifications de permissions et l’élaboration d’une politique de confidentialité, ce qui en fait un outil utile tout au long du cycle de vie, de la première création à la mise en ligne sur le store.

FAQ

Quand faut-il utiliser cette compétence ?

Chaque fois qu’il s’agit de créer, modifier, déboguer ou comprendre les extensions Chrome et leurs APIs, ou encore lors de la publication sur le Chrome Web Store, y compris pour les justifications de permissions et les politiques de confidentialité.

Pourquoi mon panneau latéral ne s’ouvre-t-il pas malgré sa définition dans le manifest ?

Définir side_panel.default_path ne suffit pas à l’ouvrir ; il faut ajouter un déclencheur comme chrome.sidePanel.open() lors d’un clic sur une action ou sur un bouton dans une fenêtre contextuelle, ou bien définir openPanelOnActionClick.

Pourquoi l’état de mon extension est-il perdu ?

Les service workers sont éphémères et se terminent après environ 30 secondes d’inactivité, ce qui entraîne la perte de l’état stocké dans des variables ; il faut donc le conserver dans chrome.storage et le lire à chaque événement, en utilisant chrome.alarms plutôt que setTimeout/setInterval.

Comment puis-je exécuter du code dynamique compte tenu du CSP de l’extension ?

Le CSP de l’extension bloque eval, new Function et les scripts en ligne ; il est donc possible d’exécuter du code uniquement à l’intérieur d’iframes sandboxés (grâce au sandbox manifest et à postMessage), ou via une URL Blob ou un srcdoc créant une origine distincte.

Couvre-t-il la Prompt API ?

Oui. La LanguageModel API fonctionne dans les service workers, les fenêtres contextuelles et les panneaux latéraux sans nécessiter de permissions supplémentaires, et les extensions disposent également de LanguageModel.params(), qui n’est pas disponible sur le web.

Tous les fichiers

23 fichiersreferences/extensions/context-menus.md1,8 KBAfficherreferences/extensions/auth-identity.md3,9 KBAfficherreferences/extensions/declarative-net-request.md2,7 KBAfficherreferences/extensions/message-passing.md4,1 KBAfficherreferences/extensions/api-calling.md2,1 KBAfficherreferences/extensions/csp-sandbox.md4,7 KBAfficherreferences/extensions/media-capture.md4,7 KBAfficherreferences/extensions/prompt-api.md3,7 KBAfficherreferences/extensions/tab-management.md3,7 KBAfficherSKILL.md25,5 KBAfficherreferences/extensions/content-scripts.md3,4 KBAfficherreferences/extensions/devtools.md2,8 KBAfficherreferences/extensions/omnibox.md1,8 KBAfficherreferences/extensions/side-panel.md4,4 KBAfficherreferences/webstore/chromewebstore-template.md5,6 KBAfficherreferences/webstore/review-checklist.md6,8 KBAfficherreferences/extensions/icons.md2,7 KBAfficherreferences/extensions/popup-ui.md2,3 KBAfficherreferences/extensions/storage.md1,9 KBAfficherreferences/webstore/store-listing.md7,8 KBAfficherreferences/extensions/service-worker.md4,5 KBAfficherreferences/extensions/user-scripts.md9,1 KBAfficherreferences/webstore/privacy-policy.md4,1 KBAfficher

Installer chrome-extensions

Téléchargez et extrayez les fichiers de compétences dans votre répertoire .claude/skills/.

Télécharger le ZIP

Clonez le dépôt et copiez les fichiers de compétence dans votre projet.

git clone # Copy SKILL.md to your .claude/skills/ directory

Copier Copier
Configuration rapide: Copiez le dossier de la compétence dans .claude/skills/Claude détectera automatiquement cette compétence et l’utilisera.

Compétences similaires

playwright-cli
Heure mise à jour 29 juin 2026
frontend-testing-best-practices
Heure mise à jour 7 juillet 2026
Playwright Browser Automation
Heure mise à jour 29 juin 2026
playwright-generate-test
Heure mise à jour 29 juin 2026
OR