Mocksmith

捕获请求，锻造 Mock 规则。

Mocksmith 是一个 Chrome Side Panel 扩展，用来捕获接口请求，并把真实请求快速转成可编辑的 Mock 规则。它适合前端开发中的本地调试场景，不依赖 Chrome Debugger。

功能

• 捕获当前标签页里的 Fetch / XHR 请求
• 从捕获记录一键生成 Mock 规则
• 直接回填真实响应体，方便在模板基础上继续改
• 支持匹配方法、URL 模式、状态码、延迟、响应体、参数替换
• 支持环境切换，规则可按环境隔离
• 真实请求先到达服务器，响应返回后再把页面侧读取到的数据替换成 Mock 响应
• 右上角可切换深色 / 浅色主题

工作方式

Mocksmith 在页面主世界中 hook fetch 和原生 XMLHttpRequest。命中规则时，请求仍然会真实发送到服务器；真实响应返回后，插件会在页面代码读取响应前把返回值替换为规则里的 Mock 数据。不需要启动本地代理，也不依赖 Chrome Debugger。

本地安装

1. 打开 chrome://extensions
2. 开启 开发者模式
3. 点击 加载已解压的扩展程序
4. 选择当前项目目录

使用方式

1. 从 Chrome 工具栏或 Side Panel 打开 Mocksmith
2. 访问你要调试的页面
3. 切换到 捕获 页
4. 点击某条请求，生成规则草稿
5. 根据需要调整参数、响应体、状态码、延迟或环境
6. 保存规则后刷新页面或重新触发请求

项目结构

• manifest.json - Chrome 扩展清单
• background.js - 存储、webRequest 捕获、页面 Hook 注入、规则同步
• sidepanel.html / sidepanel.js / sidepanel.css - Side Panel 界面
• shared.js - 共享的规则模型、匹配逻辑、DNR 辅助转换
• deep-bridge.js / deep-inject.js - 页面侧 Fetch / XHR Hook 桥接
• icons/ - 扩展图标与 Logo

许可

MIT