AI-Mock：开源Chrome扩展实现前端接口模拟与AI生成Mock数据

此前用Popup弹窗进行前端联调，存在窗口空间狭小、容易误触关闭、操作繁琐等问题。

为了解决这些痛点，我们将插件核心交互重构为Sidebar侧边栏常驻模式，使Mock规则随时可见，即使页面刷新也不会丢失。

• 「切换至Sidebar侧边栏」：侧边栏可以固定在页面右侧，随时展开或收起。所有规则数据都被持久化存储，不再担心误操作关闭。即便刷新浏览器页面，已配置的规则也会保留，重新打开侧边栏即可继续使用。
• 「集成AI自动生成能力」：只需用自然语言描述你期望的数据结构，或者直接粘贴接口的TypeScript类型定义，AI能在瞬间生成符合要求的结构化Mock数据，彻底告别手动编写JSON的繁琐。
• 「支持模拟延时与状态码」：可以真实模拟慢接口（如延时3秒响应）、接口异常（如返回500状态码）等多种复杂场景。

经过重构，使用体验得到显著提升，前端开发者无需等待后端接口完成，即可独立运行和调试前端页面。

如果你仍在忍受Popup弹窗进行Mock，或者手动逐字敲入JSON数据，强烈建议尝试Sidebar结合AI生成的这套方案，它将极大提升你的开发效率。

功能演示：输入URL转为正则 / 输入描述或类型生成Mock数据

插件核心功能

• 请求拦截：覆盖 fetch 与 XMLHttpRequest 两种请求方式，规则实时生效，对业务代码零侵入。
• 匹配规则：支持URL包含匹配、完全匹配以及正则表达式匹配。
• 请求过滤：支持按HTTP方法（GET/POST/PUT/DELETE）进行过滤。
• 异常模拟：支持模拟200、400、401、403、500等多种HTTP状态码。
• AI智能生成：输入自然语言描述或粘贴TypeScript类型，快速生成结构化Mock数据，支持模板化和一键覆盖。
• 持续迭代：调试与管理功能（如导入导出、规则分组、Network面板标识）正在建设中，性能与匹配体验将持续优化，欢迎反馈。

适用场景

• 「后端接口未就绪」：无需等待，通过Mock数据先行开发前端页面与逻辑。
• 「测试加载状态」：设置2秒延时，验证Loading动画、骨架屏等组件的展示效果。
• 「测试异常处理」：一键切换返回400、401、403、500等状态码，检查前端错误提示与交互逻辑是否友好。
• 「测试防重复提交」：模拟“延时3秒+返回失败”的场景，观察用户是否会重复点击提交按钮。
• 「演示与汇报」：无需搭建后端环境或连接服务器，在浏览器中即可完成功能演示。

注：插件同时支持拦截传统的XMLHttpRequest和现代的fetch请求。

🚀 快速开始

方法一：通过Chrome应用商店安装

可直接前往Chrome应用商店搜索“AI Mock”进行一键安装。

方法二：从GitHub仓库获取并本地安装

获取插件代码

• GitHub仓库：包含规则匹配、JSON编辑/校验/格式化、AI生成、数据持久化等完整功能。
• Gitee镜像仓库：提供国内高速下载。

打开仓库后，按以下步骤操作：

1. 在仓库的Releases页面下载插件包（ZIP格式）。
2. 解压ZIP文件，得到类似AI-Mock-v1.0.0的文件夹。

下载与解压示意图：

Chrome浏览器安装步骤

1. 在Chrome地址栏输入：chrome://extensions/
2. 打开页面右上角的“开发者模式”开关。
3. 点击“加载已解压的扩展程序”按钮。
4. 选择之前解压得到的插件文件夹（如AI-Mock-v1.0.0）。
5. 安装完成，插件图标将出现在浏览器工具栏。

安装过程示意图：

Gitee仓库的安装方式同理，在仓库的“发行版（Release）”页面下载插件包即可。

AI功能前置配置

使用AI生成Mock数据前，需要配置DeepSeek API Key。

• 试用Key：为方便体验，提供一个限额试用Key（可能随时失效）：sk-9fa67c84581d4f67b61039ff8b199baa
• 个人Key：试用额度用尽后，请前往DeepSeek官网申请个人API Key，并在插件侧栏中替换。

配置Key示意图：

DeepSeek官网申请Key示意图：

功能设计与实现详解

1. Sidebar侧边栏 vs Popup弹窗架构对比

特性	Popup弹窗	Sidebar侧边栏
显示空间	较小（约400x600像素）	较大（宽度可调节）
操作便捷性	点击页面其他区域即关闭	固定显示，不易误触关闭
与页面交互	互斥（打开弹窗无法操作页面）	可同时显示与操作
数据持久化	关闭后数据丢失	页面刷新后数据依然保留

2. AI生成Mock数据机制

AI功能主要解决两个核心问题：

