Skip to content
BranchesTags

Repository files navigation

🔮 SkillSummoner - 技能召唤师

AI 驱动的 Chrome 扩展，捕获网页 API 请求并自动生成可复用的 Skill 技能文档，让任何 AI 助手都能直接调用这些 API。

Chrome Extension License: MIT Manifest V3

✨ 核心痛点

你在网页上操作，浏览器发出了几十个 XHR/Fetch 请求——你想让 另一个 AI 工具（比如 Claude、GPT、Cursor）也能调用这些 API，但：

  • ❌ 手动复制 curl 太麻烦，Cookie / Header 一大堆
  • ❌ 不知道哪些接口是关键的、调用的顺序是什么
  • ❌ 生成的 Skill 文档缺少域名、缺 Cookie、缺完整示例

SkillSummoner 解决所有这些问题。

🚀 功能特性

特性 说明
🔍 自动捕获 拦截页面所有 XHR / Fetch 请求，零配置
🏷️ 智能筛选 按 HTTP 方法过滤 + URL 关键词搜索
🖱️ 悬浮气泡 鼠标悬停 URL 显示完整域名 + URI
🤖 AI 分析 调用 OpenAI / Claude / DeepSeek 等大模型生成 Skill 文档
📄 多格式导出 JSON / YAML / Markdown 一键下载
🍪 完整保留 域名、Cookie、认证头、curl 示例全部原样输出
📁 命名下载 文件名自动使用 AI 提取的技能名称

📸 使用流程

1. 安装扩展 → 打开目标网页 → 操作触发API请求
2. 侧边栏自动展示捕获的请求列表
3. 勾选关键请求 → 点击「AI 分析」
4. 大模型生成完整的 Skill 技能文档
5. 下载 JSON/YAML/Markdown → 直接喂给其他 AI 工具使用

📦 安装

方式一：开发者模式加载（推荐）

  1. 克隆仓库：

    git clone https://github.com/duicym/skill-summoner.git

  2. 打开 Chrome，访问 chrome://extensions/

  3. 开启右上角 「开发者模式」

  4. 点击 「加载已解压的扩展程序」

  5. 选择 skill-summoner 目录

  6. 点击工具栏上的 ⭐ 图标打开侧边栏

方式二：从源码打包 .crx

cd skill-summoner
# 使用 chrome extension 打包功能或 scripts/ 目录下的构建脚本

⚙️ 配置

点击侧边栏右上角 ⚙️ 设置按钮，配置：

配置项 说明
Provider 选择 AI 厂商：OpenAI / Claude / DeepSeek / Custom
API Key 对应平台的 API 密钥
API Endpoint 自定义 API 地址（支持代理/中转）
Model 使用的模型名称（如 gpt-4o、claude-3-5-sonnet）

推荐模型

用途 推荐模型 理由
通用场景 gpt-4o / claude-3-5-sonnet-20241022 理解力强，格式稳定
成本敏感 deepseek-chat / gpt-4o-mini 性价比高
中文优化 deepseek-chat 中文提示词响应好

🧠 给 AI 开发者的架构说明

项目结构

skill-summoner/
├── manifest.json          # Manifest V3 配置
├── background.js          # Service Worker 后台脚本
├── content.js             # Content Script（扩展隔离环境）
├── injected.js            # 注入脚本（MAIN world，可拦截原始XHR/Fetch）
├── sidepanel.html/css/js  # 侧边栏 UI
├── options.html/css/js    # 设置页 UI
├── lib/
│   ├── storage.js         # Chrome Storage 封装
│   ├── api-client.js      # 多厂商 AI API 统一客户端
│   └── skill-generator.js # Skill 文档生成与导出
└── icons/                 # 扩展图标

核心架构：请求拦截链

网页 (MAIN World)
  │
  ├─ injected.js (MAIN world 注入)
  │   ├─ Monkey-patch XMLHttpRequest.prototype.open/send
  │   ├─ Monkey-patch window.fetch
  │   ├─ 记录 origin/hostname（解决 chrome-extension:// 域名解析bug）
  │   ├─ 完成回调中补充 document.cookie（自动捕获浏览器Cookie）
  │   └─ 通过 window.postMessage → content.js
  │
  ├─ content.js (Extension Isolated World)
  │   ├─ 监听 message，转发到 background.js
  │   └─ 维护请求状态
  │
  └─ background.js (Service Worker)
      ├─ 存储到 chrome.storage.local
      └─ 广播消息到 sidepanel

关键设计决策

1. 为什么用 MAIN World 注入？

Chrome Manifest V3 的 Content Script 运行在隔离环境，无法拦截网页自己的 XHR/Fetch。必须注入到 world: "MAIN" 的脚本才能 monkey-patch 原生 API。

2. 域名解析 Bug 的根因修复

Side Panel 运行在 chrome-extension:// 协议下，用 new URL(req.url) 解析相对路径时会以扩展 ID 为基准域名。

解决方案：在 injected.js 注入时立即记录 window.location.hostname，随请求数据一起传给 Side Panel：

