2026
Jahr der aktuellen Produktstufe
Fallstudie · Browser · Produktivität
New Tab von Webdoka
Browser-Erweiterung für Chrome und Firefox: die Standard-Neue-Tab-Seite wird zur Arbeitsstartseite mit visuellen Lesezeichen, Ordnern, Notizen, Widgets und eigenem Hintergrund. Daten bleiben lokal - die Oberfläche spricht über 50 Sprachen.
Chrome + Firefox
Zwei Stores, eine Codebasis
50+ Sprachen
UI über _locales lokalisiert
MV3
Manifest V3 für Chrome
Local-first
Daten im Browserprofil
Herausforderung
Die Aufgabe
Die Standard-Neue-Tab-Seite ist leer - Nutzer brauchen eine Arbeitsstartseite statt einer leeren Fläche.
Ausgangslage
Viele Seiten, Projekte und Recherche-Links liegen verstreut in langen Lesezeichenlisten. Fehlende visuelle Karten, Ordner mit Notizen, Hotkeys und Widgets machen den Start im Browser unnötig langsam.
Gefordert war ein Produkt, das die Neue-Tab-Seite ersetzt: eigene Oberfläche, lokaler Datenspeicher, viele Sprachen und Veröffentlichung in beiden großen Stores.
Kernanforderungen
Das Produkt musste mehrere Nutzungswege in einer Oberfläche bündeln:
- Visuelle Karten statt langer Lesezeichenlisten
- Ordner und Unterordner für Projekte und Kunden
- Notizen zu Ordnern und einzelnen Karten
- Schnelles Speichern per Menü, Hotkeys und Popup
- Zeit- und Wetter-Widgets sowie eigener Hintergrund
- Lokale Daten und UI in vielen Sprachen
- Veröffentlichung in Chrome Web Store und Firefox Add-ons
Lösung
Was wir gebaut haben
New Tab from Webdoka - eine produktreife Erweiterung für Chrome und Firefox.
Produktansatz
Die Erweiterung ersetzt die Standard-Neue-Tab-Seite durch eine Arbeitsstartseite: Kartenraster mit Vorschauen, Ordnerleiste, Widgets und Hintergrund aus Presets oder dem Webdoka-Katalog.
Lesezeichen lassen sich von jeder Seite aus über Kontextmenü, Hotkeys oder Popup speichern - inkl. Screenshot-Vorschau, Drag-and-drop zwischen Ordnern und Link-Kopie für Messenger.
Architektur
Local Storage für Lesezeichen und Einstellungen, IndexedDB für große Previews, Service Worker, Content Script, Newtab-Page und kompaktes Popup. Stack: Vite 6 und TypeScript auf Vanilla DOM - ohne React.
Wetter kommt von Open-Meteo mit lokalem Cache; Hintergründe können vom CDN Webdoka geladen werden. Produktseite: newtab.webdoka.com. Verfügbar im Chrome Web Store und bei Firefox Add-ons.
Lieferumfang
Von Konzept bis Store-Publikation - was konkret geliefert wurde.
- Produktkonzept und UX der Neuen-Tab-Seite
- Chrome MV3 und Firefox-Erweiterung
- Visuelle Lesezeichen, Ordner und Notizen
- Kontextmenü und Hotkeys
- Zeit- und Wetter-Widgets
- Hintergrundkatalog und Preferences Lab
- Lokalisierung auf 50+ Sprachen
- Publikation im Chrome Web Store und bei Firefox Add-ons
Funktionen
Was die Startseite kann
Fünf Bausteine - von visuellen Karten bis zur Store-Veröffentlichung.
Visuelle Lesezeichen
Karten mit Seitenvorschau (Autosnapshot oder eigenes Bild), Gruppierung in Ordnern mit Verschachtelung, Bereich «Unsortiert», Drag-and-drop, Öffnen einer oder aller Links einer Gruppe sowie Kopieren von Links für Messenger.
So bleibt die Startseite übersichtlich - Projekte, Recherche und häufige Seiten sind auf einen Blick erreichbar.
Karten
Ordner
Drag-and-drop
Notizen
Die Ordnernotiz dient als gemeinsamer Brief oder Nachrichtenvorlage. Die Kartennotiz hält Hinweise zu Seite oder Kontakt. Text lässt sich mit einem Klick in die Zwischenablage kopieren; ein Indikator zeigt, wenn die Notiz nicht leer ist.
Ordner- und Kartentexte bleiben unabhängig - Brief und Detailnotiz stören sich nicht.
Ordnernotiz
Kartennotiz
Zwischenablage
Seiten speichern
Kontextmenü «Seite speichern» in einen gewählten Ordner, Hotkeys Alt+S (Bereich) und Shift+Alt+S (Seite nach «Unsortiert»), Erweiterungs-Popup sowie eigene Vorschau für die Lesezeichenkarte.
Speichern funktioniert von jeder Seite aus - ohne die Startseite vorher öffnen zu müssen.
Alt+S
Shift+Alt+S
Popup
Widgets und Hintergrund
Uhrzeit für mehrere Städte, Open-Meteo-Wetter für sieben Tage mit Cache, Presets und Katalog der Webdoka-Hintergründe, Textfarbe und Kartenmaßstab.
Preferences Lab bündelt Oberfläche, Widgets, Layout, Backup sowie Import von Chrome-HTML-Lesezeichen.
Open-Meteo
Hintergründe
Preferences Lab
Lokalisierung und Publikation
Oberfläche und Release-Hinweise in mehr als 50 Sprachen über _locales. Landingpage und Hilfe unter newtab.webdoka.com.
Die Erweiterung ist im Chrome Web Store (Manifest V3) und bei Firefox Add-ons veröffentlicht - inklusive Store-Assets und Review-Prozess.
50+ Locales
Chrome Web Store
Firefox Add-ons
So sieht es aus
Auszüge aus der Startseite - Lesezeichen, Notizen, Speichern und Widgets.
Technologie
Tech Stack
TypeScript und Vite 6 - Chrome MV3, Firefox und IndexedDB für Previews.
TypeScript
Typsichere Erweiterungslogik für Service Worker, Content Script, Newtab-Page und Popup.
Vite 6
Moderne Build-Pipeline für Manifest-Ziele, Assets und schnelle lokale Entwicklung.
Chrome MV3 / Firefox
Gemeinsame Codebasis für Manifest V3 und Firefox Add-ons - inklusive Store-Publikation.
IndexedDB
Große Preview-Bilder lokal im Browserprofil - neben Local Storage für Einstellungen.
Vanilla DOM
Leichte Newtab-Oberfläche ohne React - fokussiert auf Startgeschwindigkeit und Klarheit.
Open-Meteo & CDN
Wetter mit lokalem Cache; Hintergründe optional vom CDN Webdoka.
TypeScript
Vite 6
Chrome MV3
Firefox
IndexedDB
Local-first
Ergebnisse
Ergebnis - klar
Ein veröffentlichtes Produkt in zwei Stores - local-first und mehrsprachig.
2026
aktuelle Produktstufe
2 Stores
Chrome und Firefox
50+
Sprachen in der UI
MV3
Chrome Manifest V3
Local-first
kein Cloud-Konto nötig
Ergebnis für das Produkt
Eine Browser-Erweiterung, die die leere Neue-Tab-Seite durch eine Arbeitsstartseite ersetzt: visuelle Lesezeichen, Ordner, Notizen, Widgets und Hintergründe. Daten bleiben im Browserprofil; die Oberfläche ist in über 50 Sprachen verfügbar und in beiden großen Stores veröffentlicht.
Für Webdoka
Der Case zeigt Produktentwicklung für Browser-Erweiterungen: Konzept, UX, TypeScript/Vite-Stack, Store-Publikation und local-first Datenschutz - als eigenständiges Produkt unter newtab.webdoka.com.
Ähnliche Erweiterung bauen?
Kurz beschreiben, was Sie brauchen - wir melden uns mit einem konkreten Vorschlag.