Madoka — 智能搜索助手

Chrome 侧边栏扩展：联网搜索 + 通义大模型对话，支持页面读取、Action 执行与验证码自动识别。

---

功能概览

• 智能对话：侧边栏内与 AI 对话，可基于当前页面内容、标签页、书签、历史进行上下文增强。
• 联网搜索：支持 Bing / Google，搜索过程与结果可注入对话。
• 页面读取：一键获取当前页正文（Readability），供 AI 参考。
• Action 空间：解析页面可操作元素（如表格、按钮），生成执行计划并由用户确认后执行。
• 验证码识别：集成 ddddocr_web，本地 ONNX 识别验证码，支持自动填写、刷新后重填、手动添加规则。详见 验证码使用说明。

---

技术栈

类别	技术
框架	React 18、TypeScript
构建	Vite、CRXJS（Chrome 扩展）
样式	TailwindCSS、Framer Motion
状态	React Context + useReducer
其他	Readability（正文提取）、ONNX Runtime Web（验证码）

---

快速开始

1. 安装依赖

npm install

2. 验证码模型（可选）

验证码功能依赖 common_q8.onnx（约 13MB）。不下载则首次使用从 GitHub 拉取；建议本地内置：

npm run download-model

详见 CAPTCHA_USAGE.md。

3. 构建

npm run build

产物在 dist/。

4. 加载扩展

1. 打开 Chrome → chrome://extensions/
2. 开启「开发者模式」
3. 「加载已解压的扩展程序」→ 选择项目根目录下的 dist 文件夹

5. 配置

在侧边栏 设置 中填写通义 API Key、选择默认搜索引擎等。验证码相关开关与规则见 CAPTCHA_USAGE.md。

---

脚本说明

命令	说明
npm run dev	开发模式（Vite + CRXJS 热更新）
npm run build	生产构建（tsc + vite build）
npm run preview	预览构建结果
npm run download-model	下载验证码模型到 public/common_q8.onnx

---

项目结构

Madoka-main/
├── public/                 # 静态资源
│   ├── icons/              # 扩展图标
│   ├── ort-wasm-simd-threaded.jsep.mjs   # ONNX WASM 运行时
│   └── common_q8.onnx      # 验证码模型（需 npm run download-model）
├── scripts/
│   └── download-captcha-model.mjs   # 验证码模型下载脚本
├── src/
│   ├── background/         # Service Worker：搜索、API、消息路由
│   ├── captcha/            # 验证码识别与填充
│   ├── content/            # Content Script：读页、解析、Action、验证码
│   ├── sidepanel/          # 侧边栏 React 应用
│   ├── shared/             # 共享类型、常量、消息封装
│   ├── manifest.json       # 扩展清单
│   └── README.md           # 代码结构详细说明
├── docs/                   # 架构与前端设计文档
├── CAPTCHA_USAGE.md        # 验证码功能使用说明
├── package.json
├── vite.config.ts
├── tsconfig.json
└── readme.md               # 本文件

代码分工：background 处理搜索与 API；content 注入页面负责读页与 Action；sidepanel 提供对话与设置 UI；captcha 独立模块，由 content 按需加载。完整模块与文件说明见 src/README.md。

---

文档

• 验证码识别使用说明
• 代码结构说明
• 架构文档、前端架构

---

许可证与致谢

• 验证码识别基于 ddddocr_web。
• 页面正文提取使用 Mozilla Readability。
• 最终感谢@ zyq学长！！！这个框架！！