一、前 言
在日常開發過程中，偶爾會遇到後端接口未完成或者某個環境出現問題需要根據接口返回來複現等等場景。剛好最近在學習瀏覽器插件的相關知識，並在此背景下開發了一款基於瀏覽器插件的 Mock 工具。該工具專注於 API 請求攔截和數據模擬，旨在幫助開發者提升開發效率，能夠解決一些問題。
二、瀏覽器插件介紹
什麼是瀏覽器插件
瀏覽器插件（Extensions 或 Add-ons）是一類運行於瀏覽器進程中的輕量級功能增強模塊，其核心價值在於通過標準化接口實現對瀏覽器內核能力的深度整合與定製。根據 Mozilla 開發者文檔定義，插件本質上是“能夠修改和增強瀏覽器能力的應用程序”，Firefox、Chrome 等主流瀏覽器均採用 WebExtensions API 這一跨瀏覽器技術構建插件生態。與網頁應用（Web App）需依賴瀏覽器標籤頁運行、原生應用（Native App）需獨立安裝的特性不同，插件以輕量化部署為顯著特徵——無需複雜設置即可直接在瀏覽器環境內運行，同時具備標籤控制、網絡請求攔截、本地存儲訪問等網頁應用無法實現的底層能力。
Manifest V3 架構
Manifest V3 對瀏覽器插件的底層架構進行了顛覆性重構，主要體現在背景執行機制、網絡請求控制和代碼安全模型三個核心維度。以下從技術實現與設計動機角度進行全面對比：
關鍵架構變革：V3 採用"靜態聲明+內核級處理"模式替代 V2 的"動態腳本+插件自主控制"模式，通過瀏覽器內核直接介入關鍵流程（如網絡攔截），在性能與安全性之間取得平衡。
核心配置差異示例
背景執行模塊配置
// V2 持久化背景頁配置"
background": {
"scripts": ["background.js"],
"persistent": true
}
// V3 Service Worker 配置
"background": {
"service_worker": "background.js",
"type": "module"
}
網絡請求規則配置
V3 需在 Manifest 中聲明 DNR 權限及規則文件：
// V3 declarativeNetRequest 配置
"permissions": ["declarativeNetRequest"],
"host_permissions": ["<all_urls>"],
"declarative_net_request": {
"rule_resources": [
{"id": "ruleset_1","enabled": true,"path": "rules.json" }
]
}
三、Mock 插件實現的基本原理
請求攔截的核心原理
由於 Manifest V3 移除了webRequest API 的阻塞能力，declarativeNetRequest又無法重定向到自定義數據，於是方案上選擇的是在頁面上下文中重寫原生 API，目前重寫了fetch跟XMLHttpRequest。
// 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 Security Policy 阻止內聯腳本執行。
// 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/ # 圖標資源
相關功能介紹
創建 Mock 規則
創建 Mock 規則提供了多種方式：
- 如果是快速聯調的場景，可以用得物API管理平台導入的方式。
- 在排查某個環境問題，需要根據服務端接口返回數據復現的時候，可以通過在管理規則頁面手動新建。
方法一：快捷操作彈窗配置
- 打開 Mock 管理頁面
-
- 點擊瀏覽器工具欄中的 Mock Frog 圖標；
- 選擇"管理規則"或直接訪問擴展選項頁。
<!---->
- 添加新規則
方式一：複製粘貼得物API管理平台地址，點擊導入，自動生成。這個彈窗比較小適合自動導入的場景，也可以點擊上面 popup 的管理規則再進行操作。
如：https\:/apiManage.test.com/project/interface?id=3xxxx\&projectId=5xxxx
本地調用可能會有代理增加了前綴，系統會自動在路徑前添加通配符 *
方式二：複製接口地址到匹配 URL 輸入框中自行配置數據，這一步建議到管理規則中才施展的開。
支持根據接口平台的 JSON Schema 生成對應類型的 Mock 數據。
Mock 效果演示：
，時長00:14（視頻可前往得物技術公眾號該文章查看）
方法二：管理規則頁配置
由於 popup 界面大小有限，點擊其他區域彈窗也會關閉，提供了一個比較詳細的管理頁可以修改添加規則。
規則列表：
新建 Mock 規則：
頁面白名單管理
作用：針對所有頁面都進行攔截可能會導致頁面卡頓，影響整體性能，於是增加了白名單控制，控制 Mock 功能在哪些場景下才生效。同時也提供了全局生效模式，方便快速操作。
使用方法：
- 開啓白名單功能
-
- 進入擴展設置頁面
- 找到"頁面白名單"配置
- 啓用"使用頁面白名單"
*
- 添加白名單域名
<!---->
支持格式：
- http://localhost:3000 # 完整URL
- *.example.com # 通配符域名
- dev.company.com # 具體域名
- http://dev.company.com # 帶協議的域名
請求日誌
作用：記錄所有 Mock 請求的詳細信息，便於調試。
整體流程
五、總結與收穫
本次插件開發過程中，探索了瀏覽器擴展插件的能力，學習了 Manifest V3 的新知識，掌握了瀏覽器插件開發相關技術點。隨之而來帶來的思考便是在 AI 的浪潮下，瀏覽器插件是否能有更多的可能。
另外，本次很多功能點的實現也依賴了 Cursor，探索瀏覽器插件的同時也深入的學習了Cursor的應用，感受到了Cursor從 0 到 1 搭建過程中的速度和效率。但是在後續需要對功能點進行改造時，使用效率並不是高，如何建立規則和組織話術，讓 AI 更加規範、高效地輔助開發是一個值得深思的問題，當然通過 rules 是能夠解決大部分問題。
六、未來展望
功能升級：在複雜業務場景中，往往需要Mock的接口都比較多。如果能監聽頁面所有請求，然後提供通過選中某個歷史請求即可Mock接口的方式，就能快速實現接口的Mock。
能力拓展：探索在瀏覽器插件上結合 AI 能力的應用，基於規則跟用户的要求更快速的生成 Mock 數據。
往期回顧
1. 破解gh-ost變更導致MySQL表膨脹之謎｜得物技術
2. MySQL單表為何別超2000萬行？揭秘B+樹與16KB頁的生死博弈｜得物技術
3. 0基礎帶你精通Java對象序列化--以Hessian為例｜得物技術
4. 前端日誌回撈系統的性能優化實踐｜得物技術
5. 得物靈犀搜索推薦詞分發平台演進3.0
文 /段壹
關注得物技術，每週更新技術乾貨
要是覺得文章對你有幫助的話，歡迎評論轉發點贊～
未經得物技術許可嚴禁轉載，否則依法追究法律責任。
