Web TOC Assistant

Auto-generate TOC for any webpage with CSS selector support. Click icon to enable/disable per site.

# Web TOC Assistant - Automatically Generate Table of Contents for Any Webpage ## What is Web TOC Assistant? Web TOC Assistant is a browser extension that automatically generates a floating, interactive table of contents (TOC) for any webpage you visit. It transforms long, scrolling pages into easily navigable documents with just one click. ## Why Install Web TOC Assistant? ### 📚 Perfect for Long-Form Content Stop scrolling endlessly through long articles, technical documentation, tutorials, and blog posts. Web TOC Assistant automatically detects headings (h1-h6) and creates a navigation panel that lets you jump to any section instantly. ### 🎯 Works on Any Website Unlike some TOC tools that only work on specific platforms, Web TOC Assistant works everywhere: - **Technical Documentation** - API docs, programming guides, tutorials - **Blog Articles** - Medium, personal blogs, news sites - **Forum Posts** - Reddit, Stack Overflow, community forums - **Research Papers** - Academic articles, PDFs converted to HTML - **Online Courses** - Step-by-step tutorials, learning platforms ### ⚙️ Highly Customizable Every website is different. Web TOC Assistant adapts to your needs: - **Custom Selectors** - Use CSS or XPath selectors to target specific elements - **Visual Element Picker** - Simply click on any element to create a custom selector - **Per-Site Control** - Enable/disable the extension for individual websites - **Position Memory** - Drag the floating button anywhere; it remembers your preference ### 🌙 Dark Mode Support Automatically adapts to your browser's theme: - **Light Theme** - Clean white background with dark text - **Dark Theme** - Easy on the eyes with dark background and light text - **Automatic Detection** - Seamlessly switches based on your system preferences ### 🌐 Fully Internationalized - **English** - Full support for English-speaking users - **中文** - Complete Chinese support - **Auto-detection** - Automatically switches to your browser's language (defaults to English) ## Key Features ### Automatic TOC Generation - **Automatic Header Detection** - Recognizes standard HTML headings (h1-h6) by default - **Enhanced Visibility Detection** - Advanced filtering using computed styles, bounding rects, and parent clipping checks - **Content Filtering** - Skips hidden elements, zero-size elements, and overflow-clipped content - **Real-time Updates** - Automatically rebuilds TOC when page content changes - **Debounced Scanning** - 500ms debounce prevents excessive updates ### Visual Element Picker - **Hover Highlighting** - See exactly what you're selecting in real-time - **One-Click Selector Generation** - Automatically creates CSS selectors - **Site Configuration Saving** - Save selectors as per-site preferences - **Individual Selector Management** - Delete selectors one at a time with hover-to-show delete button ### Flexible UI - **Floating Panel** - Expandable TOC panel with left/right side positioning - **Draggable Panel Header** - Drag the panel header to reposition; position automatically saved - **Draggable TOC Button** - Collapsed "TOC" button that you can position anywhere - **Position Memory & Sync** - Remembers button and panel position per domain; positions synchronize when collapsing/expanding - **Smooth Animations** - Fluid panel expand/collapse transitions for better user experience - **Smooth Scrolling** - Click any TOC item to smoothly scroll to that section - **Theme-Aware Design** - Adapts to light/dark mode automatically - **Fixed Width Dialogs** - All dialogs maintain consistent 280px width with text ellipsis - **Dialog Mutual Exclusion** - Only one dialog shown at a time for cleaner UI ### Auto Navigation - **Current Position Highlighting** - Automatically highlights your current reading location - **Navigation Locking** - Prevents jumping when you manually click TOC items - **Active Item Recovery** - Restores highlight state after page changes ## How It Works ### Basic Usage 1. **Install** the extension from the Edge/Chrome Web Store 2. **Visit any webpage** - The floating "TOC" button appears 3. **Click the button** to expand the TOC panel 4. **Navigate** - Click any heading to jump to that section ### Advanced Usage 1. **Per-Site Control** - Click the extension icon to enable/disable for specific sites 2. **Custom Selectors** - If the default TOC isn't accurate: - Click "Pick Element" - Hover over elements on the page - Click to select the element you want to track - Save as a site configuration 3. **Manage Selectors** - In site configuration dialog: - View all saved selectors for current site - Hover over any selector to reveal delete button - Click ✕ to remove individual selectors 4. **Reposition UI** - Drag the TOC button or panel header to any position; positions are saved and synchronized ### Theme Switching The extension automatically detects your browser's theme setting: - **Light Mode**: White background with dark text - **Dark Mode**: Dark gray background with light text for comfortable viewing No manual configuration required - it just works! ## Use Cases | Scenario | Before | After | |----------|--------|-------| | **Reading API Docs** | Scroll through 50+ sections | Click to jump instantly | | **Long Blog Posts** | Lose your place while skimming | See structure, jump anywhere | | **Research Papers** | Manually search for sections | TOC shows all sections | | **Online Tutorials** | Scroll back to find previous steps | Navigate step-by-step easily | | **Forum Threads** | Hunt for specific discussions | Jump to relevant comments | | **Night Reading** | Eye strain from bright white backgrounds | Dark mode protects your eyes | ## What's New ### Latest Version For detailed version history and updates, please visit: https://github.com/BingqiangZhou/WebContentOutline-BrowserExtension/blob/main/CHANGELOG.md --- ## Permissions & Privacy - **storage** - Saves your site configurations and preferences locally - **tabs** - Enables per-site enable/disable functionality **No data is sent to any server.** All configurations are stored locally in your browser. ## Install Now Ready to transform your browsing experience? Install Web TOC Assistant and start navigating the web more efficiently. --- **Note**: This is a lightweight, open-source extension. Source code available on https://github.com/BingqiangZhou/WebContentOutline-BrowserExtension . Contributions welcome!