Your browser's new tab, reimagined. KaTab replaces Chrome's new tab page with a kanban-style workspace — group sites into Collections, capture ideas with Notes, and drag open tabs straight into your boards.
Group related websites into named, color-coded boards called Collections.
- One-click open — launch every site in a Collection as a Chrome Tab Group, colors included
- Color-coded Tab Groups — Collection color maps automatically to the nearest Chrome Tab Group color
- Drag to reorder — rearrange cards on the board with snap-to-grid
- Site management — add, delete, and reorder sites within a card; search inside the full-view modal
Click Open all on any card to open all its sites at once — choose between the current window (Tab Group) or a new window.
From any webpage: select text, click the floating KA button, edit if needed, and save — the note lands in your Notes panel with the source URL attached.
From the new tab: type directly into the Notes sidebar, supports Markdown basics.
The left sidebar shows every tab you have open right now, plus recently closed ones. Drag any item straight onto a Collection card to save it.
- Current tabs — live list of all open tabs in the current window
- Recently closed — last 25 closed tabs, drag-to-save just like open ones
- Click any item to jump to (or restore) the tab
Search across all Collections, sites, and Notes from the top bar.
Configure color palettes for Collections, theme (light/dark), and data backup.
All Collections and Notes sync automatically via chrome.storage.sync. If two devices edit the same data at the same time, a conflict resolution panel lets you choose which version to keep.
- Node.js ≥ 18
- pnpm ≥ 9
git clone https://github.com/your-username/ka-tab.git
cd ka-tab
pnpm installpnpm devThen open chrome://extensions, enable Developer mode, click Load unpacked, and select .output/chrome-mv3-dev/.
pnpm build
# output → .output/chrome-mv3/| Command | Description |
|---|---|
pnpm dev |
Dev server with hot-reload |
pnpm build |
Production build |
pnpm zip |
Build + zip for Chrome Web Store |
pnpm lint |
Lint with Biome |
pnpm check |
Lint + format (auto-fix) |
pnpm typecheck |
TypeScript type-check |
pnpm test:unit |
Unit tests (Vitest) |
pnpm test:integration |
Integration tests (Playwright) |
pnpm test:all |
All tests |
src/
├── entrypoints/
│ ├── newtab/ # New tab page — main UI
│ ├── content/ # Content script — floating KA button & note panel
│ ├── background/ # Service worker — message handlers
│ └── options/ # Settings page
├── features/
│ ├── collections/ # Collection logic, cards, drag-drop
│ ├── notes/ # Note panel and storage
│ └── tab-tray/ # Current tabs & recently closed
└── shared/
├── messaging/ # Chrome runtime message types & client
├── storage/ # Storage keys & helpers
└── settings/ # User preferences
| UI | SolidJS |
| Extension tooling | WXT (Chrome MV3) |
| Styling | UnoCSS |
| Drag & drop | @thisbeyond/solid-dnd |
| Linting | Biome |
| Testing | Vitest + Playwright |
MIT