一个轻量级、高兼容性的浏览器扩展,专为前端开发者设计,用于实时监控页面中的 XMLHttpRequest 和 Fetch 请求。它以悬浮窗的形式展示接口调用计数,并提供独立的详情页来查看请求细节。
- 实时拦截: 即时捕获页面上的
XMLHttpRequest和Fetch请求。 - 页面悬浮窗: 一个可拖动的、非侵入式的悬浮窗,实时显示捕获到的请求数量。
- 请求详情查看器: 一个专门的查看页面,让你能够审查每个请求的详细信息,包括 URL、方法、请求体和完整的响应内容。
- 稳定且兼容: 经过精心设计,以防止与其他同样会修改网络接口的脚本发生冲突,有效避免了无限递归等常见陷阱。
- 会话级存储: 所有捕获的数据都与当前标签页绑定,关闭标签页时会自动清除,确保了用户隐私且不会造成数据冗余。
本扩展基于一个标准的四部分架构,这也是需要与网页进行深度交互的 Chrome 扩展所普遍采用的强大模式。
popup.js(UI 控制器): 用户交互界面,用于开始/停止监控、清空记录和打开查看器。content.js(通信桥梁): 被注入到目标页面中。它扮演着桥梁的角色,负责与其他部分通信,并管理页面上的悬浮窗。injected.js(核心探针): 拦截逻辑的核心。它由内容脚本注入到页面自身的 JavaScript 上下文中,从而获得了修改XMLHttpRequest和fetch原型的必要权限。background.js(控制大脑): 扩展的后台服务。它管理全局状态,使用chrome.storage处理数据存储,并协调不同标签页之间的通信。
有关更深入的开发细节和架构思考,请参阅 开发者笔记。
- 克隆或下载此仓库的 ZIP 文件并解压。
- 打开 Chrome 浏览器并导航至
chrome://extensions。 - 打开右上角的"开发者模式"开关。
- 点击"加载已解压的扩展程序"按钮。
- 选择刚刚解压的项目文件夹。现在"MENG 接口监听器"应该会出现在你的扩展列表中。
