Skip to content

一个轻量级、高兼容性的浏览器扩展,专为前端开发者设计,用于实时监控页面中的 `XMLHttpRequest` 和 `Fetch` 请求。它以悬浮窗的形式展示接口调用计数,并提供独立的详情页来查看请求细节。

License

Notifications You must be signed in to change notification settings

wzzz711/meng-api-monitor-extension

Repository files navigation

MENG 接口监听器

一个轻量级、高兼容性的浏览器扩展,专为前端开发者设计,用于实时监控页面中的 XMLHttpRequestFetch 请求。它以悬浮窗的形式展示接口调用计数,并提供独立的详情页来查看请求细节。

✨ 功能特性

  • 实时拦截: 即时捕获页面上的 XMLHttpRequestFetch 请求。
  • 页面悬浮窗: 一个可拖动的、非侵入式的悬浮窗,实时显示捕获到的请求数量。
  • 请求详情查看器: 一个专门的查看页面,让你能够审查每个请求的详细信息,包括 URL、方法、请求体和完整的响应内容。
  • 稳定且兼容: 经过精心设计,以防止与其他同样会修改网络接口的脚本发生冲突,有效避免了无限递归等常见陷阱。
  • 会话级存储: 所有捕获的数据都与当前标签页绑定,关闭标签页时会自动清除,确保了用户隐私且不会造成数据冗余。

🏗️ 架构概览

时序图

本扩展基于一个标准的四部分架构,这也是需要与网页进行深度交互的 Chrome 扩展所普遍采用的强大模式。

  • popup.js (UI 控制器): 用户交互界面,用于开始/停止监控、清空记录和打开查看器。
  • content.js (通信桥梁): 被注入到目标页面中。它扮演着桥梁的角色,负责与其他部分通信,并管理页面上的悬浮窗。
  • injected.js (核心探针): 拦截逻辑的核心。它由内容脚本注入到页面自身的 JavaScript 上下文中,从而获得了修改 XMLHttpRequestfetch 原型的必要权限。
  • background.js (控制大脑): 扩展的后台服务。它管理全局状态,使用 chrome.storage 处理数据存储,并协调不同标签页之间的通信。

有关更深入的开发细节和架构思考,请参阅 开发者笔记

🚀 如何安装

  1. 克隆或下载此仓库的 ZIP 文件并解压。
  2. 打开 Chrome 浏览器并导航至 chrome://extensions
  3. 打开右上角的"开发者模式"开关。
  4. 点击"加载已解压的扩展程序"按钮。
  5. 选择刚刚解压的项目文件夹。现在"MENG 接口监听器"应该会出现在你的扩展列表中。

About

一个轻量级、高兼容性的浏览器扩展,专为前端开发者设计,用于实时监控页面中的 `XMLHttpRequest` 和 `Fetch` 请求。它以悬浮窗的形式展示接口调用计数,并提供独立的详情页来查看请求细节。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published