Universal Table of Contents Sticky Sidebar

WHAT IT DOES

This script scans the current page for headings (h1-h6), builds a hierarchical table of contents based on heading structure, and displays a floating sticky sidebar showing the TOC with smooth scroll navigation. It detects heading levels and creates indented nested lists that reflect the page's content structure. As you scroll, the current section is highlighted in the TOC, and a progress indicator shows reading completion. Click any TOC item to scroll smoothly to that section. The sidebar can be collapsed or expanded, and you can adjust the maximum heading depth displayed (h1 through h6). Auto-generates anchor IDs for headings that don't have them, ensuring smooth navigation works on any page. Export the TOC as text or CSV for documentation or analysis. TOC snapshots are stored per domain locally for tracking page structure over time.

WHERE IT RUNS

Works on any webpage with heading elements—blog posts, articles, documentation, landing pages, or any content-rich site. The script scans the DOM for all h1-h6 elements and builds a hierarchy based on heading levels, making it compatible with most websites.

HOW TO USE

The TOC sidebar appears automatically when you visit a page with headings. It shows a hierarchical list of all headings with indentation indicating nested levels. The current section is highlighted as you scroll. Click any TOC item to scroll smoothly to that section. Use the "Depth" dropdown to control how many heading levels are shown (e.g., show only h1-h3 for a high-level overview). The sidebar can be collapsed to a compact icon and expanded again. Click the "Export TOC" button to copy the full table of contents as formatted text. The overlay closes with the Escape key or by clicking the close button. TOC snapshots are saved automatically each time you visit a page, building a history of page structure changes.

TECHNICAL MECHANISM: DOM TRAVERSAL WITH HIERARCHICAL HEADING BUILDING AND SCROLL TRACKING

The script uses DOM traversal to find all heading elements (h1-h6). It collects each heading's text content, level, and element reference. For headings without an id attribute, it auto-generates a unique ID using a slugified version of the heading text, with counter-based uniqueness to avoid collisions. The headings are then organized into a hierarchical tree structure using a stack-based algorithm: the script iterates through headings in document order, maintaining a stack of parent nodes; when a heading's level is greater than the current stack top's level, it becomes a child; when the level is less than or equal, it pops back up. The TOC is rendered as a nested list with indentation controlled by the max depth setting. Scroll tracking uses a throttled scroll event listener that checks each heading's position relative to the viewport, finding the heading closest to the top within the upper half of the viewport and updating the active highlight. The sidebar is implemented as a full-frame overlay with a backdrop blur effect, positioned at z-index 2147482000 with fixed positioning, and scroll lock is applied to the page body.

THE PANEL

The table of contents appears as a full-frame overlay with a backdrop blur, centered card layout, and sticky positioning. The TOC list scrolls independently within the card. Drag is not applicable (full-frame mode), but the panel supports collapse/expand and Escape key to close. The sidebar snaps to edges and remembers position per site. All settings—max depth, collapse state, and position—persist per website using GM_setValue, so your view returns exactly as you left it. The progress indicator shows how much of the page's content has been scrolled through.

PLEASE NOTE

This script requires the free BotGentz extension to run. The TOC is built from headings present in the DOM at the time of page load—dynamically loaded headings may not be included without a manual refresh. The auto-generated IDs are added to heading elements, which may affect page scripts that rely on existing IDs. The scroll tracking is based on heading position within the viewport and works best on pages with well-structured heading hierarchies. Exporting the TOC copies plain text or CSV format to the clipboard. All data is stored locally in your browser via GM_setValue and never transmitted. The full-frame overlay uses backdrop-filter: blur() which may impact performance on low-end devices.