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

Source: Dev.to

Overview

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.

Features

• Summarize – One click to get the full page summarized.
• Key points – Bullet‑point extraction of the most important information.
• Explain selection – Highlight any text and get an explanation.
• Improve selection – Highlight text you’ve written and get a rewrite.
• Chat – Full conversational mode with the page content as context.
• Toggle – Alt+A opens/closes the sidebar from anywhere.

Technical Details

• 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.
• Uses Claude Haiku for speed and Claude Sonnet for longer outputs.
• Calling the Claude API directly from a browser extension causes a CORS error unless you add the anthropic-dangerous-direct-browser-access: true header (found in the docs after some digging).

Packaging

I packaged the extension 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.

Support

Happy to answer questions about the implementation in the comments!