Tabtopia is a Chrome extension that visualizes your browser history and open tabs using interactive D3.js visualizations. There are two core views -- treemap and graph. Both support search using the excellent lunr.js library. The extension leverages Chrome's bui 8000 lt-in AI capabilities to provide smart features like URL summarization.
-
Basic Navigation
- Double-click or press Enter/Space to jump to a tab
- Use arrow keys for keyboard navigation after selecting a node
- Single-click a node to make the readout panel sticky
- Press Escape to clear selection
-
Tab Management
- Long press (750ms) on a node to initiate drag and drop
- Drag nodes to move tabs between windows
- Bookmark tabs with a single click
- View domain-specific history and bookmarks in the readout panel
-
Smart Features
- AI-powered URL summarization in the readout panel
- Quick search with real-time filtering
- Domain grouping and window organization
- Automatic tab count and window statistics
- Readout panel updates only when selected element changes
-
View Modes
- Press 't' for time-based view
- Press 'd' for domain-based view
- Press 'r' to reset the view
-
Interaction
- Drag the canvas to pan
- Use scroll wheel to zoom
- Hover over nodes for details
- Click to focus on specific domains or time periods
-
Tab Synchronization Engine
- Real-time tab state monitoring
- Cross-window communication
- Event-driven updates
- Bookmark integration
-
History Trail System
- Continuous browsing activity tracking
- Domain-based aggregation
- Temporal pattern analysis
- Search indexing
-
AI Integration
- Built-in Chrome AI Summarizer API for URL content
- Smart context detection
- Adaptive readout generation
The underlying synchronization and history trail system can be leveraged for various scenarios:
-
Productivity Enhancement
- Work session analysis
- Research path tracking
- Context switching optimization
- Tab organization patterns
-
Knowledge Management
- Topic-based browsing clusters
- Research journey mapping
- Content relationship discovery
- Domain expertise tracking
-
Workflow Optimization
- Tab usage patterns
- Window organization strategies
- Frequent path identification
- Context restoration
- Clone this repository or download the zip
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer Mode" in the top-right corner
- Click "Load Unpacked" and select the repository folder
- D3.js Visualizations: Interactive treemaps and force-directed graph layouts
- Chrome Extension APIs: Integration with browser history, tabs, windows, and bookmarks
- Responsive Design: Dynamic layout management with window resize handling
This extension was developed as an exploration of browser data visualization, with significant portions of the code generated with the assistance of AI tools. The AI helped with:
- D3.js visualization implementations and layout algorithms
- Event handling and responsive design
- Chrome extension API integration
- UI component structure and styling
Anthropic and OpenAI models inside Visual Studio Code were the primary contributors, but a minority of development also occurred in Cursor with similar models.
Human oversight, editing, and testing were applied throughout development to ensure quality, performance, and proper integration with browser APIs.
Alternatives with similar functionality
- Tab Manager Plus: a treemap of favicons using an overlay
- Fuzzy Finder: 'ff' to url bar search your open tabs with fuzzy matching
- Older: Tab Switcher, fast tab switcher
- Search All Tabs
Inspiration
-
- Galaxy Tab: a D3 force visualization from 12 years ago, still works!