要在火狐浏览器里玩转 Mock 数据，前端开发中经常遇到这么个场景：需要通过控制台监听并拦截所有 Fetch 请求，绕过真实后端，返回我们自定义的假数据。

问题在于，直接在控制台里执行代码，充其量只是临时劫持了 window.fetch，页面一刷新就失效了。而且控制台环境的限制导致我们无法持久性地重写这个核心函数，每次都得重新来一遍。

那么，真正可行的方案是什么？注入内容脚本，在页面加载之前完成函数劫持。这才是关键所在。

准备可运行的轻量级Mock扩展

先新建一个空文件夹，比如叫 mock-fetch-ext，作为临时扩展的根目录。这个文件夹里需要创建一个名为 manifest.json 的文件，内容如下：

{"manifest_version": 2,"name": "Fetch Mock Injector","version": "1.0","content_scripts": [{"matches": [""],"js": ["mock-inject.js"],"run_at": "document_start"}],"permissions": ["webRequest", "webRequestBlocking"]}

注意，这一步不能跳过：run_at 必须设置为 document_start。为什么？因为一旦页面脚本开始执行，fetch 函数可能已经被调用了，这时候再去劫持就晚了，等于白忙一场。

编写核心劫持脚本 mock-inject.js

在同目录下新建一个 mock-inject.js 文件，粘贴以下核心代码：

const originalFetch = window.fetch;window.fetch = async function(input, init) {const url = input instanceof Request input.url : input;if (url.includes('/api/') || url.startsWith('https://example.com/api')) {return Promise.resolve(new Response(JSON.stringify({code: 0,data: {id: 999,name: "Mock User",timestamp: Date.now()}}),{status: 200,headers: {"Content-Type": "application/json"}}));}return originalFetch.apply(this, arguments);};

这里有个容易踩的坑：正则表达式或者 includes 的判断逻辑必须精准覆盖你目标接口的真实路径特征。比如说，你的接口路径是 /v1/user 或者是 /graphql，那就得写成 url.includes('/v1/') 或者 url.includes('/graphql')。千万别偷懒只写个 url.includes('/') —— 那可就糟糕了，它会拦截所有请求，包括字体、图片、CSS 文件，页面很可能会直接挂掉。

在火狐中临时加载并启用该扩展

搞定了脚本，接下来就是加载扩展了。

第一步：在地址栏输入 about:debugging#/runtime/this-firefox，然后回车。

第二步：点击右上角的「临时载入扩展」按钮 → 选择刚才创建的那个 mock-fetch-ext 文件夹 → 点击「打开」。

第三步：确认扩展列表中间出现「Fetch Mock Injector」并且状态显示为「已启用」。

第四步：打开目标网页，按 Ctrl+Shift+I 打开开发者工具 → 切换到「控制台」→ 执行 fetch('/api/user').then(r => r.json()).then(console.log)。

此时，控制台应该立刻输出你设定的 mock 数据对象。有意思的是，即使你在 Network 面板里看，这个请求依然存在，但响应体已经被偷偷替换了，状态码维持 200。这就是持久化 Mock 的精髓。

《夸克》非常好用的免费AI浏览器

下载APP查看