AI Chat TOC
A live table of contents for long AI conversations — across five platforms and three add-on stores.
Solo build — vanilla JavaScript on the WebExtensions API, dual Manifest V2/V3 targets, zero framework.
The Problem
Long AI chat threads become unnavigable — finding an earlier answer means endless scrolling. Worse, every provider renders conversations with a different DOM structure, and keeps changing it.
The Approach
A single shared source that ships to Chrome/Edge (Manifest V3) and Firefox (Manifest V2) through PowerShell build scripts. A throttled DOM observer rebuilds the outline in near real time, and users get keyword search, AI-answer previews, drag-and-drop positioning, per-site position memory, and export to text or markdown.
Architecture
- 01
Dual-manifest cross-browser core
One src/ tree plus two manifests — MV3 for Chrome/Edge, MV2 for Firefox — packaged into store-ready zips, so feature work happens once.
- 02
Adaptive DOM parsing
A per-platform site config tracks conversation structure across ChatGPT, Gemini, Perplexity, Claude, and Grok, with per-platform accent theming.
- 03
Throttled observation
500ms intelligent throttling with idle safety checks — the TOC updates instantly as messages arrive, with near-zero perceptible lag.
- 04
Navigation tooling
Search and filter across queries and AI answer text, toggleable inline answer previews, drag-and-drop repositioning, bidirectional resize, and per-site position memory.
- 05
Export & shortcuts
Copy or download the outline as text or markdown; Ctrl+Shift+F toggles visibility, customizable natively in each browser.
Stack & Trade-offs
Zero-framework vanilla JS
No build toolchain and no framework runtime — maximum store compatibility and a minimal footprint for a utility extension.
Throttle, don't react
Naive DOM observation stutters heavy chat pages; 500ms throttling with idle checks makes updates invisible to the user.
One source, two manifests
MV2/MV3 differences are isolated in the manifests, so the same feature ships to all three stores without forking the codebase.
Key Highlights
- 500+ active users across the Chrome, Edge, and Firefox add-on stores
- Live TOC across ChatGPT, Gemini, Perplexity, Claude, and Grok — with search, answer previews, and markdown export
- Near-zero-lag updates via 500ms throttled DOM observation with idle safety checks
Screenshots
What I Learned
- Shipping to real users on three extension stores teaches defensive engineering — provider DOMs change without notice, so the parser must fail soft.
- Throttling and idle checks turned a laggy prototype into something invisible — the best performance work is the kind users never notice.
- Distribution is a feature: store listings, reviews, and versioned releases are part of the product, not an afterthought.