# I Vibe-Coded an Extension That Auto-Generates a Table of Contents for Any Web Page

> Why I built dtoc, an open-source, privacy-first browser extension that adds a floating table of contents to Confluence, Medium, Dev.to, and other long pages.

- Author: [Ashutosh Kumar](https://uncommonlydone.com/profile)
- Published: 2026-06-19 (first published on DEV: https://dev.to/atkumar/i-vibe-coded-an-extension-that-auto-generates-table-of-contents-for-any-web-page-1c9g)
- Web page: https://uncommonlydone.com/blog/i-vibe-coded-an-extension-that-auto-generates-table-of-contents-for-any-web-page
- Tags: javascript, browser-extension, open-source

---

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).

![Screenshot showing dtoc on Dev.to on current article](https://uncommonlydone.com/blog/i-vibe-coded-an-extension-that-auto-generates-table-of-contents-for-any-web-page/01.webp)

## 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](https://chromewebstore.google.com/detail/dtoc/iikddlbkfdmlbhlfhgdkoebpimljflfl)
- [Firefox Add-ons](https://addons.mozilla.org/en-GB/firefox/addon/dtoc/)
- [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/dtoc/kibljloiohjclbilhjmlfmahhdionhgc)

## 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](https://github.com/ashu-tosh-kumar/dtoc)**