• URL转正则：将包含动态参数（如:id）的URL路径，转换为正则表达式，用于精准拦截开发环境下的请求。
• 描述/类型转数据：根据自然语言描述或TypeScript接口定义，直接生成结构合理、数据真实的Mock JSON。

根据描述生成Mock数据示例：

• 输入：用户列表，包含姓名、年龄、邮箱，来10条
• 输出：包含10条用户信息的JSON数组。
  

根据TypeScript类型生成Mock数据示例：

• 输入：

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

• 输出：符合User接口定义的Mock数据。
  

根据URL路径生成正则表达式示例：

• 目的：将RESTful风格的路径模式转换为更通用的正则表达式，便于在开发阶段拦截请求。
• 输入：/api/users/:id
• 生成正则：^/api/users/[^/]+/?$
• 可拦截：/api/users/1、/api/users/abc
  

3. 灵活编辑Mock数据

提供三种编辑入口，修改后实时生效：

1. 规则编辑面板：在“编辑规则”的JSON文本框内直接修改，支持格式化、验证、复制、清空操作，保存后立即应用。
2. 全屏弹窗编辑器：点击“放大”按钮，使用全屏JSON编辑器进行复杂结构或深层嵌套的修改，编辑后需验证并保存。
3. 卡片内联编辑：在规则卡片下方的“Mock响应”树形视图中，双击任意字段值即可直接编辑，适合快速修改单个字段。

编辑界面示意图：

数据同步机制：

• 三个入口修改的是同一份规则数据，任一入口保存后，其他视图会同步更新。
• 修改仅作用于当前规则，不会影响其他规则。

操作建议：

• 小范围修改：使用“卡片内联编辑”最为快捷。
• 中等范围修改：在“规则编辑面板”中进行，善用格式化与验证功能。
• 大规模结构调整：推荐使用“全屏弹窗编辑器”，视野更清晰。
• 修改前建议先“验证”JSON语法，修改后可“格式化”提升可读性，需要时可用“复制”功能备份数据。

4. 模拟延时请求

设置延时（如3秒）可模拟网络缓慢或后端处理时间较长的场景，用于：

• 测试Loading动画、骨架屏的显示与隐藏逻辑。
• 测试用户交互，防止在等待时重复提交。
• 验证前端设置的超时逻辑是否正确。
  

5. 模拟HTTP状态码

一键切换不同的HTTP状态码，全面测试前端应用的异常处理能力：

• 200：测试成功流程。
• 400：测试前端参数校验与错误提示。
• 401：测试未登录状态下的页面跳转逻辑。
• 403：测试无访问权限时的提示信息。
• 500：测试服务器内部错误的兜底UI。
  

核心实现技术解析

1. 基于Manifest V3的Sidebar实现

关键配置文件 (manifest.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>"
  ]
}

打开侧边栏的Background Script逻辑：

// background.ts
chrome.action.onClicked.addListener(async (tab) => {
  await chrome.sidePanel.open({ windowId: tab.windowId });
});

架构优势：

• Popup弹窗：空间有限，点击外部即关闭，上下文状态随之销毁。
• Sidebar侧边栏：提供更大、更稳定的操作空间，状态持久化，用户体验更佳。

2. 请求拦截实现（支持延时与状态码）

实现原理基于对原生fetch和XMLHttpRequest的封装拦截。

核心拦截代码 (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';

  // 查找匹配的Mock规则
  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' }
      }
    );
  }
  // 无匹配规则，放行原始请求
  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) {
  const { rules } = await chrome.storage.local.get('rules');
  return rules.find((rule: Rule) => {
    if (!rule.enabled) return false;
    // HTTP方法匹配
    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。
• 完全匹配：URL必须完全一致。
• 正则匹配：/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();
};

调用AI API生成数据：

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

通过精心设计的Prompt，可以引导人工智能模型输出格式规范、数据真实的Mock JSON。

4. 规则数据结构与存储

规则类型定义：

interface Rule {
  id: string;
  remark: string;              // 规则备注/名称
  url: string;                 // 匹配的URL或正则表达式
  matchMode: 'contains' | 'exact' | 'regex';
  method: 'ALL' | 'GET' | 'POST' | 'PUT' | 'DELETE';
  statusCode: number;          // 模拟的HTTP状态码（默认200）
  delay: number;               // 模拟延时（毫秒，默认0）
  data: Record<string, any>;   // Mock响应数据
  enabled: boolean;            // 规则是否启用
  createdAt: number;           // 创建时间戳
}

基于Chrome Storage的持久化存储：

// 保存规则列表
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. 「支持请求延时模拟」：便于前端加载状态、超时逻辑的测试。
4. 「支持自定义HTTP状态码」：全面覆盖接口成功、失败等各种场景的测试需求。

这四项功能组合，基本满足了前端开发过程中90%的接口模拟与联调测试需求。如果你也受困于前后端协作的等待，或对现有Mock工具的体验不满，这款开源免费的Chrome扩展值得一试。