不僅免費，還開源？這個 AI Mock 神器我必須曝光它

前兩週我做了一個零侵入的介面 Mock 插件。還寫了篇掘金文章記錄了一下：juejin.cn/post/7570984257666056238

此前用 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請求

🚀 快速開始

獲取代碼

• GitHub：github.com/Teernage/AI… ⭐ 如果對您有幫助歡迎Star
• Gitee：gitee.com/xuzhenxin11…

打開代碼倉庫，按以下方操作下載插件包。安裝包為 zip，請先解壓。

下載與解壓

• 在倉庫的 Releases 下載插件包（zip）。
• 將 zip 進行解壓，得到 AI-Mock-v1.0.0 文件夾。

參考示意圖：

一鍵安裝

1. 打開Chrome瀏覽器
2. 地址欄輸入：chrome://extensions/
3. 打開右上角"開發者模式"
4. 點擊"加載已解壓的擴展程序"
5. 選擇剛剛解壓的AI-Mock-v1.0.0文件夾
6. 搞定！擴展安裝完成！

參考示意圖：

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 數據“現做現給”

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，全程不改代碼、不开代理

核心代碼：

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 小窗口折磨過，真的可以試試這個插件，保證你用了就回不去了。

如果覺得對您有幫助，歡迎點贊 👍 收藏 ⭐ 關注 🔔 支持一下！

往期實戰推薦：

• Vue3 後台分頁寫膩了？我用 1 個 Hook 刪掉 90% 重複代碼（附原碼）
• ⚡ 一個Vue自定義指令搞定絲滑拖拽列表，告別複雜組件封裝
• 🔥 這才是 Vue 驅動的 Chrome 插件工程化正確打開方式
• 老闆問我：AI真能一鍵畫廣州旅遊路線圖？我用 MCP 現場開圖
• 【前端效率工具】：告別右鍵另存，不到 50 行代碼一鍵批量下載網頁圖片
• 女朋友炸了：剛打開的網頁怎麼又沒了？我反手甩出一鍵恢復按鈕！
• 你家孩子又偷玩網頁遊戲? 試試這個防沉迷工具
• 她說想要浪漫，我把瀏覽器滑鼠換成了柴犬，點一下就有煙花（附原碼）
• 女朋友被鏈接折磨瘋了，我寫了個工具一鍵解救
• 上班摸魚看掘金，老闆突然出現在身後...
• 【前端效率工具】再也不用 APIfox 聯調！零侵入 Mock，全程不改代碼、不开代理
• 大部分人都錯了！這才是chrome插件多腳本通信的正確姿勢
• 女朋友又給我出難題了：解鎖網頁禁用複製 + 一鍵提取圖片文字

原文出處：https://juejin.cn/post/7578793960627486746