Skip to main content

WhyTab - Browser Extension for Context Management

A Chrome browser extension that solves the common problem of losing context when browsing the web. Automatically captures why you opened a tab by saving selected text, manual notes, and page metadata, helping users maintain focus and recall their browsing intent across sessions and devices.

View on GitHub
  • Browser Extension Development
  • Real-Time Data Synchronization
  • Cryptography Implementation
  • AI Integration

Overview

WhyTab is a Chrome browser extension that solves the common problem of losing context when browsing the web. It automatically captures why you opened a tab by saving selected text, manual notes, and page metadata, helping users maintain focus and recall their browsing intent across sessions and devices.

The extension operates as a personal knowledge management system that runs entirely in the browser, with optional cloud sync for cross-device access.

Key Features

Automatic Context Capture

  • Intelligent text selection detection with debouncing and rate limiting
  • Captures highlighted text, page titles, URLs, and timestamps
  • Filters out non-meaningful selections (single words, numbers, repetitive text)

Manual Saving & Organization

  • Quick-save via keyboard shortcuts (Alt+Shift+S)
  • Tag-based organization and custom notes
  • Pin important items and archive old content
  • Draft system for temporary captures

Full-Text Search

  • FlexSearch-powered indexing across all saved content
  • Searches titles, tags, notes, highlights, and AI summaries
  • Weighted scoring system prioritizing exact matches

Cross-Device Sync

  • Real-time synchronization via Supabase
  • Conflict resolution using timestamp-based merging
  • Efficient delta sync (only changed data)
  • Row-level security ensuring user data isolation

AI-Powered Summaries

  • Integration with OpenRouter for multi-model AI access
  • Generates intelligent summaries of saved content
  • Supports OpenAI, Anthropic Claude, Google Gemini, and open-source models
  • Mock provider for development/testing

End-to-End Encryption

  • Optional passphrase-based encryption using libsodium (Argon2id + XSalsa20-Poly1305)
  • WebCrypto fallback (PBKDF2 + AES-GCM)
  • Client-side encryption before cloud sync

Content Snapshots

  • Compressed storage of full page content using LZ-String
  • LRU (Least Recently Used) deletion policy with configurable limits
  • Pinning system to protect important snapshots

Data Retention Policies

  • Automatic deletion of drafts older than 7 days
  • Auto-archiving of old auto-flagged cards after 90 days
  • Scheduled hourly scans via service worker alarms

Architecture

Extension Components

  • Service Worker: Background process handling alarms, commands, and message routing
  • Content Scripts: Injected into web pages to capture text selections
  • Popup: Quick-access UI for saving current tab
  • Side Panel: Context-specific draft viewer
  • Dashboard: Full-featured management interface with search and filtering

Data Flow

  1. User selects text on webpage → Content script captures selection
  2. Message sent to service worker → Validated and routed to handler
  3. Data stored in IndexedDB (Dexie) → Indexed for search (FlexSearch)
  4. Optional: Encrypted with user passphrase → Synced to Supabase
  5. UI components query local database → Display with real-time updates

Message-Based Architecture

  • Typed message envelopes with validation
  • Request/response pattern with unique IDs
  • Error handling with structured error codes
  • Performance tracking for all operations

Tech Stack

Frontend

  • Preact - Lightweight React alternative
  • TypeScript - Type safety throughout
  • Vite - Fast builds and HMR

Data Layer

  • Dexie - IndexedDB wrapper for local storage
  • FlexSearch - Full-text search indexing
  • LZ-String - Content compression

Backend/Sync

  • Supabase - PostgreSQL + Auth + Real-time
  • Row-Level Security (RLS) - Data isolation policies
  • JWT - Authentication

Cryptography

  • libsodium-wrappers - Argon2id, XSalsa20-Poly1305
  • WebCrypto API - PBKDF2, AES-GCM fallback

AI Integration

  • OpenRouter API - Unified access to multiple AI models
  • Mock Provider - Testing and development

Testing

  • Vitest - Unit tests
  • Playwright - End-to-end extension testing
  • Testing Library - Component tests
  • Fake-IndexedDB - Database mocking

Build & Development

  • Multiple Vite configs - Main, service worker, content scripts
  • ESLint + Prettier - Code quality
  • Chrome Extension Manifest V3

Notable Implementations

Intelligent Selection Capture

Debouncing (1000ms) and rate limiting (2s minimum interval) prevent spam while filtering out non-meaningful selections using heuristics. Context invalidation detection handles page navigation gracefully.

Efficient Sync Algorithm

Content hashing detects actual changes (not just timestamp updates). Separate tracking for cards and snapshots with metadata persistence avoids redundant uploads. Batch operations optimize performance.

Snapshot Management

Compression reduces storage by ~70% on average. LRU deletion with configurable size limits (default 50MB) and pinning system protect important content. Truncation handles oversized content with metadata tracking.

Search Optimization

Weighted scoring prioritizes titles (10x), tags (8x), notes (5x), and highlights (3x). Bidirectional tokenization enables better partial matches with custom encoder for text normalization. Tie-breaking uses recency (lastOpenedAt).

Security Design

Passphrase never stored, only derived keys. Salt generation for each encryption operation with graceful fallback from libsodium to WebCrypto. Constant-time operations where possible.

Performance Monitoring

Built-in performance tracking utility with timeout protection on database queries (5s). Fallback queries when primary operations fail and extensive logging for debugging.

Use Cases

Target Users

  • Researchers gathering information across multiple sources
  • Students organizing study materials
  • Developers saving code snippets and documentation
  • Knowledge workers managing reference materials
  • Anyone who opens tabs with specific intent and wants to remember why

Real-World Scenarios

  1. Research: Highlight key passages while reading articles, automatically saved with context
  2. Learning: Save code examples with notes, searchable by topic or technology
  3. Shopping: Track products across sites with notes on pros/cons
  4. Job Hunting: Save job postings with application notes and deadlines
  5. Content Curation: Build a personal knowledge base with AI-generated summaries

Key Benefits

  • Reduces cognitive load by externalizing browsing context
  • Prevents information loss when closing tabs
  • Enables cross-device workflow continuity
  • Provides privacy-focused alternative to cloud bookmarking services
  • Supports offline-first usage with optional sync

Technical Highlights

This project demonstrates:

  • Browser Extension Architecture - Manifest V3 with service workers, content scripts, and multiple UI surfaces
  • Real-Time Data Synchronization - Conflict resolution, delta sync, and offline-first design
  • Cryptography Implementation - Passphrase-based encryption with multiple algorithm support
  • AI Integration - Multi-provider support with graceful fallbacks
  • Full-Text Search - Custom indexing with weighted scoring
  • Performance Optimization - Debouncing, rate limiting, compression, and LRU caching
  • Comprehensive Testing - Unit, integration, and E2E tests with mocking strategies
  • Modern Development Practices - TypeScript, modular architecture, extensive error handling

This project showcases modern web development practices, browser extension architecture, and full-stack integration skills suitable for production applications.