chrome-ext-ai-scriptlisted

# AI 驱动的 Chrome Extension — 项目参考方案 > 📖 **蒸馏产物** — 本文件是从开源项目蒸馏提炼的参考方案，不是可执行的 skill。 > 供开发同类项目时参考查阅，包含完整的架构设计、功能模块说明和代码参考。 > 从 [zhuweileo/Monkey](https://github.com/zhuweileo/Monkey) 蒸馏提炼，提供可复用的架构模式和实现参考。 --- ## 一、项目定位 **浏览器侧边栏里的 AI 助手** — 用户用自然语言描述需求，AI 感知当前页面结构，生成脚本并直接在页面上执行。 ### 核心亮点 | 亮点 | 说明 | |------|------| | **看到就能改** | AI 感知当前页面的真实 DOM 结构，生成的脚本精准匹配页面元素 | | **说了就生效** | 对话完成后代码直接在页面执行，无需复制粘贴 | | **一键配置可用** | 填入 API Key → 测试连通性 → 确认 Key 有效 → 立即开始使用 | | **多服务商自由切换** | OpenAI / Claude / Gemini 等随时切换，插件式扩展 | ### 典型使用场景 | 用户说 | 效果 | |--------|------| | "把页面右侧的广告栏隐藏掉" | AI 根据真实 DOM 找到广告容器并隐藏 | | "帮我把这个表单自动填上测试数据" | AI 识别表单字段并填入数据 | | "提取这个页面所有商品价格" | AI 生成脚本抓取价格信息并展示 | | "这个按钮太丑了，帮我换个样式" | AI 修改目标元素的 CSS | | "帮我监控这个页面的价格变化" | AI 生成定时检查脚本 | | "提取这个页面的所有联系方式" | AI 扫描页面结构，抓取邮箱/电话等信息 | --- ## 二、功能模块总览 ``` ┌──────────────────────────────────────────────────────────────┐ │ Chrome Extension 架构 │ │ │ │ ┌───────────────────┐ │ │ │ 侧边栏 SidePanel │ ← 用户主界面 │ │ │ │ │ │ │ ┌─────────────┐ │ │ │ │ │ 对话界面 │ │ · 流式消息渲染 │ │ │ │ (ChatView) │ │ · 图片输入支持 │ │ │ └─────────────┘ │ · 多轮对话上下文 │ │ │ ┌─────────────┐ │