不仅免费，还开源？这个 AI Mock 神器我必须曝光它

前两周我做了一个零侵入的接口 Mock 插件。还写了篇掘金文章记录了一下：juejin.cn/post/757098...

此前用 Popup 弹窗做联调，窗小、易误关、操作繁琐；

于是我重构为 Sidebar 常驻侧栏：规则随时可见，刷新也不丢。

• 换成 Sidebar 侧边栏：钉在页面右边，想开就开，数据都存着，再也不怕手抖关掉。即使刷新页面，规则也不会丢，重新打开就能继续用

• 接入 AI 自动生成：描述你想要的数据，或者直接贴接口的 TypeScript 类型，AI 秒出结构化数据。手写？不存在的

• 支持延时和状态码：可以模拟慢接口（延时 3 秒）、接口报错（返回 500）等真实场景

现在用起来爽多了，前端开发不用干等后端，自己就能把页面跑起来。

下文附安装与使用指南，欢迎试用与反馈。

如果你现在还在用 Popup 弹窗做 Mock，或者还在一个字一个字敲 JSON， 真心建议试试 Sidebar + AI 这套，用完你就知道什么叫"真香"。

演示效果

插件功能预览

• 拦截能力：覆盖 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请求

---

🚀 快速开始

获取代码

• GitHub ：github.com/Teernage/AI... ⭐ 如果对您有帮助欢迎Star
• Gitee ：gitee.com/xuzhenxin11...

打开代码仓库，按以下方操作下载插件包。安装包为 zip，请先解压。

下载与解压

• 在仓库的 Releases 或打包入口下载插件包（zip）。
• 将 zip 解压到任意目录，得到 AI-Mock-v1.0.0 文件夹。

参考示意图：

一键安装

2. 打开Chrome浏览器 3.. 地址栏输入：chrome://extensions/
3. 打开右上角"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择刚刚解压的AI-Mock-v1.0.0文件夹
6. 搞定！扩展安装完成！

参考示意图：

设计与实现

1. Sidebar 侧边栏 vs popup弹窗

特性	Popup	Sidebar
显示空间	小（~400x600px）	大（可调整宽度）
操作便捷性	点击外部就关闭	固定显示，不怕误触
与页面交互	互斥	可同时显示
数据持久化	关闭即丢失	刷新页面也保留

2. AI 生成 Mock 数据

这块就两件事：

• 你给一个 URL，我把它转成正则，用来拦截这个接口
• 你给数据类型或者一句话描述，AI 直接把 Mock 数据"现做现给"

使用 AI 生成前需配置 DeepSeek API Key。现提供一个限额体验 Key 供试用；额度用尽或失效后，请前往 DeepSeek 官网申请并在侧栏更新为你的个人 Key

API key： sk-9fa67c84581d4f67b61039ff8b199baa

示例：

DeepSeek 官网申请key示例:

1. 根据描述输出 Mock 数据

• 只要一句话就够：
  • 输入：用户列表，包含姓名、年龄、邮箱，来 10 条

效果图：

2. 根据类型输出 Mock 数据

• 或者直接贴 数据的类型：

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

效果图：

3. 根据输入的地址生成正则表达式

目的：把带占位符的路径，转成更稳的正则，方便在开发态拦截请求

常用示例：

• 输入： /api/users/:id
• 正则： ^/api/users/\^/+/?$
• 可拦截： /api/users/1 、 /api/users/abc

效果图：

修改 Mock 数据

• 这块很直观，给你三种编辑入口，改完就是生效：

  • 规则编辑里改：打开"编辑规则"，在 Mock 数据 (JSON) 文本框里直接改，支持"格式化/验证/复制/清空"，点"保存"后立即应用

• 放大弹窗改：点击"放大"，全屏 JSON 编辑器更适合改大结构或深层嵌套，改完"验证"一下再"保存"

• 卡片内联改：在规则卡片下方的"Mock 响应"树视图，鼠标双击某个值就能直接编辑，编辑完进行回车保存。这个适合改小字段（比如把 data.hits.total 从 1 改成 20 ）

效果图：

同步规则

• 三个地方改的都是同一份数据，任意入口保存后，其他入口会显示最新值
• 修改仅作用于"当前这条规则"，不会影响其他规则或接口

推荐使用场景

• 小改动（单字段/少量数值）：用"卡片内联"最快
• 中等改动（几个字段/一层结构）：在"编辑规则"里改，配合"格式化/验证"
• 大改动（数组长度、层级结构、批量替换）：用"放大弹窗"编辑 JSON，更清晰、更不容易漏

操作建议

• 先"验证"再"保存"：能快速提示 JSON 语法、字段类型不匹配等问题
• 用"格式化"提升可读性，避免缩进错乱
• 需要回到初始或重置时，用"清空"或点击"生成"重新出一版数据
• 要分享或备份当前数据，用"复制"一键拷贝

4. 延时请求 - 测试加载状态

设置延时 3 秒，模拟慢接口：

• 测试 Loading 动画是否正常
• 测试骨架屏效果
• 测试用户会不会重复点击
• 测试超时逻辑

演示效果图:

4. 状态码 - 测试异常场景

一键切换不同状态码：

• 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.ts
chrome.action.onClicked.addListener(async (tab) => {
  await chrome.sidePanel.open({ windowId: tab.windowId });
});

关键区别：

• Popup：窗口小、点击外部就关闭、关闭即销毁
• Sidebar：空间大、可固定显示、数据持久化

---

2. 拦截 fetch / XHR（支持延时和状态码）

劫持实现原理参考我上篇文章：【前端效率工具】再也不用 APIfox 联调！零侵入 Mock，全程不改代码、不开代理juejin.cn/post/757098...

核心代码：

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' }
      }
    );
  }
  
  // 不拦截，调用原始 fetch
  return 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 返回的 JSON
    const 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;
  }
});

---

总结

这次重构主要做了四件事：

1. Sidebar 替代 Popup：更大的空间、更好的体验
2. AI 自动生成：一句话描述即可生成 Mock 数据
3. 延时请求：测试 Loading、骨架屏、超时逻辑
4. 自定义状态码：测试各种异常场景

这四个功能组合起来，基本覆盖了前端开发中 90% 的 Mock 需求。

如果你也在等后端接口，或者被 Popup 小窗口折磨过， 真的可以试试这个插件，保证你用了就回不去了。