chrome-ext-ai-script

Files (7)

• SKILL.md
• ai-provider-registry.md · references/
• architecture-decisions.md · references/
• dom-snapshot.md · references/
• streaming-chat.md · references/
• tech-stack-setup.md · references/
• world-main-injection.md · references/

SKILL.md (first lines)

# 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) │  │  · 图片输入支持                        │
│  │  └─────────────┘  │  · 多轮对话上下文                      │
│  │  ┌─────────────┐  │                                       │
│  │  │  代码预览    │  │  · 自动检测 AI 生成的脚本               │
│  │  │ (CodePreview)│ │  · 一键在页面中执行                     │
│  │  └─────────────┘  │                                       │
│  └─────────┬─────────┘                                       │
│            │                                                 │
│  ┌─────────┴─────────┐   ┌─────────────────┐                │
│  │  设置面板 Options  │   │  后台服务 SW     │                │
│  │                   │   │                 │                │
│  │  · 服务商选择      │   │  · 消息路由      │                │
│  │  · API Key 配置   │   │  · Tab 管理      │                │
│  │  · 连通性测试 ✓    │   │  · 生命周期      │                │
│  │  · 模型选择        │   │  (不做 AI 调用)  │                │
│  └─────────┬─────────┘   └────────┬────────┘                │
│            │                      │                          │
│  ┌─────────┴──────────────────────┴──────────────────┐      │
│  │                 AI 服务层                           │      │
│  │                                                    │      │
│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐           │      │
│  │  │ Provider │ │ Provider │ │ Provider │ ...       │      │
│  │  │ 注册中心  │ │ OpenAI   │ │ Claude   │           │      │
│  │  │ (插件式)  │ │          │ │          │           │      │
│  │  └──────────┘ └──────────┘ └──────────┘           │      │
│  │                                                    │      │
│  │  · Prompt 构建（注入真实 DOM 快照 → 防幻觉）        │      │
│  │  · 流式调用（Vercel AI SDK 统一接口）               │      │
│  └────────────────────┬───────────────────────────────┘      │
│                       │                                      │
│  ┌────────────────────┴───────────────────────────────┐      │
│  │                 页面交互层                           │      │
│  │                                                    │      │
│  │  · Content Script → DOM 快照提取                    │      │
│  │    - 交互元素（input/button/select）                │      │
│  │    - ID 元素（精准定位）                             │      │
│  │    - 页面正文（Turndown → Markdown）                │      │
│  │    - 标题/地标（页面结构概览）                       │      │
│  │                                                    │      │
│  │  · world:MAIN 注入 → 在页面全局作用域执行代码        │      │
│  └────────────────────┬───────────────────────────────┘      │
│                       │                                      │
│                       ▼                                      │
│  ┌────────────────────────────────────────────────────┐      │
│  │          目标网页（用户正在浏览的页面）               │      │
│  └────────────────────────────────────────────────────┘      │
└──────────────────────────────────────────────────────────────┘
```

### 核心数据流

```
用户输入："把这个页面的广告隐藏掉"
     │
     ▼
① 提取页面信息
   Content Script 扫描当前 Tab：
   · 交互元素 → 选择器信息
   · ID 元素 → 精准定位依据
   · 页面正文 → Turndown 转 Markdown
   · 标题/地标 → 页面结构概览
     │
     ▼
② 构建 AI Prompt
   System Prompt = 角色定义 + 真实 DOM 快照 + 页面正文
   （AI 看到真实的元素 ID 和 class，不会编造）
     │
     ▼
③ 流式调用 AI
   Vercel AI SDK → 自动选对应服务商的 SSE 格式
   侧边栏实时显示回复（一个字一个字出来）
     │
     ▼

From wangjs-jacky/jacky-skills, MIT.

More from wangjs-jacky/jacky-skills