Reading the web with half-understood words everywhere

#ai #webdev #showdev #productivity

Every long article I read has the same problem: a word or concept I half-know that would make the whole paragraph click if I just looked it up. The tab-switch kills it. I open a new tab, read a bit, come back, and I've lost the thread. So I skip it, and the read stays shallow.

I built rabbitholes to fix that for myself. Highlight any text on any page, and a shadow-DOM tooltip renders an explanation from Claude Haiku 4.5 next to your cursor. It doesn't inject anything into the host page — shadow DOM keeps the overlay isolated, so it can't break layouts or leak styles into the site you're reading.

The part I use most: every word in the explanation is itself clickable. Drag across a phrase to select it. The tooltip rebuilds around that term, with the original context still in the background. You can go four hops deep into a Wikipedia article about Byzantine tax policy without opening a single new tab. A counter tracks how many hops you've taken; the trail is shareable.

If I want more than Claude's training data, a globe icon re-answers the same query enriched with Brave Search results, with source chips I can click through. A pencil icon opens a free-form follow-up that inherits the current context so I don't have to re-explain where I am in a topic.

The architecture constraint I cared most about: zero intermediary server. Requests go directly from the browser to api.anthropic.com and api.search.brave.com. Your Anthropic API key lives in chrome.storage.sync, encrypted, never touches my infrastructure. Manifest V3.

// The full round-trip is browser → Anthropic API, nothing in between
const response = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: {
    'x-api-key': apiKey,          // from chrome.storage.sync
    'anthropic-version': '2023-06-01',
    'content-type': 'application/json'
  },
  body: JSON.stringify({ model: 'claude-haiku-4-5', max_tokens: 512, messages })
});