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

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!