DEV Community

J Now
J Now

Posted on

Inline Wikipedia for every page you read

Every article I read has words I half-know. Proper nouns I recognize but can't define. Concepts that would open up with thirty seconds of context. The standard fix — open a new tab, search, read, come back — costs more than it returns. By the time I'm back on the original page I've lost the thread, and half the time I just stop bothering and skim past things I don't understand.

So I built rabbitholes: a Chrome extension that turns any selected text into an inline explanation rendered next to your cursor, without opening anything or leaving the page.

The tooltip renders in a shadow DOM so it never touches the host page's styles. Requests go directly from your browser to api.anthropic.com — no intermediary server, zero telemetry. The Anthropic key lives in chrome.storage.sync.

The part I use most: every answer ends with two suggested rabbit-hole topics, and every word in the explanation is itself clickable. You can drag across a phrase to go wider, or click a single term to go deeper. Each hop increments a counter in the corner.

That counter turned out to be the feature that surprised me most. I added it mostly for fun — the Wikipedia philosophy game, where every article eventually leads to Philosophy if you click the first link. Turns out the same thing happens with real reading. Start on a piece about Roman concrete, click "pozzolana," click "volcanic ash," click "Plinian eruption," and five hops later you have a shareable trail of exactly what you learned and how you got there. The trail is the artifact.

The Globe icon re-runs the query enriched with Brave Search results and surfaces source chips you can click through. Useful when you want primary sources rather than a synthesized answer.

// The shadow DOM isolation in one line:
const shadow = container.attachShadow({ mode: 'closed' });
Enter fullscreen mode Exit fullscreen mode

Closed mode means no external CSS leaks in, no host page JS can reach the tooltip's internals. That was the main reason to use shadow DOM over an iframe — iframes can't match the host page's font stack without FOUC, and the tooltip needs to feel native to wherever you are.

https://github.com/robertnowell/rabbitholes

Top comments (0)