不仅免费，还开源？这个 AI Mock 神器我必须曝光它
稀
不一样的少年_约 8 分钟
不一样的少年_约 8 分钟此前用 Popup 弹窗做联调，窗小、易误关、操作繁琐；
于是我重构为 Sidebar 常驻侧栏：规则随时可见，刷新也不丢。
「换成 Sidebar 侧边栏」：钉在页面右边，想开就开，数据都存着，再也不怕手抖关掉。即使刷新页面，规则也不会丢，重新打开就能继续用
「接入 AI 自动生成」：描述你想要的数据，或者直接贴接口的 TypeScript 类型，AI 秒出结构化数据。手写？不存在的
「支持延时和状态码」：可以模拟慢接口（延时 3 秒）、接口报错（返回 500）等真实场景
现在用起来爽多了，前端开发不用干等后端，自己就能把页面跑起来。
「下文附安装与使用指南，欢迎试用与反馈」。
❝如果你现在还在用 Popup 弹窗做 Mock，或者还在一个字一个字敲 JSON， 真心建议试试 Sidebar + AI 这套，用完你就知道什么叫 "真香"。
❞
演示效果: 复制 URL → AI 秒出正则；描述 / 类型 → AI 秒出 Mock 数据
插件功能预览
拦截能力：覆盖 fetch 与 XMLHttpRequest ，规则实时生效，零侵入 匹配规则：支持模糊匹配和完全匹配、正则表达式 响应控制：支持按 HTTP 方法过滤（GET/POST/PUT/DELETE） 异常模拟：支持模拟 200/400/401/403/500 等状态码 AI 生成：输入描述或贴 TS 类型，秒出结构化数据，支持模板与一键覆写 持续优化中,欢迎反馈与建议建设中: 调试与管理：导入导出、规则分组、Network 面板标识等；性能与匹配体验持续优化，欢迎反馈
什么时候你会需要它？
「后端还在写接口」：你不用干等，Mock 一下先把前端页面撸出来 「测试加载状态」：设置延时 2 秒，看看你的 Loading 动画、骨架屏是不是真的在转 「测试异常处理」：一键切换 200/400/401/403/500，看看你的错误提示是否友好 「测试防重复提交」：延时 3 秒 + 返回失败，看看用户会不会疯狂点击 「给老板 / 客户演示」：不用搭环境、不用连服务器，打开浏览器就能演示
注：支持拦截ajax和fetch请求
🚀 快速开始
方法一：直接从 chrome 扩展商店免费安装
Chrome 扩展商店一键安装：AI Mock - Chrome 应用商店
方法二: 从 github 仓库中获取，本地安装
获取代码
GitHub：规则匹配、JSON 编辑/校验/格式化、AI 生成数据、存储持久化 Gitee：AI-Mock: AI Mock：轻量级前端接口模拟
打开代码仓库，按以下方操作下载插件包。安装包为 zip，请先解压。
「下载与解压」
在仓库的 Releases 下载插件包（zip）。 将 zip 进行解压，得到 AI-Mock-v1.0.0 文件夹。
「参考示意图：」
一键安装
打开 Chrome 浏览器 3.. 地址栏输入： chrome://extensions/打开右上角 "开发者模式" 点击 "加载已解压的扩展程序" 选择刚刚解压的 AI-Mock-v1.0.0 文件夹 搞定！扩展安装完成！
「参考示意图：」
gitee 仓库链接的同理，在仓库页点击 “发行版（Release）”, 进入最新版本页面，下载插件包即可
「AI 前置准备」
使用 AI 生成前需配置 DeepSeek API Key。为便于体验，提供一个限额试用 Key；额度用尽或失效后，请前往 DeepSeek 官网申请个人 Key 并在侧栏替换 试用 Key（仅用于体验，随时可能失效）： sk-9fa67c84581d4f67b61039ff8b199baa
示例：
DeepSeek 官网申请 key 示例:
设计与实现
1. Sidebar 侧边栏 vs popup 弹窗
2. AI 生成 Mock 数据
这块就两件事：
你给一个 URL，我把它转成正则，用来拦截这个接口 你给数据类型或者一句话描述，AI 直接把 Mock 数据 “现做现给”
根据描述输出 Mock 数据
只要一句话就够： 输入：用户列表，包含姓名、年龄、邮箱，来 10 条
「效果图：」
根据类型输出 Mock 数据
或者直接贴 数据的类型：
interface User {id: number;name: string;age: number;email: string;}
「效果图：」
根据输入的地址生成正则表达式
目的：把带占位符的路径，转成更稳的正则，方便在开发态拦截请求
「常用示例：」
输入： /api/users/:id 正则： ^/api/users/[^/]+/?$ 可拦截： /api/users/1 、 /api/users/abc
「效果图：」
3.修改 Mock 数据
这块很直观，给你三种编辑入口，改完就是生效：
规则编辑里改：打开 “编辑规则”，在 Mock 数据 (JSON) 文本框里直接改，支持“格式化 / 验证 / 复制 / 清空”，点“保存” 后立即应用 放大弹窗改：点击 “放大”，全屏 JSON 编辑器更适合改大结构或深层嵌套，改完“验证” 一下再“保存”
卡片内联改：在规则卡片下方的 “Mock 响应” 树视图，鼠标双击某个值就能直接编辑，编辑完进行回车保存。这个适合改小字段（比如把 data.hits.total 从 1 改成 20 ）
「效果图：」
同步规则
三个地方改的都是同一份数据，任意入口保存后，其他入口会显示最新值 修改仅作用于 “当前这条规则”，不会影响其他规则或接口
推荐使用场景
小改动（单字段 / 少量数值）：用 “卡片内联” 最快 中等改动（几个字段 / 一层结构）：在 “编辑规则” 里改，配合“格式化 / 验证” 大改动（数组长度、层级结构、批量替换）：用 “放大弹窗” 编辑 JSON，更清晰、更不容易漏
操作建议
先 “验证” 再“保存”：能快速提示 JSON 语法、字段类型不匹配等问题 用 “格式化” 提升可读性，避免缩进错乱 需要回到初始或重置时，用 “清空” 或点击 “生成” 重新出一版数据 要分享或备份当前数据，用 “复制” 一键拷贝
4. 延时请求 - 测试加载状态
设置延时 3 秒，模拟慢接口：
测试 Loading 动画是否正常 测试骨架屏效果 测试用户会不会重复点击 测试超时逻辑
演示效果图:
5. 状态码 - 测试异常场景
一键切换不同状态码：
「200」：测试成功流程 「400」：测试参数校验 「401」：测试登录跳转 「403」：测试权限提示 「500」：测试错误兜底
「效果图:」
核心实现
1. Manifest V3：从 Popup 到 Sidebar
「配置文件：」
{"manifest_version": 3,"name": "AI Mock","version": "2.0.0","side_panel": {"default_path": "sidepanel.html"},"permissions": ["sidePanel","storage","scripting"],"host_permissions": ["<all_urls>"]}
「打开侧边栏：」
// background.tschrome.action.onClicked.addListener(async (tab) => {await chrome.sidePanel.open({ windowId: tab.windowId });});
「关键区别：」
Popup：窗口小、点击外部就关闭、关闭即销毁 Sidebar：空间大、可固定显示、数据持久化
2. 拦截 fetch / XHR（支持延时和状态码）
劫持实现原理参考我上篇文章：【前端效率工具】再也不用 APIfox 联调！零侵入 Mock，全程不改代码、不开代理[4]juejin.cn/post/757098…[5]
「核心代码：」
injected.ts
const originalFetch = window.fetch;window.fetch = async function(input, init) {const url = typeof input === 'string' ? input : input.url;const method = init?.method || 'GET';// 查找匹配的规则const rule = await findMatchedRule(url, method);if (rule) {// 延时处理if (rule.delay > 0) {await new Promise(resolve => setTimeout(resolve, rule.delay));}// 返回指定状态码return new Response(JSON.stringify(rule.data),{status: rule.statusCode || 200,statusText: getStatusText(rule.statusCode),headers: { 'Content-Type': 'application/json' }});}// 不拦截，调用原始 fetchreturn originalFetch.apply(this, arguments as any);};// 状态码文本映射function getStatusText(code: number): string {const statusTexts: Record<number, string> = {200: 'OK',400: 'Bad Request',401: 'Unauthorized',403: 'Forbidden',404: 'Not Found',500: 'Internal Server Error',502: 'Bad Gateway',503: 'Service Unavailable',504: 'Gateway Timeout'};return statusTexts[code] || 'Unknown';}
「匹配规则：」
async function findMatchedRule(url: string, method: string) {// 从 storage 获取规则const { rules } = await chrome.storage.local.get('rules');return rules.find((rule: Rule) => {if (!rule.enabled) return false;// 方法匹配if (rule.method !== 'ALL' && rule.method !== method) {return false;}// URL 匹配if (rule.matchMode === 'contains') {return url.includes(rule.url);} else if (rule.matchMode === 'exact') {return url === rule.url;} else if (rule.matchMode === 'regex') {return new RegExp(rule.url).test(url);}return false;});}
「支持的匹配模式：」
「包含匹配」： /api/user可以匹配/api/user/list、/api/user/detail「完整匹配」：必须完全一致 「正则匹配」： /api/user/\d+可以匹配/api/user/123
3. AI 生成 Mock 数据
「Prompt 设计：」
const buildPrompt = (userInput: string) => {return `你是一个专业的 Mock 数据生成助手。用户需求：${userInput}请生成符合以下规范的 JSON 数据：1. 必须是有效的 JSON 格式2. 包含常见的响应结构（code, msg, data）3. 数据要真实合理（中文姓名、真实邮箱格式等）4. 如果是列表，生成 2-3 条示例数据只返回 JSON，不要有其他说明文字。`.trim();};
「生成逻辑：」
const generateMockData = async () => {if (!aiPrompt.value) {ElMessage.warning('请输入数据描述');return;}generating.value = true;try {const response = await fetch('YOUR_AI_API_ENDPOINT', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({prompt: buildPrompt(aiPrompt.value),model: 'gpt-3.5-turbo'})});const data = await response.json();// 解析 AI 返回的 JSONconst mockData = JSON.parse(data.choices[0].message.content);// 填充到编辑器form.data = JSON.stringify(mockData, null, 2);ElMessage.success('✨ AI 生成成功');} catch (error) {ElMessage.error('生成失败：' + error.message);} finally {generating.value = false;}};
4. 规则数据结构
interface Rule {id: string;remark: string; // 规则名称url: string; // URL 匹配matchMode: 'contains' | 'exact' | 'regex';method: 'ALL' | 'GET' | 'POST' | 'PUT' | 'DELETE';statusCode: number; // 🆕 状态码（默认 200）delay: number; // 🆕 延时（毫秒，默认 0）data: Record<string, any>; // Mock 数据enabled: boolean; // 是否启用createdAt: number; // 创建时间}
「存储和读取：」
// 保存规则const saveRules = async () => {await chrome.storage.local.set({ rules: rules.value });};// 加载规则const loadRules = async () => {const result = await chrome.storage.local.get('rules');rules.value = result.rules || [];};// 监听变化chrome.storage.onChanged.addListener((changes, areaName) => {if (areaName === 'local' && changes.rules) {rules.value = changes.rules.newValue;}});
总结
这次重构主要做了四件事：
「Sidebar 替代 Popup」：更大的空间、更好的体验 「AI 自动生成」：一句话描述即可生成 Mock 数据 「延时请求」：测试 Loading、骨架屏、超时逻辑 「自定义状态码」：测试各种异常场景
这四个功能组合起来，基本覆盖了前端开发中 90% 的 Mock 需求。
如果你也在等后端接口，或者被 Popup 小窗口折磨过， 真的可以试试这个插件，保证你用了就回不去了。❞