Heading Structure Outliner

WHAT IT DOES

Heading Structure Outliner extracts every heading (H1 through H6) from the current page and displays them in a clean, hierarchical outline. The tool shows heading text with proper indentation reflecting the heading level, making it easy to visualize the document's structure at a glance. Click any heading in the outline to scroll the page to that heading and highlight it with a colored border. The display includes heading counts per level, identifies skipped levels (e.g., H2 directly under H4 without an H3), and flags missing headings. The outline panel is draggable and can be repositioned to any corner of the screen for convenient access while browsing.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All heading extraction, DOM traversal, and outline rendering occur on your machine without any network requests. No page content, heading data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Heading Structure Outliner panel. Click "Show Outline" to display the hierarchical heading list as a floating overlay on the page. The outline shows each heading with indentation based on its level (H1 through H6). Click any heading in the outline to scroll the page to that heading and highlight it temporarily. Use the "Refresh Outline" button to update the display if the page content changes dynamically. Change the outline position using the dropdown selector (Top centered, Left, Right, Bottom centered). Toggle "Show level counts" to display the number of headings at each level. Toggle "Show skipped levels" to see warnings for missing heading levels. Click "Copy Headings" to copy the complete heading hierarchy to your clipboard.

THE DOM TRAVERSAL AND STRUCTURE ANALYZER — WHY IT WORKS

Most heading extractors simply collect heading tags in document order without understanding their relationships. This tool performs a more sophisticated analysis: it first queries all heading elements using a single DOM selector, then builds a hierarchical tree by tracking the heading level transitions. When a heading of a higher level appears, it becomes a child of the nearest lower-numbered heading. The tool also validates the heading structure against accessibility best practices, identifying missing levels (like jumping from H1 to H3 without an H2) and flagging them visually. The click-to-highlight feature uses the element's getBoundingClientRect to calculate precise positioning and smooth scrolling, while the highlight overlay uses fixed positioning with a semi-transparent border that fades after three seconds, providing clear visual feedback without permanent page modification.

THE PANEL

The Heading Structure Outliner panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the outline display and controls adjust proportionally. Press the Escape key to close the panel instantly, though the outline overlay remains visible if toggled on. The panel maintains independent state for each browser tab, allowing you to analyze heading structures in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their page structures; while the heading extraction works across all modern sites, dynamic content loaded after page load may require manual refresh. All heading data is computed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.