DEV Community

J Now
J Now

Posted on

I built a rabbit-hole counter for my reading habit

The Wikipedia philosophy game — click any link long enough and you end up at Philosophy — works because concepts nest inside concepts. I wanted that on every page I read, not just Wikipedia, and I wanted to know how deep I'd gone.

rabbitholes tracks each hop. Highlight a word, get an inline explanation via Claude Haiku 4.5 rendered in a shadow DOM tooltip that doesn't touch the host page's styles. Click any word in that explanation to go one level deeper. The extension counts each jump, and if you reach philosophy, it generates a shareable trail of your path.

The shadow DOM choice matters here: iframes can't inherit the host page's fonts without flash-of-unstyled-content, and injecting raw DOM nodes risks CSS collisions with whatever page you're reading. Shadow DOM keeps the tooltip self-contained.

Two suggested threads appear at the bottom of every answer — the most interesting directions from wherever you landed. A pencil icon opens a free-form follow-up that inherits the current context, so you don't re-explain what you were reading. A globe icon re-runs the query enriched with Brave Search results, with source chips you can click through.

Zero analytics, zero telemetry, no intermediary server. Your Anthropic and Brave API keys live in chrome.storage.sync and requests go browser-to-API directly.

// The rabbit-hole counter increments on every nested lookup
function recordHop(term, depth) {
  chrome.storage.session.get(['trail'], ({ trail = [] }) => {
    chrome.storage.session.set({ trail: [...trail, { term, depth }] });
  });
}
Enter fullscreen mode Exit fullscreen mode

The shareable trail was the feature I didn't know I wanted until I hit philosophy in 23 hops reading about Byzantine fault tolerance and wanted to show someone.

github.com/robertnowell/rabbitholes

Top comments (0)