Outline Builder

WHAT IT DOES

Outline Builder is a browser extension that scans any webpage for headings (H1 through H6) and builds a hierarchical outline of the page structure. It displays the outline as a clean, collapsible tree with each heading shown at its appropriate indentation level. Click any heading in the outline to smoothly scroll to that section on the page. You can toggle the display of text snippets from the paragraph following each heading, giving you quick previews of the content under each section. The outline can be copied to your clipboard as plain text or as Markdown-formatted headings. The tool is ideal for researchers, students, writers, and anyone who wants to quickly understand the structure of a long document, article, or web page.

WHERE IT RUNS

Outline Builder works on any webpage that contains heading elements (H1-H6). It runs locally in your browser as a lightweight userscript, scanning the page's DOM for headings and their hierarchy. It works on articles, blog posts, documentation pages, academic papers, news sites, and any other page with structured headings. The tool handles static pages, dynamically loaded content via AJAX, and single-page applications where headings can appear and disappear without page reloads. All processing occurs entirely in your browser—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel automatically scans the current page and displays a hierarchical outline of all headings found. The outline is indented to reflect the heading level, with H1 at the top and H6 at the deepest level. Click any heading in the outline to scroll to that section on the page. Use the "Show text snippets" toggle to display preview text from the paragraph following each heading—this is useful for quickly understanding the content under each section without reading the full page. Click the Refresh button to rescan the page if content has changed. Click the "Text" button to copy the outline as plain text (indented with spaces). Click the "MD" button to copy the outline as Markdown (with # symbols for headings). All settings are saved per domain.

REAL MECHANISM — WHY THIS WORKS

Most outline generators rely on parsing the page's HTML as a string or using complex document parsing that can break on malformed or dynamic content. Outline Builder uses a DOM-traversal approach that works directly with the live document structure. The tool queries the page for all heading elements using document.querySelectorAll("h1, h2, h3, h4, h5, h6") and iterates through them in document order, preserving the exact hierarchy as they appear on the page. For each heading, it reads the tag name to determine the level (e.g., H2 = level 2) and extracts the text content. To build the outline tree, the tool uses a stack-based algorithm that tracks the current heading level and parent-child relationships—when a heading of a lower level appears, it becomes a child of the most recent heading of a higher level. For text snippets, the tool examines the next sibling element after each heading and checks if it is a paragraph (p) element, extracting its text content if present. The outline rendering uses nested unordered lists with click handlers that call scrollIntoView on the original heading element using its ID (or generating one if missing). This approach ensures accurate, responsive, and fully private outline generation without requiring any external services.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the outline. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and snippet visibility state—are saved per domain for a seamless experience.

PLEASE NOTE

Outline Builder requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. Because websites frequently update their structure, heading detection may require periodic script updates to maintain compatibility with specific sites. If the tool does not detect headings as expected, please check for updates or report the issue. All processing occurs entirely in your browser. No page content, heading data, or outline information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only reads the DOM to detect headings and displays them locally at your request.