Browser-Erweiterungen entwickeln (Chrome, Firefox, Edge, Safari)

Browser-Erweiterungen sind der zugänglichste Einstieg in die Add-on-Entwicklung. Sie brauchen keinen Server, keine besondere Entwicklungsumgebung und keine Freigabe, um loszulegen: Ein Ordner mit einer Manifest-Datei und etwas JavaScript genügt, und der Browser lädt das Ergebnis im Entwicklermodus sofort. Gleichzeitig ist die Plattform mächtig. Erweiterungen können Webseiten verändern, Tabs verwalten, Netzwerkanfragen filtern und eigene Oberflächen einblenden. Genau deshalb gelten strenge Regeln für Berechtigungen und Veröffentlichung.

Das WebExtensions-Modell

Fast alle aktuellen Browser folgen einem gemeinsamen Modell, das ursprünglich aus Chrome stammt und als WebExtensions bezeichnet wird. Firefox hat es übernommen, Edge setzt seit dem Wechsel auf Chromium auf dieselbe Basis, und auch Safari unterstützt Web Extensions. Für Sie heißt das: Wer eine Erweiterung für einen Browser schreibt, hat die anderen zu großen Teilen gleich mit abgedeckt.

Das Herzstück ist die Datei manifest.json. Sie beschreibt, wie die Erweiterung heißt, welche Version sie hat, welche Dateien zu ihr gehören und welche Rechte sie braucht. Aktuell ist Manifest V3. Chrome hat die Unterstützung für Manifest V2 auslaufen lassen; neue Erweiterungen sollten ausschließlich auf V3 setzen.

{
  "manifest_version": 3,
  "name": "Tab-Zähler",
  "version": "1.0.0",
  "description": "Zeigt die Zahl offener Tabs im Symbol an.",
  "background": { "service_worker": "background.js" },
  "action": { "default_title": "Offene Tabs" },
  "permissions": ["tabs"]
}

Die Bausteine einer Erweiterung

Eine Erweiterung ist kein einzelnes Programm, sondern ein Verbund aus Teilen, die in unterschiedlichen Umgebungen laufen und über Nachrichten miteinander sprechen.

Der Service Worker ersetzt unter Manifest V3 die frühere dauerhaft laufende Hintergrundseite. Er wird bei Bedarf gestartet und nach kurzer Inaktivität wieder beendet. Variablen im Speicher gehen dabei verloren. Zustand, der erhalten bleiben soll, gehört deshalb in chrome.storage. Wer diesen Unterschied nicht kennt, wundert sich über scheinbar zufällig verschwundene Daten.

Content Scripts laufen in einer isolierten Umgebung neben dem JavaScript der Webseite. Sie sehen dasselbe DOM, aber nicht die Variablen der Seite. Für den Austausch mit dem Service Worker dienen chrome.runtime.sendMessage und chrome.runtime.onMessage.

// background.js: Zahl der offenen Tabs als Badge anzeigen
async function aktualisieren() {
  const tabs = await chrome.tabs.query({});
  await chrome.action.setBadgeText({ text: String(tabs.length) });
}

chrome.tabs.onCreated.addListener(aktualisieren);
chrome.tabs.onRemoved.addListener(aktualisieren);
chrome.runtime.onStartup.addListener(aktualisieren);

Berechtigungen: so wenig wie möglich

Jede Berechtigung im Manifest erscheint bei der Installation als Hinweis für Nutzerinnen und Nutzer. Je weitreichender die Liste, desto größer das Misstrauen und desto genauer die Prüfung im Store. Manifest V3 trennt API-Berechtigungen (permissions) von Websitezugriffen (host_permissions). Ein Zugriff auf <all_urls> ist für viele Zwecke unnötig: Die Berechtigung activeTab gewährt Zugriff auf den aktuellen Tab erst dann, wenn jemand die Erweiterung aktiv anklickt.

Mehr zur Nutzersicht auf Berechtigungen lesen Sie im Bereich Erweiterungen sicher nutzen und prüfen.

Lokal laden und testen

1. Legen Sie einen Ordner mit manifest.json und den benötigten Skripten an.
2. In Chrome öffnen Sie chrome://extensions, aktivieren oben rechts den Entwicklermodus und wählen „Entpackte Erweiterung laden“.
3. In Firefox öffnen Sie about:debugging, wechseln zu „Dieser Firefox“ und laden die Manifest-Datei als temporäres Add-on.
4. Nach jeder Änderung laden Sie die Erweiterung über das Neuladen-Symbol neu. Fehler im Service Worker sehen Sie über den Link „Service Worker untersuchen“.

Für größere Projekte lohnt sich ein Build-Schritt mit TypeScript und einem Bundler. Automatisierte Tests mit Werkzeugen wie Playwright können eine Erweiterung in einem echten Browser laden und Klickpfade prüfen. Beides behandelt der Bereich Programmiergrundlagen.

Unterschiede zwischen den Browsern

Firefox unterstützt neben Manifest V3 weiterhin Manifest V2 und verlangt, dass Erweiterungen für die reguläre Version von Mozilla signiert sind. Safari ist ein Sonderfall: Eine Web Extension wird dort in eine native App verpackt. Apple liefert dafür ein Konvertierungswerkzeug in Xcode, das aus einem bestehenden Erweiterungsordner ein Projekt erzeugt.

Veröffentlichen

Jeder Store hat ein eigenes Entwicklerkonto, eigene Prüfprozesse und eigene Inhaltsrichtlinien. Gemeinsam ist allen: Eine klare Beschreibung, eine Datenschutzerklärung bei Datenzugriff, nachvollziehbar begründete Berechtigungen und aussagekräftige Screenshots beschleunigen die Prüfung. Konten, Gebühren und typische Ablehnungsgründe vergleicht der Bereich Add-ons veröffentlichen und pflegen.

Typische Stolpersteine

• Verschwundener Zustand: Der Service Worker wurde beendet, globale Variablen sind weg. Lösung: Zustand in chrome.storage ablegen.
• Content Script greift nicht: Das Muster in matches passt nicht zur Adresse, oder die Seite wurde vor der Installation geladen und muss neu geladen werden.
• Nachricht kommt nicht an: Der Empfänger existiert noch nicht, etwa weil das Popup geschlossen ist. Nachrichten an ein Popup sind nur zustellbar, solange es geöffnet ist.
• Ablehnung im Store: zu breite Berechtigungen, unklare Funktion oder fehlende Angaben zur Datennutzung.