Awesome TOC

A browser extension that generates an interactive, draggable table of contents for any webpage.

Features

• 🚀 Automatically extracts headings (H1-H5) from web pages
• 🎯 Smart heading hierarchy detection and nesting
• 🖱️ Draggable TOC panel that can be positioned anywhere on the page
• 🎨 Collapsible interface with visual indicators
• 📍 Auto-highlights current section while scrolling
• ⚡ Smooth scroll to sections when clicking TOC items
• ⌨️ Keyboard shortcut support for toggling TOC
• ⚙️ Configurable auto-load settings

Installation

You can install Awesome TOC in two ways:

1. Chrome Web Store (Recommended)

   • Visit Chrome Web Store
   • Click "Add to Chrome" to install

2. Manual Installation (Developer Mode)

   • Download the source code
   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" in the top right
   • Click "Load unpacked" and select the extension directory

Usage

1. After installation, the TOC panel will appear on the top-right corner of compatible web pages
2. Drag the panel using the colored button to reposition it
3. Click the colored button to collapse/expand the TOC
   • Green: TOC is expanded
   • Red: TOC is collapsed
4. Click on any heading in the TOC to smoothly scroll to that section
5. Use the keyboard shortcut (configurable) to toggle the TOC visibility

Options

Access the extension options to configure:

• Auto-load settings: Enable/disable automatic TOC generation when visiting pages

Development

This extension is built using:

• React for UI components
• Ant Design for the component library
• TypeScript for type safety
• WXT for browser extension development

License

This project is licensed under the MIT License - see the LICENSE file for details.