DEV Community

J Now
J Now

Posted on

Inline Wikipedia for every page you read

Reading about the Dreyfus Affair last week, I hit 'syndicalism' and made a decision I've made a thousand times: keep going and stay shallow. Opening a new tab meant losing the thread. Skipping meant half-understanding the rest of the article.

So I built rabbitholes — a Chrome extension that renders an explanation next to your cursor when you highlight text, inside a shadow-DOM tooltip that doesn't touch the host page's styles or layout.

The part I actually use most: every explanation ends with two suggested rabbit-hole topics. One click on either fires off the next query, inheriting the context of where you started. There's a hop counter so you can see how far you've wandered — highlight a word in a physics article, follow a thread, and you can end up at philosophy with a shareable trail of every step.

If the inline explanation isn't enough, a globe icon re-runs the query enriched with Brave Search results, with source chips you can click through. A pencil icon opens a follow-up input that already knows what you were asking about.

No intermediary server. Your API key lives in chrome.storage.sync and requests go directly to api.anthropic.com. Zero telemetry, Manifest V3.

// Shadow DOM prevents tooltip styles from bleeding into host pages
const shadow = container.attachShadow({ mode: 'closed' });
// Closed mode: host page JS can't query into the tooltip at all
Enter fullscreen mode Exit fullscreen mode

The closed shadow root matters specifically because some sites run scripts that walk the DOM — an open shadow root would expose the tooltip to those traversals.

https://github.com/robertnowell/rabbitholes

Top comments (0)