AI Reading Assistant (AI 阅读助手) 🚀

AI Reading Assistant 是一款基于 Chrome 扩展程序的轻量级 AI 阅读辅助工具，旨在为学术阅读和内容消费提供沉浸式的 AI 交互体验。项目遵循 Material Design 3 规范，提供精致的视觉效果和丝滑的交互体验。

---

✨ 核心特性

• 🎯 划词即达: 智能选区弹出窗，快速对选中内容进行总结、翻译或解释。
• 💬 深度对话: 全功能的侧边栏聊天界面，支持 Markdown 渲染、模型切换及打字机效果。
• 🛠️ Skills & MCP 集成: 内置扩展插件系统，AI 可调用各种 Skills（如网页搜索、页面交互）来辅助任务。
• ⌨️ 自定义快捷键: 支持 Enter 或 Ctrl+Enter 发送消息，适配不同用户的输入习惯。
• 📝 消息高级操作: 支持对消息进行原位编辑、快速复制、一键重新生成和删除。
• 🌓 深色模式支持: 适配 Material 3 主题系统，高对比度色彩确保深色模式下的阅读清晰度。
• 🎨 毛玻璃效果: 侧边栏和悬浮菜单应用了精致的 Glassmorphism 设计，交互感更现代。

---

🛠️ 技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite + CRXJS (Chrome Extension Plugin)
• 视觉/动画: Tailwind CSS + Framer Motion + Lucide Icons
• 内容处理: @mozilla/readability + DOMPurify
• AI 渲染: React Markdown + Remark GFM
• 设计规范: Google Material Design 3 (MD3)

---

📦 项目结构

ai-reading-assistant/
├── src/
│   ├── core/
│   │   └── skills/          # Skills 插件系统架构 & MCP 桥接
│   ├── sidepanel/          # 侧边栏 UI (主交互界面)
│   │   ├── components/     # 设置、快捷键、Skills 等组件
│   ├── content/            # 注入页面的脚本 (悬浮按钮、浮窗)
│   ├── stores/             # 全局状态管理 (AppContext/Chrome Storage)
│   └── index.css           # 混合 MD3 变量的主题样式表
├── public/                 # 插件清单 (manifest.json) 和静态资产
└── dist/                   # 构建产物

---

🚀 快速上手

1. 克隆与安装

git clone https://github.com/your-username/ai-reading-assistant.git
cd ai-reading-assistant
npm install

2. 开发模式

npm run dev

运行后，Vite 会生成 dist 目录。在 Chrome 扩展管理器中开启“开发者模式”，选择“加载已解压的扩展程序”，并指向该 dist 文件夹。

3. 正式打包

npm run build

---

🧩 Skills 与工具扩展

项目内置了 SkillManager，允许开发者轻松扩展 AI 的能力。

• Skill 注册: 在 src/core/skills/index.ts 中注册新工具。
• 可视化管理: 在设置页面底部的 Skills & 集成 面板中，用户可以实时查看当前 AI 可用的所有技能及其参数架构。
• MCP 兼容: 采用了符合 Model Context Protocol 规范的定义方式，便于未来扩展。

---

🎨 设计理念

我们也致力于每一个像素的打磨：

• Helpful: 提供直观的帮助功能，不打断阅读流。
• Organic: 自然的动画过渡，消除组件的突兀感。
• Focus: 清晰的信息层次，文字清晰度经过深色模式严格走查。

---

📄 开源协议

MIT License. 欢迎随时提交 Issue 或 PR！