✨ Tabulous

Your tabs, but fabulous - A modern Chrome extension for finding and managing duplicate tabs

Built with React 19, TypeScript, and Vite 7.

---

🚀 Quick Start

Install & Run

# Install dependencies
pnpm install

# Start development server with HMR
pnpm run dev

# Build for production
pnpm run build

# Run tests
pnpm test

# Run tests with coverage
pnpm test --coverage

Load in Chrome

1. Open Chrome → chrome://extensions/
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked
4. Select the dist/ directory
5. Open the extension and start finding duplicates!

---

✨ Features

• 🔍 Smart Duplicate Detection - 4 detection modes for different use cases
• 🪟 Cross-Window Scanning - Find duplicates across all browser windows
• 📊 Real-time Statistics - See duplicate groups and redundant tab counts
• 🗑️ Bulk Actions - Close all duplicates or manage them individually
• ⚡ Fast & Lightweight - Modern React with optimized performance
• 💾 Persistent Settings - Your preferences are saved automatically
• 🎨 Clean UI - Simple, intuitive interface

Detection Modes

1. Strict - Exact URL matching (default)
2. Ignore Fragments - Ignore # anchors (e.g., page.html#section)
3. Ignore Query Params - Ignore ? parameters (e.g., page.html?id=123)
4. Loose - Ignore both fragments and query params

---

📁 Project Structure

tabulous/
├── src/                    # Source code
│   ├── components/         # React components
│   │   ├── Popup.tsx       # Main UI component
│   │   ├── Popup.css       # Styles
│   │   ├── DuplicateGroupComponent.tsx
│   │   └── TabItem.tsx
│   ├── lib/                # Core logic
│   │   ├── DuplicateDetector.ts
│   │   └── DuplicateDetector.test.ts
│   ├── test/               # Test utilities
│   │   ├── setup.ts
│   │   └── chrome-mock.ts
│   ├── popup.tsx           # Entry point
│   └── popup.html          # HTML template
├── icons/                  # Extension icons (16, 48, 128)
├── dist/                   # Build output (gitignored)
├── manifest.json           # Chrome extension manifest
├── package.json            # Dependencies
├── vite.config.ts          # Build configuration
├── vitest.config.ts        # Test configuration
├── tsconfig.json           # TypeScript config
├── devenv.nix              # Reproducible dev environment
└── archives/               # Historical docs (gitignored)

---

🧪 Testing

Comprehensive test suite with 94.73% coverage:

# Run tests in watch mode
pnpm test

# Run tests once
pnpm test run

# Generate coverage report
pnpm test --coverage

# Interactive test UI
pnpm test:ui

Test Coverage:

• ✅ 23 tests covering all detection modes
• ✅ Edge cases (empty arrays, invalid URLs, etc.)
• ✅ Cross-window duplicate detection
• ✅ Complex URL handling (ports, auth, subdomains)
• ✅ Large-scale performance (100+ tabs)

---

🛠️ Technology Stack

Category	Technology
Framework	React 19.2.0
Language	TypeScript 5.9.3
Build Tool	Vite 7.2.2
Testing	Vitest 4.0.8
Package Manager	pnpm
Dev Environment	devenv (Nix)

---

📦 Build & Deploy

Production Build

pnpm run build

This creates an optimized build in dist/:

• Minified JavaScript bundle
• Optimized CSS
• Extension manifest
• Icons

Development Build

pnpm run dev

Starts Vite dev server with:

• Hot Module Replacement (HMR)
• Fast refresh
• Source maps

---

🤝 Contributing

1. Clone the repository
2. Install dependencies: pnpm install
3. Start dev server: pnpm run dev
4. Make your changes
5. Run tests: pnpm test
6. Build: pnpm run build
7. Test in Chrome

Code Quality

# Type checking
pnpm run type-check

# Linting
pnpm run lint

---

📝 License

MIT License - See LICENSE file for details.

---

🗂️ Archives

Historical development artifacts are preserved in archives/ (gitignored):

• Previous Vite + Svelte implementation
• Planning documents and analysis reports
• Pre-reorganization backups

See archives/README.md for details.

---

Made with ❤️ and TypeScript