Chrome-Extension mit Side Panel und KI erstellen (MV3, 2026)

Ein Side Panel bleibt neben der Seite offen, während du surfst. Ein Popup schließt sich beim ersten Klick daneben. Für einen KI-Helfer passt das Side Panel deshalb gut: Seite zusammenfassen, Auswahl erklären, Fragen stellen. Diese Anleitung baut ein Side Panel mit Manifest V3, öffnet es per Symbol und Rechtsklick und schickt Seitentext an einen KI-Endpunkt deiner Wahl.

Side Panel oder Popup?

Schritt 1: Das Manifest

Das Side Panel braucht die Berechtigung sidePanel und eine Standardseite (chrome.sidePanel-API; ab Chrome 114, nur MV3):

{
  "manifest_version": 3,
  "name": "Mein KI-Side-Panel",
  "version": "0.1.0",
  "action": { "default_title": "Side Panel öffnen" },
  "side_panel": { "default_path": "sidepanel.html" },
  "background": { "service_worker": "background.js" },
  "permissions": ["sidePanel", "activeTab", "scripting", "contextMenus", "storage"]
}

Fordere nur an, was du nutzt. activeTab gibt nach einem Klick Zugriff auf den aktuellen Tab, nicht auf alle Websites.

Schritt 2: Öffnen per Klick aufs Symbol

// background.js
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Schritt 3: Öffnen per Rechtsklick

chrome.sidePanel.open() gibt es ab Chrome 116. Es darf nur als Reaktion auf eine Nutzeraktion laufen, etwa einen Klick im Kontextmenü:

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({ id: "explain", title: "Auswahl erklären", contexts: ["selection"] });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "explain" && tab?.windowId !== undefined) {
    chrome.sidePanel.open({ windowId: tab.windowId });
    chrome.storage.session.set({ pendingSelection: info.selectionText ?? "" });
  }
});

Das Panel liest pendingSelection beim Laden aus chrome.storage.session.

Schritt 4: Seite lesen und KI fragen, erst nach Bestätigung

// sidepanel.js
async function askAboutPage(question) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const [{ result: pageText }] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.body.innerText.slice(0, 20000),
  });

  // Eigene Bestätigung im Panel anzeigen (Dialog oder Button), bevor etwas den Browser verlässt.
  if (!(await userConfirms({ title: tab.title, url: tab.url, chars: pageText.length }))) return;

  const { endpoint, model, apiKey } = await chrome.storage.local.get(["endpoint", "model", "apiKey"]);
  const res = await fetch(`${endpoint}/chat/completions`, {
    method: "POST",
    headers: { "Content-Type": "application/json", ...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {}) },
    body: JSON.stringify({
      model,
      messages: [
        { role: "system", content: "Antworte kurz auf Basis des Seitentexts." },
        { role: "user", content: `${question}\n\nURL: ${tab.url}\n\n${pageText}` },
      ],
    }),
  });
  return (await res.json()).choices?.[0]?.message?.content;
}

Der Code nutzt das OpenAI-artige Format /chat/completions, das viele lokale und gehostete Modellserver anbieten. Prüfe die Doku deines Anbieters. Die Extension braucht außerdem Zugriff auf diese Adresse: per host_permissions oder zur Laufzeit mit chrome.permissions.request.

Schritt 5: Entpackt laden

chrome://extensions öffnen, Entwicklermodus einschalten, Entpackte Erweiterung laden und den Ordner wählen. Mit einem Framework wie WXT wird ein Entrypoint sidepanel/index.html zum Side Panel, und WXT schreibt den Manifest-Eintrag selbst.

Gute Gewohnheiten für ein KI-Side-Panel

• Vor jedem Senden bestätigen lassen. Zeigen, was den Browser verlässt: Titel, URL, Text, Auswahl.
• KI-Antworten kennzeichnen. Ein kurzer Hinweis unter jeder Antwort: KI kann sich irren.
• Keys lokal halten. Endpunkt und Key in chrome.storage.local, nie im Code.
• API-Kosten trägt der Nutzer. Das gehört auf die Optionsseite.

