Table of Contents Generator

WHAT IT DOES

The Table of Contents Generator scans the current webpage for all heading elements (H1 through H6) and builds a structured, hierarchical outline of the page's content. It preserves the heading levels to create an indented tree that mirrors the document's logical structure. Clicking any entry in the table smoothly scrolls the page to bring that heading into view, with a subtle highlight animation to indicate the target. The tool supports filtering to include only headings at or below a specified level, and you can exclude specific sections using CSS selectors. A floating badge can be placed anywhere on the screen for one-click access to the TOC panel, making navigation of long articles, documentation, and tutorials effortless.

WHERE IT RUNS

This userscript works on any website that uses standard HTML heading tags. Whether you are reading a technical blog post, studying documentation, reviewing a long-form article, or browsing an educational resource, the TOC generator adapts to the page structure automatically. It runs entirely within your browser, requiring no external servers or third-party services.

HOW TO USE

After installation, the panel appears as a floating widget. The TOC automatically generates on page load if the auto-generate setting is enabled. You can customize the minimum heading level to show (e.g., start at H2 to skip top-level titles), and specify CSS selectors to exclude headings that should not appear in the TOC. A floating badge can be enabled for quick access without keeping the panel open — click the badge to open the panel and generate the TOC. Use the "Copy TOC as Text" button to export the outline for notes or documentation. All settings are saved automatically.

TECHNICAL MECHANISM — DOM HEADING TREE CONSTRUCTION WITH ID ANCHORING

The TOC generator uses a two-phase traversal of the page's heading elements. In phase one, it queries all H1-H6 tags using document.querySelectorAll, then applies the user's exclusion selectors via a Set-based filter to avoid re-scanning excluded subtrees. It captures each heading's text content (preserving whitespace with .textContent.trim()) and its hierarchical level from the tag name's numeric suffix. For headings without an id attribute, the script programmatically assigns a unique id (prefixed with "toc-" and a timestamp) to enable direct anchor scrolling. Phase two builds a nested tree structure using a stack-based algorithm that maintains level ordering: as headings are iterated, the script tracks the current depth and attaches each node as a child of the nearest ancestor with a lower level. This produces a pure JavaScript object tree that mirrors the document's outline, independent of DOM parent-child relationships. The tree is then rendered into nested unordered lists using DOM methods (not innerHTML), ensuring safe handling of any heading text.

THE PANEL

The panel is fully draggable and remembers its position per site using GM_setValue. It can be collapsed to a small bubble when not in use and expanded with a single click. The panel supports resizing and includes a snap-to-edge behavior for tidy placement. Pressing the Escape key closes the panel. All interactions are non-blocking and do not interfere with the underlying page functionality.

PLEASE NOTE

This userscript requires the free BotGentz browser extension to function. Web standards and site structures change over time; if the script stops working as expected, check for updates or contact support. The script does not read, store, or transmit any personal data, passwords, or input fields — it only processes visible heading elements and stores your settings locally in GM_setValue storage. No analytics, tracking, or external data sharing is performed.