mbarlow/chrome-xray

# Chrome X-Ray 一款自定义 API 开发工具。在网站上激活它，它将监视每一个 fetch/XHR 调用，将实时流量转化为您可读的流，并将这些流整理到一个交互式的 API 工作台中——自动发现 endpoint，生成模板，推断 schema，并可进行测试。界面会根据应用程序的实际行为自动构建。 ## 功能介绍 - **Streams** —— 实时捕获每一个传出的 fetch/XHR：请求/响应标头、状态、耗时、格式化且带有语法高亮的 JSON body、错误信息。支持按 method、状态码类别进行筛选，或跨 URL、标头和 payload 进行全文搜索。所有内容均可一键复制——单个标头、完整标头块、body、URL，以及复制为 cURL。 - **API 工作台** —— 将流量整理成模板化的 endpoint（例如 `/users/8231` → `/users/{userId}`），并按 host 分组。每个 endpoint 都包含观察到的 query 键、状态分布、平均延迟，以及从真实 payload 推断出的 JSON schema。在此基础上，您可以： - **Try it** —— 类似现代版 Postman 的表单：支持自定义 method/URL/标头/body，从活动标签页的页面上下文中发送，因此 cookies 和 origin 同样适用。 - **Replay** —— 将任何真实的历史记录加载到表单中并重新发送。 - **WebSockets** —— 将连接捕获为实时记录：状态（connecting/open/closed/error）、关闭代码/原因、每方向的帧计数和字节数，以及最后 200 个带有方向、耗时和语法高亮 payload 的帧。随着数据帧的流动，详情视图会实时更新。仅在 Streams 中显示 —— sockets 不会被整理到 API 工作台中。 - **Overlay** —— 通过 shadow-DOM 在页面本身显示实时滚动信息（`Ctrl+Shift+X`），无需离开应用即可监视调用。 - **Spec 探测** —— API 工具栏上的 **Spec** 按钮会探测已知的 host，以获取提供的 OpenAPI/Swagger 定义（`/openapi.json`、`/v3/api-docs`、`/swagger.json` 等），或者获取显式的 URL。找到的 spec（OpenAPI 3.x / Swagger 2.0, JSON）会在任何流量产生之前，为工作台填充带有 `spec` 标签的 endpoint —— 包括 schema、params、query 键；随后的实时调用会将观察到的统计数据合并到其中（`spec+observed`）。探测也是被动的：当捕获到的响应*本身就是* spec 文档时（例如 swagger-ui 页面会获取其自身的 spec），流记录将获得一个 `spec` 标识和一个一键 *Import as API spec* 按钮。 - **Profiles** —— 根据 URL 模式限定捕获范围。每个应用/环境对应一个 profile，每个 profile 拥有各自的历史记录、endpoint、上限和设置。 - **导出/导入** —— 使用无损的 `.xray.json` 将 profile 的定义（和脱敏后的示例）迁移到安装了该扩展的另一浏览器中；支持单向导出为 OpenAPI 3.1 格式，以便用于其他工具。 ## 捕获模型 MAIN-world shim 会在 `document_start` 时包裹 `window.fetch` 和 `XMLHttpRequest`。静默运行 —— 没有 debugger 横幅，也不会与 DevTools 冲突。在 profile 匹配页面之前，shim 会保持休眠状态；早期的调用会先进行缓冲，直到收到激活指令。 此方法的已知局限性：无法捕获 `set-cookie`/禁用的标头，无法捕获源自 service worker 的请求，没有传输层面的细节。这是为了实现零摩擦所作出的权衡。 ## 隐私 一切数据均保留在浏览器中 —— 存储于 IndexedDB，为扩展私有。不会主动发起任何网络调用，没有分析追踪，不会有任何数据离开您的设备。捕获到的 auth 标头会以原始形式存储（Replay 需要用到它们），但在导出时默认会进行脱敏处理（可在每个 profile 中单独设置）。 ## 安装说明 1. 克隆此仓库（或解压发布的版本） 2. 打开 `chrome://extensions` → 开发者模式 → **加载已解压的扩展程序** → 选择该目录 ## 使用说明 1. 打开您关注的网站 2. 点击 x-ray 图标 → **Activate for this site**（创建一个限定于该 origin 的 profile） 3. 使用该应用。打开侧边栏：**Streams** 会实时填充，**API** 会自动组装 4. 在 **API** 中，打开一个 endpoint → 使用任意数据点击 *Try it*，或者将一条历史记录加载到表单中进行 Replay 5. 点击 **Export** 将定义导出并迁移到其他地方 ## 快捷键 `Ctrl+Shift+X`（在 Mac 上为 `Cmd+Shift+X`）—— 切换页面内的 Overlay。 ## 技术栈 原生 JS，ES modules，无构建步骤，无框架。采用 Catppuccin (Latte/Mocha) 主题，自动适应系统设置并支持手动覆盖。基于 MV3。 ## 许可证 MIT

标签：API测试, WebSocket, Web开发工具, 依赖分析, 开发辅助, 数据可视化, 流量抓包, 自定义脚本