AI Side Panel Extension Starter für Chrome

Der AI Side Panel Extension Starter für Chrome ist eine Vorlage mit automatisierten Tests für deine eigene Side-Panel-Erweiterung. Laut Produktseite: Manifest V3 mit WXT, React und TypeScript; Side Panel mit Bestätigung vor jedem Senden und KI-Hinweis unter jeder Antwort; Rechtsklick-Einträge „Seite zusammenfassen“ und „Auswahl erklären“; Optionsseite für Endpunkt, Modell und API-Key; Texte in DE/EN, Vorlage für eine Datenschutzerklärung, README und Installationsanleitung. Die KI-Adresse trägst du selbst ein (lokales Ollama oder eine OpenAI-kompatible API). Kein KI-Modell enthalten, API-Kosten trägst du, keine Daten an Aramac. Kompatibilität: Chrome und Chromium-basierte Browser ab Version 116; Build mit Node.js 22.13 oder neuer. Preis: 29 € inkl. MwSt. Lizenz: nur eigene, nicht gewerbliche Nutzung. Eine kostenlose, nicht kommerzielle Veröffentlichung deiner eigenen Extension im Chrome Web Store ist erlaubt (ohne Werbung, Bezahlfunktionen oder Datenverkauf), die Veröffentlichung des Starters selbst nicht (Lizenz). Nicht mit Google LLC verbunden. Chrome ist eine Marke von Google LLC.

Häufige Probleme

• Side Panel öffnet nicht per Symbol: setPanelBehavior({ openPanelOnActionClick: true }) fehlt, oder das Manifest hat keinen action-Schlüssel.
• sidePanel.open() wirft einen Fehler: Es lief außerhalb einer Nutzeraktion. Direkt im Klick-Handler aufrufen.
• Side Panel verschwindet auf manchen Tabs: Für diesen Tab ist setOptions({ enabled: false }) aktiv.
• Anfrage an die KI scheitert: Host-Berechtigung für den Endpunkt fehlt, oder der lokale Modellserver blockiert den Ursprung der Extension.

FAQ

Ab welcher Chrome-Version gibt es die Side-Panel-API?
chrome.sidePanel braucht Chrome 114 und Manifest V3, sidePanel.open() Chrome 116.

Kann ich ein lokales Modell statt einer Cloud-API nutzen?
Ja, wenn dein lokaler Server eine HTTP-API anbietet, die dein Code aufrufen kann, etwa einen OpenAI-kompatiblen Endpunkt. Der AI Side Panel Starter unterstützt lokales Ollama oder eine OpenAI-kompatible API.

Funktioniert das Side Panel in anderen Browsern?
Der AI Side Panel Starter nennt Chrome und Chromium-basierte Browser ab Version 116. Für andere Browser in deren Doku nachsehen.

Ist der AI Side Panel Starter ein Abo?
Nein. 29 € inkl. MwSt., einmal bezahlt, Lieferung als ZIP. API-Kosten für dein Modell kommen dazu.

Darf ich meine Extension im Chrome Web Store veröffentlichen?
Laut Lizenz ja: kostenlos und nicht kommerziell, ohne Werbung, Bezahlfunktionen oder Datenverkauf. Den Starter selbst als Vorlage zu veröffentlichen oder Extensions für Kunden oder Arbeitgeber zu bauen, ist nicht erlaubt.

Weitere Guides

• Discord-Bot erstellen
• MCP-Server erstellen und mit ChatGPT verbinden
• Englische Version: Build a Chrome Side Panel Extension with AI

→ AI Side Panel Starter für 29 € holen

_Nicht mit Google LLC verbunden und nicht von Google unterstützt. Chrome ist eine Marke von Google LLC._