Skip to content

README.md

Latest commit

 

History

History
134 lines (101 loc) · 4.84 KB

README.md

File metadata and controls

134 lines (101 loc) · 4.84 KB

TabFlow

A Chrome extension for managing browser windows and tabs with a beautiful masonry layout interface.

Screenshots

TabFlow Popup
Quick access popup showing all windows and tabs

TabFlow Manager
Full manager interface with masonry layout

Features

  • Masonry Layout: Tabs and windows displayed in a Pinterest-style masonry grid that efficiently uses screen space
  • Window Management: View all open windows and tabs in one place
  • Drag & Drop: Move tabs between windows with intuitive drag and drop
  • Bulk Operations: Select multiple tabs and move them to a new window
  • Domain Grouping: Group tabs by domain for better organization
  • Search: Quickly find tabs by URL
  • Multiple View Modes:
    • Masonry (default) - Column-based layout
    • List - Single column view
    • Full Masonry - Uses full screen width
  • View Sizes: Normal, Compact, and Ultra-compact modes

Architecture

Core Components

1. Background Service Worker (background.js)

  • Handles all Chrome API interactions
  • Implements secure message passing between extension components
  • Manages window and tab operations (create, close, move, focus)
  • Validates all incoming messages for security

2. Popup Interface (popup.html, popup.js, popup.css)

  • Quick access view from the extension icon
  • Shows all windows with their tabs
  • Allows quick focusing and closing of windows/tabs
  • Links to full manager interface

3. Manager Interface (manager.html, manager.js, manager.css)

  • Full-featured tab management interface
  • Implements the WindowManager class that handles:
    • Window and tab rendering
    • Drag and drop functionality
    • Search and filtering
    • Bulk selections
    • Domain grouping
    • View mode switching

4. Masonry Layout Engine (masonry-layout.js)

  • JavaScript-based layout system (avoids CSP violations)
  • Calculates optimal column placement
  • Responsive column count based on viewport
  • Debounced resize handling
  • Mutation observer for dynamic content

Data Flow

  1. Chrome APIs → Background Script

    • All Chrome API calls go through the background service worker
    • Ensures consistent error handling and security

  2. Background Script ↔ UI Components

    • Secure message passing using Chrome runtime messaging
    • All messages validated before processing
    • Async/await pattern for clean error handling

  3. UI State Management

    • WindowManager class maintains UI state
    • Real-time updates via Chrome event listeners
    • Optimistic UI updates with rollback on error

Security Features

  • Input Validation: All user inputs sanitized and validated
  • Message Validation: Background script validates all incoming messages
  • Content Security Policy: No inline scripts, all JavaScript in separate files
  • HTML Escaping: All dynamic content properly escaped to prevent XSS

Key Design Decisions

  1. Masonry Layout: Uses absolute positioning with JavaScript calculations instead of CSS Grid/Flexbox to achieve true masonry effect

  2. Domain Grouping: Tabs grouped by domain when enabled, with collapsible sections and bulk actions per domain

  3. Drag & Drop: Native HTML5 drag and drop API with visual feedback and drop zones

  4. Performance: Debounced operations, efficient DOM updates, and lazy loading for large tab counts

File Structure

tabflow/
├── manifest.json          # Extension manifest (Manifest V3)
├── background.js          # Service worker for Chrome API operations
├── popup.html            # Popup interface HTML
├── popup.js              # Popup interface logic
├── popup.css             # Popup interface styles
├── manager.html          # Full manager interface HTML
├── manager.js            # Manager interface logic (WindowManager class)
├── manager.css           # Manager interface styles
├── masonry-layout.js     # Masonry layout calculations
└── assets/
    └── icons/            # Extension icons (16x16 to 128x128)

Development

The extension uses vanilla JavaScript with no build process required. Simply load the unpacked extension in Chrome to test changes.

Chrome APIs Used

  • chrome.tabs.* - Tab management
  • chrome.windows.* - Window management
  • chrome.runtime.* - Extension messaging
  • chrome.storage.* - Preference storage (prepared for future use)

Browser Compatibility

  • Chrome/Chromium browsers with Manifest V3 support
  • Requires Chrome 88+ for full feature support

License

This project is licensed under the MIT License - see the LICENSE file for details. You are free to use, modify, and distribute this software in any way you like.