DEV Community

nexio-labs
nexio-labs

Posted on

I built a Claude AI sidebar extension for the browser — here’s how

I spend a lot of time reading docs, articles, and research papers. The constant tab-switching to ask Claude about what I'm reading was killing my flow.

So I built a Chrome extension that injects a Claude-powered sidebar into every webpage.

What it does

  • Summarize — one click to get the full page summarized
  • Key points — bullet-point extraction of the most important info
  • Explain selection — highlight any text, get an explanation
  • Improve selection — highlight text you've written, get a rewrite
  • Chat — full conversational mode with the page content as context

Alt+A toggles it open/closed from anywhere.

Technical stack

  • Manifest V3 Chrome extension
  • Shadow DOM for UI isolation (no style conflicts with host pages)
  • Service worker background script for Claude API calls
  • anthropic-dangerous-direct-browser-access header for direct API calls
  • Claude Haiku for speed, Sonnet for longer outputs

The CORS issue I hit

Calling Claude API directly from a browser extension causes a CORS error unless you add the anthropic-dangerous-direct-browser-access: true header. Took me a while to find that in the docs.

It's available

I packaged it up for $9 if you want to skip building it yourself: Nexio AI Extension on Gumroad

The zip includes the full source code so you can load it as an unpacked extension or learn from it.


Happy to answer questions about the implementation in the comments!

Top comments (0)