我为浏览器构建了 Claude AI 侧边栏扩展——操作方法

Source: Dev.to

概览

我花了大量时间阅读文档、文章和研究论文。不断切换标签页去向 Claude 询问我正在阅读的内容严重打断了我的思路，于是我制作了一个 Chrome 扩展，它会在每个网页中注入一个由 Claude 驱动的侧边栏。

功能

• 摘要 – 一键获取整页内容的摘要。
• 要点 – 以要点形式提取最重要的信息。
• 解释选中内容 – 高亮任意文本即可获得解释。
• 改进选中内容 – 高亮你写的文本，获取改写建议。
• 聊天 – 完整的对话模式，页面内容作为上下文。
• 切换 – Alt+A 可在任意位置打开/关闭侧边栏。

技术细节

• Manifest V3 Chrome 扩展。
• Shadow DOM 用于 UI 隔离（避免与宿主页面样式冲突）。
• Service worker 背景脚本负责 Claude API 调用。
• anthropic-dangerous-direct-browser-access 头部用于直接 API 调用。
• 使用 Claude Haiku 以获得快速响应，使用 Claude Sonnet 以获得更长的输出。
• 直接在浏览器扩展中调用 Claude API 会出现 CORS 错误，除非添加 anthropic-dangerous-direct-browser-access: true 头部（在文档中经过一番搜索后找到）。

打包

如果你不想自己动手构建，我已将扩展打包出售 $9：
Nexio AI Extension on Gumroad

压缩包中包含完整源码，你可以将其作为未打包扩展加载，或用于学习参考。

支持

欢迎在评论区提问，我会解答实现细节！