TabScribe: Chrome-Erweiterung für blitzschnelles Markdown-Tabexport

Das manuelle Kopieren von Dutzenden Browser-Tabs in Notizen gehört der Vergangenheit an. Mit der neuen Chrome-Erweiterung TabScribe gelingt der Export aller geöffneten Tabs in einem Rutsch – und das in verschiedenen Formaten wie Markdown, JSON oder HTML. Entwickelt für Effizienz und Datenschutz, überzeugt die Erweiterung mit einem schlanken Design und minimalem Ressourcenverbrauch.

Warum TabScribe entstanden ist

Nach stundenlangem Recherchieren mit dutzenden geöffneten Tabs wurde mir klar: Es muss einen besseren Weg geben. Statt jede URL einzeln zu kopieren, suchte ich nach einer Lösung, die alle Tabs mit einem einzigen Klick in meine Notizen überträgt. Die Suche nach einer passenden Erweiterung im Chrome Web Store endete jedoch in Frustration. Die vorhandenen Optionen waren entweder überladen, veraltet oder boten nur eingeschränkte Funktionen.

Daher beschloss ich, selbst eine Lösung zu entwickeln – und so entstand TabScribe innerhalb weniger Wochen.

Die wichtigsten Funktionen im Überblick

TabScribe bietet eine Reihe nützlicher Funktionen, die den Arbeitsalltag erleichtern:

• Ein-Klick-Export: Alle geöffneten Tabs werden mit einem Tastenkürzel (Alt+Shift+C) oder per Klick in die Zwischenablage kopiert.
• Mehrere Exportformate:
• Markdown mit Titel und Links (Titel) – ideal für Obsidian, Notion oder VS Code
• JSON-Array für die Weiterverarbeitung in Skripten
• Reiner Text mit anpassbaren Trennzeichen
• HTML-Liste für Web-basierte Notizen
• Tab-Gruppen speichern und wiederherstellen: Gespeicherte Tab-Gruppen lassen sich später in einem neuen Fenster wiederherstellen – perfekt für Projektwechsel oder Recherche-Sessions.
• Smart Filtering: Automatische Ausblendung von internen Seiten wie chrome:// oder edge://, optional lassen sich auch angeheftete Tabs ausschließen.
• Anpassbare Trennzeichen: Für Textausgaben kann ein benutzerdefiniertes Trennzeichen gewählt werden, z. B. ein Pipe-Symbol für CSV-ähnliche Formate.
• 12 Sprachen: Die Erweiterung unterstützt unter anderem Deutsch, Englisch, Chinesisch, Japanisch, Koreanisch und Französisch.
• Dunkles Design: Passt sich automatisch dem Systemdesign an.

Technische Umsetzung: Leichtgewichtig und performant

TabScribe nutzt eine moderne, aber schlank gehaltene Tech-Stack:

Preact + TypeScript + Tailwind CSS + Vite + crxjs
Gebündelte Größe: ~63 KB (komprimiert: ~17 KB)
Externe Laufzeitabhängigkeiten: Keine

Die Wahl von Preact statt React war eine bewusste Entscheidung. Da Chrome-Erweiterungen jedes Kilobyte zählen, bietet Preact mit nur 3 KB einen deutlichen Vorteil gegenüber Reacts 40 KB+. Dank @preact/preset-vite bleibt die Entwicklererfahrung (DX) nahezu identisch.

Die größte Hürde: Zwischenablage-Zugriff in Manifest V3

Die größte technische Herausforderung lag im Zugriff auf die Zwischenablage unter Manifest V3. Hier ersetzt ein Service Worker die Hintergrundseite – und dieser hat keinen Zugriff auf das DOM. Die herkömmliche Methode document.execCommand('copy') funktioniert dort nicht mehr. Die Lösung bestand in einer mehrstufigen Strategie:

async function copyToClipboard(text: string, html?: string) {
  // Strategie 1: Modernes Clipboard API (funktioniert in Popup und Offscreen-Kontext)
  try {
    const item = new ClipboardItem({
      'text/plain': new Blob([text], { type: 'text/plain' }),
      ...(html ? { 'text/html': new Blob([html], { type: 'text/html' }) } : {}),
    });
    await navigator.clipboard.write([item]);
    return;
  } catch { /* Fallback auf nächste Strategie */ }

  // Strategie 2: execCommand (nur im Popup-Kontext möglich)
  if (typeof document !== 'undefined') {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    return;
  }

  // Strategie 3: Offscreen-Dokument (für Service Worker)
  await chrome.offscreen.createDocument({ /* ... */ });
  // Weiterleitung des Kopiervorgangs an das Offscreen-Dokument
}

Mehrsprachigkeit mit Chrome-internen APIs

Die Lokalisierung erfolgt über die integrierte chrome.i18n-API. Für jede unterstützte Sprache existiert eine separate JSON-Datei im Ordner _locales. Der Name und die Beschreibung der Erweiterung in der manifest.json nutzen Platzhalter wie __MSG_key__, sodass der Chrome Web Store automatisch die korrekte Sprache anzeigt.

Ein Beispiel für die japanische Lokalisierung:

{
  "extensionName": {
    "message": "TabScribe"
  },
  "extensionDesc": {
    "message": "すべてのタブをMarkdown/JSON/HTMLで一括コピー"
  }
}

Datenschutz von Grund auf

TabScribe verzichtet vollständig auf Tracking oder externe Datenübertragung:

• Keine Analysen oder Tracking-Pixel
• Keine Netzwerkanfragen (außer automatische Updates über den Chrome Web Store)
• Alle Daten werden lokal in `chrome.storage.local` gespeichert

Die Erweiterung benötigt nur sechs Berechtigungen, die jeweils klar begründet sind:

• tabs: Lesen von Tab-Titeln und URLs
• clipboardWrite: Kopieren von formatiertem Text
• storage: Speichern von Einstellungen und Tab-Gruppen
• commands: Registrierung des Tastenkürzels
• downloads: Exportieren von Dateien
• offscreen: Zugriff auf die Zwischenablage im Service Worker

Fazit: Effizienz trifft auf Datenschutz

TabScribe ist eine durchdachte Chrome-Erweiterung, die genau das bietet, was viele Nutzer suchen: einen schnellen, unkomplizierten Export aller Browser-Tabs in das gewünschte Format. Mit einer Größe von unter 100 KB und Unterstützung für 12 Sprachen ist sie eine echte Bereicherung für Entwickler, Forscher und alle, die viel mit Tabs arbeiten. Dank des Fokus auf Datenschutz und lokaler Speicherung bleibt die Kontrolle über die eigenen Daten stets beim Nutzer – ganz ohne versteckte Kosten oder Tracking.

Die Erweiterung ist kostenlos im Chrome Web Store verfügbar und erfordert keine Anmeldung. Wer selbst Hand anlegen möchte, findet den Quellcode auf GitHub.