// injected.js - 注入时就记录真实域名
var requestInfo = {
  origin: window.location.origin,
  hostname: window.location.hostname,  // ← 关键字段
  // ...
};

3. Cookie 自动捕获

浏览器的 Cookie 不经过 XMLHttpRequest.setRequestHeader()，所以手动设置的 header 里没有它。解决方案是在请求完成后从 document.cookie 补充：

// injected.js - XHR/Fetch 完成回调中
if (document.cookie && !requestInfo.headers['Cookie']) {
  requestInfo.headers['Cookie'] = document.cookie;
}

4. Tooltip 智能定位

纯 CSS position: absolute 会被父级 overflow: hidden 裁剪，底部卡片气泡被截断。最终方案是：

  • position: fixed + JS 计算坐标
  • CSS 变量传递位置（--tooltip-left, --tooltip-top, --tooltip-transform）
  • 视口空间判断：下半部分卡片气泡显示在上方
  • 100ms 防抖延迟隐藏，避免列表抖动

AI Prompt 工程

System Prompt 设计在 lib/api-client.js 的 buildSystemPrompt() 方法中。核心要点：

输出格式要求：
1. 基本信息 → **名称**：xxx（用于文件名+标题提取）
2. 完整接口列表 → Method + 完整URL(含域名) + Headers(含Cookie) + Body + Response
3. 调用步骤 → 操作顺序
4. curl 示例 → 可直接复制执行
5. 注意事项 → 认证、权限等

名称提取正则（skill-generator.js → extractSkillName()）：

const patterns = [
  /^\*{1,2}名称\*{1,2}[\s:：]\s*(.+)$/im,  // **名称**：xxx
  /^\*{1,2}Name\*{1,2}[\s:：]\s*(.+)$/im,   // **Name**：xxx
  /^(?:#+\s*)?Name:\s*(.+)$/im,              // Name: xxx
  /^(?:#+\s*)?Title:\s*(.+)$/im,             // Title: xxx
];
// ⚠️ 不要用 /^#{1,3}\s+(.+)/m 兜底！会匹配到章节标题如 "### 1. 基本信息"

导出格式说明

生成的 Skill 文档结构（JSON 格式）：

{
  "metadata": {
    "id": "skill_1713345600000_abc123def",
    "name": "漏洞与问题搜索API调用",
    "description": "该技能用于通过API搜索漏洞和问题信息...",
    "version": "1.0.0",
    "tags": ["POST", "api", "automation", "example"],
    "category": "API Integration"
  },
  "content": {
    "overview": "# 漏洞与问题搜索 API 调用\n\n## 1. 基本信息\n...",
    "steps": [{ "order": 1, "description": "..." }],
    "notes": ["..."]
  },
  "apis": [{
    "method": "POST",
    "endpoint": "https://example.com/api/search",
    "path": "/api/search",
    "headers": { "Cookie": "...", "Content-Type": "..." },
    "requestBody": { ... },
    "responseStatus": 200,
    "responseBody": { ... }
  }]
}

🔧 开发指南

本地开发

# 1. 克隆
git clone https://github.com/duicym/skill-summoner.git
cd skill-summoner

# 2. Chrome 加载为解压扩展
# 打开 chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序 → 选此目录

# 3. 修改代码后，在 chrome://extensions/ 点刷新图标即可生效

调试技巧

场景 方法
injected.js 在目标网页的控制台（F12）查看日志
content.js/background.js chrome://extensions/ → 扩展详情 → 「检查视图」→ Service Worker / Content Script
sidepanel 右键侧边栏 → 检查
Storage 数据 DevTools → Application → Storage → Local Storage → chrome-extension://{id}

添加新的 AI Provider

编辑 lib/api-client.js，在 PROVIDERS 中添加新条目：

myprovider: {
  name: 'MyProvider',
  defaultEndpoint: 'https://api.myprovider.com/v1/chat/completions',
  models: ['my-model-v1'],
  authHeader: 'Authorization',
  authPrefix: 'Bearer ',
  requestFormat: 'openai'  // 或 'claude'
}

📝 更新日志

v1.0.0 (2025-04-17)

  • ✅ XHR/Fetch 请求拦截与捕获
  • ✅ 侧边栏展示请求列表（方法筛选 + URL 搜索）
  • ✅ 鼠标悬浮显示域名 + URI 气泡（智能方向判断）
  • ✅ AI 多模型支持（OpenAI / Claude / DeepSeek / Custom）
  • ✅ Skill 文档生成与多格式导出（JSON / YAML / Markdown）
  • ✅ 完整 Cookie/域名/curl 示例保留
  • ✅ 文件名自动使用 AI 提取的技能名称
  • ✅ 结果展示首行显示技能名称标题

🤝 贡献

欢迎 PR 和 Issue！

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/amazing)
  3. 提交更改 (git commit -m 'Add amazing feature')
  4. 推送分支 (git push origin feature/amazing)
  5. 创建 Pull Request

📄 许可证

MIT

Made with ❤️ by duicym

About

🔮 SkillSummoner - AI驱动的Chrome扩展，捕获网页API请求并自动生成可复用的Skill技能文档

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages