cross-request-master

Cross Request Master

面向 API 开发/测试的 Chrome 扩展：绕过 CORS 发请求、自动生成 cURL，并对 YApi「运行」页做增强（内嵌 cURL、路径参数 {param} 引导填写）。

本仓库包含生态内的 CLI/MCP 子项目：packages/yapi-mcp（发布包名保持为 @leeguoo/yapi-mcp，不影响扩展打包）。

YApi 运行页：内嵌 cURL + 路径参数填写

扩展弹出窗口：状态与问题反馈入口

功能特性

跨域请求（CORS bypass）：在页面侧调用 crossRequest，由扩展后台代发
内嵌 cURL：YApi「运行」页 URL 下方展示可复制的 cURL 命令
路径参数引导：URL 含 {param} 时提示填写，避免请求失败
固定 Header：为跨域请求自动追加自定义 Header
YApi 工具箱：一键生成 MCP 配置 / Skill 安装（支持 Codex/Claude/Cursor）/ CLI 使用与 docs-sync
复制给 AI：把当前接口信息整理为 Markdown 一键复制
jQuery/Fetch 支持：兼容 $.ajax / fetch / 脚本能力
Manifest V3：兼容最新 Chrome 扩展标准

安装

Chrome Web Store（推荐）
https://chrome.google.com/webstore/detail/efgjanhcajpiljllnehiinpmicghbgfm

开发者模式

git clone https://github.com/leeguooooo/cross-request-master.git
cd cross-request-master
./build-extension.sh

然后在 chrome://extensions/ 开启开发者模式 → “加载已解压的扩展程序” → 选择 build/。

使用

在 YApi 中

安装后直接在 YApi「运行」页发送请求即可，扩展会自动处理跨域、显示 cURL，并把 JSON 响应解析为对象供脚本使用。

在接口详情页（基本信息区域右上角）额外提供：

YApi 工具箱：包含 MCP 配置（所有项目）、Skill 一键安装（支持 Codex/Claude/Cursor）、CLI 使用与 docs-sync 说明（自动拼好命令）
复制给 AI：把当前接口信息整理成 Markdown（仅接口相关字段）复制到剪贴板

YApi OpenAPI（Yapi-MCP tool 同名方法）

扩展在页面侧额外暴露 window.crossRequest.yapiMcp（也可用 window.crossRequest.yapi），把 YApi OpenAPI 封装成与 Yapi-MCP 一致的 5 个方法，方便直接在浏览器控制台/脚本里操作接口文档：

// 先配置（支持多项目：'28:token1,29:token2'）
window.crossRequest.yapiMcp.configure({
  baseUrl: 'https://your-yapi-domain.com',
  token: '28:your_project_token'
});

// 查接口、拉分类、搜索、保存
const api = await window.crossRequest.yapiMcp.yapi_get_api_desc({ projectId: '28', apiId: '66' });

在任意网页中手动调用

window.crossRequest({
  url: 'https://api.example.com/data',
  method: 'GET',
  headers: { Authorization: 'Bearer token' },
  success(res) {
    console.log('Success:', res);
  },
  error(err) {
    console.error('Error:', err);
  }
});

crossRequest 也会返回 Promise：

const resp = await window.crossRequest({ url: '/api/ping' });
console.log(resp.status, resp.data);

jQuery 集成

YApi/目标站点：默认拦截所有 $.ajax。如需关闭：crossRequest: false
其他站点：默认不拦截。需显式开启：crossRequest: true

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  crossRequest: true
});

文件上传（FormData）

const fd = new FormData();
fd.append('file', fileInput.files[0]);
fd.append('name', 'demo');

await window.crossRequest({
  url: 'https://api.example.com/upload',
  method: 'POST',
  body: fd
});

TypeScript 类型定义

仓库内置 types/cross-request.d.ts，可直接复制到你的项目并在 tsconfig.json 中 include，或在 global.d.ts 引用：

/// <reference path="./types/cross-request.d.ts" />

已知限制 / FAQ

自定义 Header 被放到 Access-Control-Request-Headers：这是浏览器 CORS 预检行为，需要服务端正确返回 Access-Control-Allow-Headers。
Network 面板看不到请求：请求由扩展后台发出，不会出现在页面 Network；可在扩展 Service Worker 的 Network/Console 查看。

开发与测试（本仓库）

项目结构：

manifest.json        MV3 配置
background.js        Service Worker
content-script.js    注入/通信
index.js             页面侧 API 与适配器
src/helpers/         可复用 helper
tests/               Jest 单测

常用命令：

pnpm install
pnpm test
pnpm lint
pnpm format
./build-extension.sh

贡献与支持

提交 Issue/PR 前请先看 CONTRIBUTING.md
如果项目对你有帮助，欢迎 Star 或赞助：
- GitHub Sponsors: https://github.com/sponsors/leeguooooo
- 微信/支付宝赞赏码见下方

赞助开发

如果你觉得这个项目对你有帮助，可以请作者喝杯咖啡：

GitHub Sponsors

微信 / 支付宝

更新日志

见 CHANGELOG.md。

许可证

MIT License