LuminaSider 是一款基于 Chrome 浏览器扩展 (Manifest V3) 的侧边栏 AI 助手。它打破了传统 AI 助手需要频繁切换标签页的体验，在用户当前浏览的网页旁注入一个侧边栏，提供“伴随式浏览”与“基于当前网页上下文的精准问答”能力。
- 📖 网页上下文感知：自动提取当前网页的纯净正文（基于 Mozilla Readability），AI 能够“看到”你正在阅读的内容，从而提供精准的总结、翻译和解释。
- 🤖 双引擎驱动：
- Google Gemini：深度适配 Gemini 3.1 Flash/Pro，支持超长上下文窗口。
- OpenAI 兼容接口：支持无缝接入 OpenAI、DeepSeek、Claude 等任何兼容 OpenAI 格式的第三方中转 API。
- ⚡ 极致流畅体验：
- 支持 Server-Sent Events (SSE) 流式输出，打字机效果，拒绝等待焦虑。
- 支持多模态交互，可直接粘贴或上传图片给 AI 进行视觉分析。
- 🎨 Notion 级极简美学：基于 Tailwind CSS 打造的极简 UI，支持 Markdown 完美渲染、代码高亮及一键复制。
- 🔒 隐私与性能优先：
- API Key 仅保存在浏览器本地。
- 采用轻重数据解耦架构：配置项存入
chrome.storage，庞大的网页快照和图片附件存入本地IndexedDB，彻底告别主线程阻塞与卡顿。
- 在 GitHub Releases 页面下载最新的
luminasider-extension.zip压缩包并解压。 - 打开 Chrome 浏览器，在地址栏输入
chrome://extensions/并回车。 - 在右上角开启 “开发者模式” (Developer mode)。
- 点击左上角的 “加载已解压的扩展程序” (Load unpacked)。
- 选择解压后的文件夹即可。
- 建议将插件固定 (Pin) 在浏览器右上角，方便随时唤出。
确保你的电脑已安装 Node.js (推荐 v18+)。
# 1. 克隆仓库
git clone https://github.com/yourusername/LuminaSider.git
cd LuminaSider
# 2. 安装依赖
npm install
# 3. 启动开发服务器 (支持热更新 HMR)
npm run dev
# 4. 构建生产版本
npm run build
# 5. 打包为 zip 文件 (用于发布)
npm run pack开发时，将 dist 目录作为“已解压的扩展程序”加载到 Chrome 中即可。
- 配置 API：首次打开侧边栏，点击右上角的 ⚙️ (设置) 图标。
- 选择提供商：选择
Google Gemini或OpenAI 兼容接口。 - 填写密钥：填入你的 API Key。如果你使用代理或第三方中转，请修改
自定义接口地址 (Base URL)。 - 选择模型：点击“获取模型”并选择你想要使用的模型（如
gemini-1.5-flash或gpt-4o-mini）。 - 开始对话：
- 开启输入框上方的 “附带当前网页” 开关，AI 即可读取当前网页内容。
- 点击欢迎页的快捷指令（总结、翻译、解释），快速处理长文本。
- 框架: React 18 + TypeScript
- 构建工具: Vite +
@crxjs/vite-plugin - 样式: Tailwind CSS +
lucide-react(Icons) - 状态管理: Zustand
- 本地存储:
idb-keyval(IndexedDB) +chrome.storage.local - 内容提取:
@mozilla/readability - Markdown 渲染:
react-markdown+highlight.js
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
本项目基于 MIT License 开源。