Auto Table of Contents Generator

WHAT IT DOES

Auto Table of Contents Generator scans any webpage for heading elements (h1 through h6) and builds a nested, hierarchical table of contents based on the document's structure. The TOC is inserted at the top of the article or as a floating sidebar, with each entry linking to its corresponding section via smooth scroll. The extension supports multiple styles—bulleted, numbered, or indented (no markers)—and automatically collapses deep nesting to keep the TOC clean and readable. A toggle button lets you show or hide the TOC. The TOC updates dynamically when page content changes, making it ideal for documentation, long articles, and single-page applications. Each heading is assigned a unique ID if one doesn't exist, ensuring reliable linking.

WHERE IT RUNS

The extension works on every website with structured heading content, including documentation pages, technical articles, long-form blog posts, wikis, manuals, and any other page with multiple heading levels. It runs locally in your browser, analyzing the page's DOM and generating the TOC without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically generates a table of contents on eligible pages (if auto-generate is enabled). The TOC appears at the top of the article or as a floating sidebar based on your settings. Click any TOC entry to smoothly scroll to that section—the target heading briefly highlights to confirm navigation. Use the "Hide" or "Show" button on the TOC to toggle visibility. To customize the TOC, open the extension panel and choose your preferred position (top of article, bottom of article, or floating sidebar). Select a style (bulleted, numbered, or indented). Choose which heading levels to include (h1-h6, h1-h4, h1-h3, h1-h2, or h1 only). For per-site customization, set a unique position for specific websites. Click "Generate TOC Now" to refresh the TOC manually, or "Remove TOC" to hide it.

THE ACTUAL MECHANISM — HEADING HIERARCHY PARSING WITH NESTED LIST GENERATION

The extension uses a heading hierarchy parser that scans the page for heading elements matching the user's selected levels. It builds a nested tree structure by tracking heading levels relative to the lowest heading present. The parser maintains a stack of parent headings; when a new heading is encountered, it pops from the stack until it finds a parent with a lower heading level, then adds the new heading as a child. This creates a properly nested hierarchy regardless of missing intermediate heading levels. Each heading is assigned a unique ID using a slug generated from its text content (lowercased, stripped of special characters, spaces replaced with hyphens) with deduplication counters for duplicate headings. The TOC is rendered as an unordered list where each list item has a class indicating its heading level (toc-level-h1 through toc-level-h6) for indentation control. Click handlers are attached to each TOC link using `addEventListener` with `scrollIntoView({ behavior: 'smooth', block: 'start' })` and a brief highlight animation on the target element. The TOC container is inserted either at the top or bottom of the main content container (detected via common article selectors), or as a fixed position floating sidebar. A MutationObserver watches for DOM changes and regenerates the TOC when heading content changes, ensuring the TOC stays in sync with dynamic pages.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, generate/remove buttons, auto-generate toggle, position selector, style selector, heading levels selector, per-site position override, and per-site enable/disable controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The TOC generation relies on proper heading structure—pages without heading elements or with inconsistent heading hierarchies may produce incomplete or malformed TOCs. The extension assigns IDs to headings that lack them, which could potentially interfere with existing scripts; however, this is necessary for reliable navigation. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.