I vibe-coded an extension that auto-generates Table of Contents for any web page

Being a senior software engineer means reading and reviewing a lot of long Confluence documents. While the work itself is engaging, the lack of native navigation tools in Confluence often makes it a frustrating experience.

One such feature is a persistent Table of Contents (like on Notion) that is missing on Confluence and many similar products like Medium, Dev.to etc. I needed a quick way to navigate without losing my place. While a few extensions exist, none are sufficiently polished and fully open-source. Consequently, I couldn't risk installing them on my work machine without strict privacy and security guarantees.

Enter dtoc (Dynamic Table of Contents).

What is dtoc?

dtoc is an open-source browser extension that automatically generates a dynamic, floating Table of Contents for web pages. It scans the heading tags (H1-H6) on your current page and builds a clean, clickable navigation menu.

I initially built it strictly for my work laptop to survive Confluence. But once I had it running, I realized how useful it was for reading long-form articles on any web page. Additionally, I realized my strict focus on local execution and privacy could benefit others facing similar enterprise security constraints.

I expanded the extension to officially support:

• Confluence
• Medium
• Dev.to
• Beta: Universal support for any website (it attempts to parse standard heading structures dynamically).

How it Works

The lifecycle of dtoc is designed around local execution, style isolation, and performance:

1. Isolate & Render: Upon landing on a supported page, dtoc injects a floating UI container. To guarantee that our styling doesn't conflict with the host page (and vice-versa), the entire UI is encapsulated within a Shadow DOM and styled using vanilla CSS.
2. Identify & Structure: Built with a zero-dependency Vanilla JS stack, the extension reads the DOM to extract H1-H6 headings. It leverages targeted selectors for optimized platforms (like Confluence and Medium) and falls back to semantic HTML structure (main, article) on universal sites.
3. React to Changes: Since modern sites load content dynamically, we use a MutationObserver to watch for DOM shifts and reconstruct the navigation tree in real time.
4. Track & Scroll: Using a passive scroll listener ({ passive: true }) and getBoundingClientRect(), dtoc tracks your reading position to highlight the active section dynamically. Clicking any item triggers a smooth scroll to the target anchor.

Because it is built on Manifest V3 with minimalist permissions (storage and activeTab), there are no background network calls or telemetry. Your reading data never leaves your browser.

Where to get it

If you frequently read long documentation, articles, or tutorials, give it a try. It is currently available on:

• Chrome Web Store
• Firefox Add-ons
• Edge Add-ons (Note: Edge is currently on an older version, v3.0.0 is pending approval!)

Let's make it better

This started as a weekend solution to a weekday annoyance. It is entirely open-source, and I am actively looking for feedback, bug reports, and contributions—especially for improving the "universal website" beta parsing.

Check out the code, drop a star, or open a PR here:
👉 ashu-tosh-kumar/dtoc on GitHub

Let me know in the comments if this helps your workflow!