Notion Table of Contents Injector

WHAT IT DOES

This script adds a floating table of contents (TOC) sidebar to Notion pages. When you open a Notion page, the script scans the editor for all heading elements (h1 through h6), builds a hierarchical TOC based on the heading structure, and displays it as a sticky panel on the left or right side of the page. Each TOC entry is a clickable link that smoothly scrolls to the corresponding section. The current section is highlighted as you scroll, making it easy to track your position in long documents. You can choose between a compact style (no nesting) or an expanded style (shows nested headings). The TOC updates automatically as you edit the page.

WHERE IT RUNS

The script runs on all Notion pages (*.notion.so). It works on page editor views, excluding settings and other non-editor pages. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Show table of contents" toggle enables or disables the TOC.

- Choose the TOC position from the dropdown: "Left side" or "Right side."

- Choose the TOC style from the dropdown: "Compact (no nesting)" or "Expanded (with nesting)."

- Click "Refresh TOC" to manually rebuild the TOC.

The TOC appears automatically on Notion pages. Click any TOC entry to scroll to that section. The current section is highlighted as you scroll. Click the ✕ button to hide the TOC.

TECHNICAL SECTION — REAL MECHANISM

The script detects Notion page editor views by checking the URL for notion.so and excluding non-editor pages. It finds the editor container using selectors like .notion-page-content, .notion-scroller, and .notion-frame. Heading elements are extracted by searching for .notion-h1-block through .notion-h6-block class names, and by falling back to h1-h6 tags. Each heading's text content, level, and DOM element are stored. The TOC is built as a hierarchical tree by iterating through the headings and tracking the current nesting level based on heading levels. The TOC is rendered as a fixed-position container with a glassmorphism style. Each TOC item is an anchor link with a smooth scroll behavior. The scroll highlighting is implemented using a scroll event listener that checks each heading's offsetTop against the current scroll position, identifies the last heading above the viewport, and highlights the corresponding TOC link. The compact style shows all headings in a flat list, while the expanded style shows nested lists. A MutationObserver watches for DOM changes and updates the TOC when the user edits the page.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. Notion frequently updates its interface and class names, which may affect the selectors used to find the editor and headings. If the TOC stops working, please check for updates. The TOC is built from the rendered HTML headings—it requires the headings to be present in the DOM. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.