ProTabs

Your Chrome tabs, organized beautifully.

ProTabs replaces your Chrome new tab page with a stunning, feature-rich dashboard that shows everything you have open — grouped by domain, with live previews, AI analysis, productivity widgets, and a satisfying way to clean up. 100% local, your data never leaves your machine.

---

✨ Features

Tab Management

• See all your tabs at a glance — grouped by domain on a premium glassmorphic grid
• 4 view modes — Grid, Tile, List, and Tree/Mind Map for different workflows
• Live tab previews — mini browser screenshots for each open tab
• Landing pages group — homepages (Gmail, X, LinkedIn, GitHub, YouTube) grouped into one card for one-click cleanup
• Duplicate detection — flags duplicate tabs with one-click cleanup
• Click any tab title to jump to it — switches to the existing tab, even across windows
• Save for later — bookmark tabs to a checklist before closing
• Pin tab groups — star your important domain groups to keep them always at the top
• Close tabs with style — swoosh sound + confetti burst when you clean up a group

Productivity Widgets

• 🕐 Clock — large digital time with pulsing seconds and full date
• 🌤️ Weather — real-time weather from Open-Meteo (free, no API key needed)
• 🍅 Focus Timer — Pomodoro timer with circular progress ring (25/5 min cycles)
• 📝 Quick Notes — persistent notes with color tags, saved to local SQLite

Power Features

• Command Palette — ⌘K to search and jump to any tab instantly
• AI Smart Groups — AI-powered tab grouping by topic (not just domain)
• Workspaces — save/restore entire tab sessions
• Tab Timeline — 24-hour activity heatmap showing your browsing patterns
• Tab Health Widget — monitors your tab count and suggests cleanup
• Smart Notifications — alerts for stale tabs, duplicates, and tab overload
• Drag & Drop — reorder cards to your preference
• 3 Themes — Warm (default), Light, and Dark

Privacy & Performance

• 100% local — your browsing data never leaves your machine. No external API calls for tab data
• Always on — starts automatically when you log in, runs silently in the background
• Auto-updates — get notified when a new version is available

---

🚀 Setup (2 minutes)

Prerequisites

• Node.js (v18 or newer) — Download here
• Google Chrome browser
• macOS, Linux, or Windows

Step 1: Clone and Install

git clone https://github.com/aageer/protabs.git
cd protabs
npm install

Step 2: Create Config Directory

Create the config file at ~/.mission-control/config.json:

mkdir -p ~/.mission-control
echo '{"port": 3456}' > ~/.mission-control/config.json

Step 3: Run the Setup Script

npm run install-service

This creates data/log directories and installs an auto-start service so ProTabs runs automatically on login:

• macOS → Launch Agent
• Linux → systemd service
• Windows → Startup script

Step 4: Install the Chrome Extension

This is the only step that requires manual action in Chrome. Follow carefully:

4a. Open Google Chrome and type this in the address bar:

chrome://extensions

Press Enter. You'll see Chrome's extension management page.

4b. In the top-right corner, you'll see a toggle switch labeled "Developer mode". Turn it ON (toggle should be blue).

💡 Why? Developer mode allows you to install extensions from local folders instead of the Chrome Web Store. This is completely safe — ProTabs runs 100% locally.

4c. Once Developer mode is on, three new buttons appear at the top-left. Click "Load unpacked".

4d. A file picker window will open. You need to navigate to the extension/ folder inside the ProTabs project:

• macOS: Press ⌘ + Shift + G in the file picker to open "Go to folder", then paste:

  ~/Kean/Projects/Chrome-tabs/extension
  

  Or navigate manually: your home folder → wherever you cloned protabs → extension

• Windows: Paste this in the address bar of the file picker:

  C:\Users\YOUR_USERNAME\protabs\extension
  

• Linux: Navigate to wherever you cloned protabs, then into the extension/ subfolder.

⚠️ Important: Select the extension folder itself, NOT any file inside it. Chrome needs the whole folder.

4e. Click "Select" (Mac) or "Open" (Windows/Linux).

4f. You should now see "ProTabs" appear in your extensions list with its icon. ✅

💡 Tip: If you want ProTabs to always be visible in Chrome's toolbar, click the puzzle piece icon (🧩) in Chrome's top-right, find ProTabs, and click the pin icon (📌) next to it.

Step 5: Start and Verify

npm start

Now open a new tab (⌘T on Mac / Ctrl+T on Windows/Linux) — you'll see your ProTabs dashboard with all your open tabs organized beautifully!

Note: After first install, the server auto-starts on login. You won't need to run npm start again.

---

📖 How to Use

Daily Workflow

1. Open a new tab → Your dashboard loads automatically
2. Browse your tab groups → Cards are sorted by tab count, pinned groups on top
3. Click any tab title → Jumps directly to that tab (no new tab opened)
4. Click "Close all N tabs" → Clean up a group with a swoosh sound + confetti
5. Star (⭐) a group → Pin it to always appear at the top

Keyboard Shortcuts

Shortcut	Action
⌘K / Ctrl+K	Open Command Palette — search & jump to any tab
Esc	Close Command Palette

View Modes

Switch between views using the icons in the toolbar:

• Grid — Card layout with previews (default)
• Tile — Minimal tile layout
• List — Compact single-column list
• Tree — Hierarchical mind-map with expandable domain nodes

Widgets

The widget strip at the top of the dashboard includes:

• Clock — Live time + date (collapse with the chevron)
• Weather — Click "Enable Location" on first use to get local weather
• Focus Timer — Click Start for a 25-min Pomodoro session. Auto-switches to 5-min break
• Quick Notes — Click + to add notes. Click the paint icon to cycle colors. Notes persist across sessions

Workspaces

• Click "Save current" to save all your open tabs as a workspace
• Click a saved workspace to restore those tabs
• Great for context-switching between projects

---

⚙️ Configuration

Config lives at ~/.mission-control/config.json:

Field	Default	Description
port	3456	Local server port

Logs are stored at ~/.mission-control/logs/.

---

🏗️ Tech Stack

Component	Technology
Server	Node.js + Express 5
Database	better-sqlite3 (local SQLite)
Extension	Chrome Manifest V3
Dashboard	Vanilla HTML/CSS/JS with glassmorphic design
Weather	Open-Meteo API (free, no key required)
Auto-start	macOS Launch Agent / Linux systemd / Windows Startup
Sound	Web Audio API (synthesized, no audio files)
Animations	CSS transitions + JS confetti particles

---

🔧 Troubleshooting

Dashboard shows "Connecting to Chrome..."

This means the server isn't running. Fix:

cd protabs
npm start

Weather shows "Location access needed"

Click "Enable Location" and allow Chrome to access your location. ProTabs only uses your coordinates to fetch weather — nothing is sent externally except to the free Open-Meteo API.

Tabs not showing up

Make sure the ProTabs Chrome extension is installed and enabled at chrome://extensions. The extension bridges Chrome's tab data to the dashboard.

Server won't auto-start

Re-run the install command:

npm run install-service

---

📝 License

MIT License — see LICENSE for details.

---

Created by Akhil Ageer (@aageer)