Créer une extension Chrome avec Manifest V3 et des permissions minimales

Prompt

Agis comme développeur spécialisé dans les extensions de navigateur basées sur Chromium avec Manifest V3.

Contexte :
- Ce que doit faire l'extension : {{objectif}}
- Sites concernés : {{sites}}
- Interface et points d'entrée : {{interface}}
- Données stockées et synchronisation entre appareils ou non : {{donnees}}

Livrables :
1. Architecture : rôle du service worker, du content script et du popup ou de la page d'options, et leur communication (chrome.runtime.sendMessage, ports), avec un schéma simple.
2. Un manifest.json complet avec les permissions minimales : justifie chaque permission et chaque host_permissions ; utilise activeTab ou optional_permissions quand c'est possible.
3. Le code de chaque fichier (service worker, content script, popup HTML/CSS/JS, options si besoin) en JavaScript moderne, sans code distant ni eval, conforme à la politique de sécurité du contenu de MV3.
4. La persistance avec chrome.storage (local ou sync selon {{donnees}}), en tenant compte du fait que le service worker peut s'arrêter à tout moment et ne garde aucun état en mémoire.
5. L'accessibilité de base du popup (libellés, focus, contraste) et des textes prêts à traduire avec _locales.
6. Comment la tester : chargement non empaqueté dans chrome://extensions, débogage du service worker et du content script, cas de test.
7. Une checklist de publication sur le Chrome Web Store : justification des permissions, politique de confidentialité si des données sont traitées, captures et icônes.

Contraintes :
- Aucune collecte de données ni pistage non demandé par l'utilisateur ; si l'extension traite des données personnelles, précise ce qu'il faut déclarer dans la politique de confidentialité.
- Si une API peut varier selon les versions, indique [À VÉRIFIER dans la documentation Chrome Extensions].
- Si le comportement attendu sur chaque site n'est pas clair, pose-moi la question d'abord.

Format : sections numérotées, arborescence des fichiers et un bloc de code par fichier.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

{
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "version": "1.0.0",
  "default_locale": "fr",
  "action": { "default_popup": "popup.html", "default_title": "__MSG_saveTitle__" },
  "permissions": ["activeTab", "storage"]
}

const list = document.querySelector('#list');

async function render() {
  const { links = [] } = await chrome.storage.sync.get('links');
  list.replaceChildren(...links.map(({ title, url }) => {
    const a = Object.assign(document.createElement('a'), { href: url, textContent: title, target: '_blank' });
    const li = document.createElement('li');
    li.append(a);                          // textContent : jamais d'innerHTML avec des données de page
    return li;
  }));
}

document.querySelector('#save').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.url) return;
  const { links = [] } = await chrome.storage.sync.get('links');
  if (!links.some((l) => l.url === tab.url)) {
    links.unshift({ title: tab.title || tab.url, url: tab.url, savedAt: Date.now() });
    await chrome.storage.sync.set({ links });
  }
  render();
});

render();

Informations clés

Catégorie

Programmation et développement · Plugins

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Objectif, Sites, Interface et Données et synchronisation

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes