DEV Community

J Now
J Now

Posted on

When a word stops you cold, you shouldn't have to leave the page

Here's the pattern that drove me to build this: reading a dense article, hit a term I half-know — say, "apophenia" — open a new tab, read the Wikipedia entry, open two more tabs from that, come back six minutes later with no idea where I was in the original piece. The article is still there. My thread of thought isn't.

rabbitholes is a Chrome extension that renders an inline explanation next to your cursor when you highlight text. The tooltip lives in a shadow DOM so it doesn't touch the host page's styles or layout. You never leave the article.

The part I use most: every word in the explanation is itself clickable. Highlight "apophenia," read the explanation, notice the word "pareidolia" in the response, drag across it — new explanation, same inline panel, same page. The rabbit-hole counter ticks up. You can go six hops deep into a concept tree without a single new tab.

Two suggested follow-on topics appear at the bottom of each answer — not random, but the most interesting threads from that specific explanation. There's also a globe icon that re-runs the query enriched with Brave Search results, with source chips you can open if you want to verify something.

Requests go directly from your browser to api.anthropic.com. No intermediary server, zero telemetry, no analytics. Your Anthropic API key lives in chrome.storage.sync and never leaves the browser.

// shadow DOM attachment keeps tooltip styles isolated from host page
const shadow = container.attachShadow({ mode: 'open' });
Enter fullscreen mode Exit fullscreen mode

The reason for shadow DOM over an iframe overlay: iframes can't inherit host-page fonts without a flash of unstyled content, and matching typography matters when the tooltip is sitting inline with an article you're reading.

https://github.com/robertnowell/rabbitholes

Top comments (0)