本文介绍了一款基于浏览器插件的API Mock工具，旨在解决后端接口未完成或环境问题导致的开发障碍。文章详细阐述了插件的基本原理，包括请求拦截（重写fetch和XMLHttpRequest）和脚本注入，并介绍了Manifest V3架构下的核心配置差异。文章还展示了项目的整体实现架构、流程以及功能介绍，如创建Mock规则、页面白名单管理和请求日志。最后，作者分享了开发过程中的收获和对未来AI在浏览器插件中应用的展望。

💡 **API Mock工具的必要性与应用场景**：在软件开发过程中，后端接口的延迟完成或特定环境问题的出现，常给前端开发带来阻碍。本文介绍的浏览器插件式Mock工具，正是为了应对这些挑战而生，它专注于API请求的拦截与数据模拟，能够显著提升开发效率，解决实际开发中的痛点。

🚀 **Manifest V3架构下的请求拦截与脚本注入**：文章深入解析了Manifest V3架构，并重点讲解了该工具如何通过重写原生API（fetch和XMLHttpRequest）来实现请求拦截，以及采用多重注入策略和动态检测的方式进行脚本注入，以规避Content Security Policy的限制，确保Mock功能的有效运行。

🛠️ **功能设计与实现细节**：该Mock工具提供了灵活的规则创建方式，包括通过API管理平台导入和手动新建规则，并支持根据JSON Schema生成Mock数据。此外，还引入了页面白名单管理以优化性能，以及请求日志功能以方便调试，确保了工具的实用性和易用性。

🔮 **未来展望与AI融合**：作者在总结开发经验的同时，也对浏览器插件在AI浪潮下的发展潜力进行了展望，提出未来可探索监听页面所有请求并允许用户选中历史请求进行Mock，以及结合AI能力更快速地生成Mock数据的方向，为插件的进一步发展指明了方向。

原创 段壹 2025-09-22 18:31 上海

在日常开发过程中，偶尔会遇到后端接口未完成或者某个环境出现问题需要根据接口返回来复现等等场景。在此背景下开发了一款基于浏览器插件的 MOCK 工具。该工具专注于 API 请求拦截和数据模拟，旨在帮助开发者提升开发效率，能够解决一些问题。

目录

一、前言

二、浏览器插件介绍

    1. 什么是浏览器插件？

    2. Manifest V3 架构

    3. 核心配置差异示例

三、Mock 插件实现的基本原理

    1. 请求拦截的核心原理

    2. 脚本注入

四、整体实现架构与流程

    1. 项目结构设计

    2. 相关功能介绍

    3. 整体流程

五、总结与收获

六、未来展望

在日常开发过程中，偶尔会遇到后端接口未完成或者某个环境出现问题需要根据接口返回来复现等等场景。刚好最近在学习浏览器插件的相关知识，并在此背景下开发了一款基于浏览器插件的 Mock 工具。该工具专注于 API 请求拦截和数据模拟，旨在帮助开发者提升开发效率，能够解决一些问题。

// V2 持久化背景页配置"
background": {
  "scripts": ["background.js"],  
  "persistent": true             
}

// V3 Service Worker 配置
"background": {
   "service_worker": "background.js",  
   "type": "module"                   
}

// V3 declarativeNetRequest 配置
"permissions": ["declarativeNetRequest"],
"host_permissions": ["<all_urls>"],
"declarative_net_request": {
   "rule_resources": [
       {"id": "ruleset_1","enabled": true,"path": "rules.json"  }
    ]
}

// injected.js - 在页面环境中重写fetch
const originalFetch = window.fetch;
window.fetch = async function(url, options = {}) {
  // 1. 发送拦截请求到content script
  const response = await sendMockRequest(url, options);

  // 2. 如果有匹配的Mock规则，返回Mock数据
  if (response.shouldMock) {
    return new Response(
      JSON.stringify(response.mockData),
      {
        status: response.status,
        headers: response.headers
      }
    );
  }

  // 3. 否则执行原始请求
  return originalFetch.call(this, url, options);
};

// content.js
async function injectScript() {
  // 策略1: 内联脚本注入
  try {
    await injectInlineScript();
    if (await checkScriptActivation()) return;
  } catch (e) {
    console.warn('内联注入失败:', e);
  }

  // 策略2: 外部脚本注入
  try {
    await injectExternalScript();
    if (await checkScriptActivation()) return;
  } catch (e) {
    console.warn('外部注入失败:', e);
  }

  // 策略3: 最简单注入方式
  await attemptSimpleInjection();
}

chrome-mock/
├── build-script/          # rollup 进行构建
├── static/                # 静态文件引入，如mockjs
├── debug/                 # 本地调试相关的页面
├── manifest.json          # 插件配置
├── background.js          # 核心逻辑处理
├── content.js            # 脚本注入和消息中转
├── injected.js           # 请求拦截实现
├── options.html          # 管理界面
├── options.js            # 管理界面逻辑
├── options.css           # 管理界面样式
├── popup.html            # 弹窗界面
├── popup.js              # 弹窗逻辑
├── popup.css             # 弹窗样式
└── icons/                # 图标资源

支持格式：
- http://localhost:3000        # 完整URL
- *.example.com               # 通配符域名
- dev.company.com             # 具体域名
- http://dev.company.com      # 带协议的域名

本次插件开发过程中，探索了浏览器扩展插件的能力，学习了 Manifest V3 的新知识，掌握了浏览器插件开发相关技术点。随之而来带来的思考便是在 AI 的浪潮下，浏览器插件是否能有更多的可能。

另外，本次很多功能点的实现也依赖了 Cursor，探索浏览器插件的同时也深入的学习了Cursor的应用，感受到了Cursor从 0 到 1 搭建过程中的速度和效率。但是在后续需要对功能点进行改造时，使用效率并不是高，如何建立规则和组织话术，让 AI 更加规范、高效地辅助开发是一个值得深思的问题，当然通过 rules 是能够解决大部分问题。

阅读原文

跳转微信打开

Fish AI Reader

Fish AI Reader

AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。

FishAI

鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑

联系邮箱 441953276@qq.com