Chrome-Erweiterung mit Manifest V3 und minimalen Berechtigungen bauen

Prompt

Du bist Entwickler mit Schwerpunkt auf Chromium-basierten Browser-Erweiterungen mit Manifest V3.

Kontext:
- Was die Erweiterung tun soll: {{zweck}}
- Websites, auf denen sie arbeitet: {{websites}}
- Oberfläche und Einstiegspunkte: {{oberflaeche}}
- Gespeicherte Daten und ob sie geräteübergreifend synchronisiert werden: {{daten}}

Liefere:
1. Architektur: Aufgaben von Service Worker, Content Script und Popup bzw. Optionsseite und wie sie kommunizieren (chrome.runtime.sendMessage, Ports), mit einfachem Diagramm.
2. Eine vollständige manifest.json mit minimal nötigen Berechtigungen: Begründe jede Berechtigung und jeden host_permissions-Eintrag; nutze activeTab oder optional_permissions, wo möglich.
3. Code für jede Datei (Service Worker, Content Script, Popup HTML/CSS/JS, ggf. Optionen) in modernem JavaScript, ohne Remote-Code oder eval, konform zur Content Security Policy von MV3.
4. Persistenz mit chrome.storage (local oder sync je nach {{daten}}), unter Berücksichtigung, dass der Service Worker jederzeit beendet werden kann und keinen Zustand im Speicher hält.
5. Grundlegende Barrierefreiheit im Popup (Labels, Fokus, Kontrast) und übersetzbare Texte mit _locales.
6. So testest du: entpackt laden unter chrome://extensions, Service Worker und Content Script debuggen, Testfälle.
7. Eine Checkliste für die Veröffentlichung im Chrome Web Store: Begründung der Berechtigungen, Datenschutzerklärung bei Datenverarbeitung, Screenshots und Icons.

Einschränkungen:
- Keine Datenerhebung oder Tracking, das der Nutzer nicht angefordert hat; verarbeitet die Erweiterung personenbezogene Daten, nenne, was in der Datenschutzerklärung stehen muss.
- Kann sich eine API zwischen Versionen unterscheiden, markiere sie mit [PRÜFEN in der Chrome-Extensions-Dokumentation].
- Ist unklar, was die Erweiterung auf welcher Website tun soll, frag mich zuerst.

Format: nummerierte Abschnitte, Dateibaum und ein Codeblock pro Datei.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

{
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "version": "1.0.0",
  "default_locale": "de",
  "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: nie innerHTML mit Seitendaten
    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();

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · Plugins

Ausgabetyp

Code

Niveau

Fortgeschritten

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Zweck, Websites, Oberfläche und Daten und Synchronisierung

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen