I built a New Tab replacement for developers drowning in tabs

#chrome #productivity #typescript #webdev

Every developer I know has the same problem: too many tabs, no context, and a vague sense of dread every time they open a new one.

I'd open a new tab and stare at Chrome's default page — a blank slate with zero information about what I was working on. Was it the PR I needed to review? The Figma file from yesterday? The Stack Overflow answer I had open?

So I built TabLobby — a Chrome/Brave extension that replaces your New Tab page with an actual workspace.

What it does

Every time you open a new tab, instead of a blank page you see:

All your open windows — grouped, labeled, with every tab visible at a glance
Saved collections — capture your current context (project tabs, research tabs, anything) with one click. Restore it later exactly as you left it.
Live search — ⌘K across all open tabs, saved sessions, and collections instantly
Duplicate detection — red DUP badge when you've got the same URL open twice (happens more than I'd like to admit)
Drag & drop — move tabs between windows, reorder them, with undo support (Ctrl+Z)
Bookmark manager — right panel with your full bookmark tree, pin frequently used folders
Dark mode — warm amber accent, not the harsh blue-white most extensions default to

The stack

Built with React + TypeScript, Chrome Manifest V3, Vite, and @dnd-kit for drag & drop. Self-hosted DM Sans font (no Google Fonts CDN in extensions), PostHog for analytics, and a full Playwright test suite running in GitHub Actions CI.

The hardest part wasn't the UI — it was getting drag & drop to feel right. Tabs need to snap back with a rubber-band animation when dropped, not just teleport. Spent an embarrassing amount of time on cubic-bezier(0.16, 1, 0.3, 1) at 580ms.