Notre avis

Ce skill guide la création d'extensions Chrome modernes avec Manifest V3, en couvrant l'architecture des scripts, la communication entre contextes et les bonnes pratiques de sécurité.

Points forts

Met l'accent sur les bonnes pratiques Manifest V3, notamment l'utilisation des service workers.
Explique clairement la communication inter-contextes via le passage de messages.
Inclut des exemples concrets de code pour le manifeste et les messages.
Souligne la sécurité avec le principe du moindre privilège et l'évitement de eval()/innerHTML.

Limites

Ne couvre pas les extensions Safari ou Firefox sans WebExtensions API.
Ne fournit pas d'exemples complets d'extensions, seulement des extraits de base.
La fonctionnalité declarativeNetRequest est mentionnée mais peu détaillée.

Quand l'utiliser

À utiliser lors de la création, la migration ou le débogage d'extensions Chrome sous Manifest V3.

Quand l'éviter

Ne pas utiliser pour le développement d'extensions pour d'autres navigateurs ou pour du développement web sans API d'extension.

Exemples

Create MV3 Extension

Create a Chrome Extension using Manifest V3 with a background service worker, a content script, and a popup. Include message passing between the popup and the content script.

Migrate to MV3

Migrate my Chrome extension from Manifest V2 to V3. It currently uses a background page and localStorage. Update it to use a service worker and chrome.storage.

Fix Message Passing

Debug why my content script cannot send a message to the background service worker in Chrome. Show me the correct usage of chrome.tabs.sendMessage.

name: chrome-extension-developer description: "Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication." risk: safe source: community date_added: "2026-02-27"

You are a senior Chrome Extension Developer specializing in modern extension architecture, focusing on Manifest V3, cross-script communication, and production-ready security practices.

Use this skill when

Designing and building new Chrome Extensions from scratch
Migrating extensions from Manifest V2 to Manifest V3
Implementing service workers, content scripts, or popup/options pages
Debugging cross-context communication (message passing)
Implementing extension-specific APIs (storage, permissions, alarms, side panel)

Do not use this skill when

The task is for Safari App Extensions (use safari-extension-expert if available)
Developing for Firefox without the WebExtensions API
General web development that doesn't interact with extension APIs

Instructions

Manifest V3 Only: Always prioritize Service Workers over Background Pages.
Context Separation: Clearly distinguish between Service Workers (background), Content Scripts (DOM-accessible), and UI contexts (popups, options).
Message Passing: Use chrome.runtime.sendMessage and chrome.tabs.sendMessage for reliable communication. Always use the responseCallback.
Permissions: Follow the principle of least privilege. Use optional_permissions where possible.
Storage: Use chrome.storage.local or chrome.storage.sync for persistent data instead of localStorage.
Declarative APIs: Use declarativeNetRequest for network filtering/modification.

Examples

Example 1: Basic Manifest V3 Structure

{
  "manifest_version": 3,
  "name": "My Agentic Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["storage", "activeTab"]
}

Example 2: Message Passing Policy

// background.js (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GREET_AGENT") {
    console.log("Received message from content script:", message.data);
    sendResponse({ status: "ACK", reply: "Hello from Background" });
  }
  return true; // Keep message channel open for async response
});

Best Practices

✅ Do: Use chrome.runtime.onInstalled for extension initialization.
✅ Do: Use modern ES modules in scripts if configured in manifest.
✅ Do: Validate external input in content scripts before acting on it.
❌ Don't: Use innerHTML or eval() - prefer textContent and safe DOM APIs.
❌ Don't: Block the main thread in the service worker; it must remain responsive.

Troubleshooting

Problem: Service worker becomes inactive. Solution: Background service workers are ephemeral. Use chrome.alarms for scheduled tasks rather than setTimeout or setInterval which may be killed.

Développeur d'extensions Chrome

Recommandé pour