不仅免费，还开源？这个 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 文件夹。

参考示意图：

一键安装

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

参考示意图：

设计与实现

特性	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 数据

或者直接贴数据的类型：

typescript 复制代码

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 语法、字段类型不匹配等问题
用"格式化"提升可读性，避免缩进错乱
需要回到初始或重置时，用"清空"或点击"生成"重新出一版数据
要分享或备份当前数据，用"复制"一键拷贝

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

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

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

演示效果图:

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

一键切换不同状态码：

200：测试成功流程
400：测试参数校验
401：测试登录跳转
403：测试权限提示
500：测试错误兜底

效果图:

核心实现

配置文件：

json 复制代码

{
  "manifest_version": 3,
  "name": "AI Mock",
  "version": "2.0.0",
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel",
    "storage",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

打开侧边栏：

typescript 复制代码

// 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

typescript 复制代码

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';
}

匹配规则：

typescript 复制代码

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 设计：

typescript 复制代码

const buildPrompt = (userInput: string) => {
  return `
你是一个专业的 Mock 数据生成助手。

用户需求：${userInput}

请生成符合以下规范的 JSON 数据：
1. 必须是有效的 JSON 格式
2. 包含常见的响应结构（code, msg, data）
3. 数据要真实合理（中文姓名、真实邮箱格式等）
4. 如果是列表，生成 2-3 条示例数据

只返回 JSON，不要有其他说明文字。
  `.trim();
};

生成逻辑：

typescript 复制代码

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. 规则数据结构

typescript 复制代码

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;           // 创建时间
}

存储和读取：

typescript 复制代码

// 保存规则
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 小窗口折磨过，真的可以试试这个插件，保证你用了就回不去了。

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

演示效果

插件功能预览

什么时候你会需要它？

🚀 快速开始

获取代码

一键安装

设计与实现

1. Sidebar 侧边栏 vs popup弹窗

2. AI 生成 Mock 数据

1. 根据描述输出 Mock 数据

2. 根据类型输出 Mock 数据

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

修改 Mock 数据

同步规则

推荐使用场景

操作建议

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

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

核心实现

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

3. AI 生成 Mock 数据

4. 规则数据结构

总结

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

演示效果

插件功能预览

什么时候你会需要它？

🚀 快速开始

获取代码

一键安装

设计与实现

1. Sidebar 侧边栏 vs popup弹窗

2. AI 生成 Mock 数据

1. 根据描述输出 Mock 数据

2. 根据类型输出 Mock 数据

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

修改 Mock 数据

同步规则

推荐使用场景

操作建议

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

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

核心实现

1. Manifest V3：从 Popup 到 Sidebar

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

3. AI 生成 Mock 数据

4. 规则数据结构

总结