Web Toc Assistant

# 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!