Skip to content

wenren2025/find-request

Repository files navigation

API请求捕获器 Chrome插件

一个用于捕获和分析网页按钮点击后触发的POST请求的Chrome扩展程序。

功能特性

  • 🎯 自动监听: 打开窗口即自动监听,无需手动点击开始/停止按钮
  • 📦 只捕获POST请求: 仅捕获当前标签页下的POST请求,忽略GET等其他类型
  • 📊 简洁展示: 仅展示请求URL(不含参数)和请求体参数,直接列表展示
  • 📋 一键复制: 支持复制请求参数,方便调试和测试
  • 🪟 独立窗口: 捕获窗口为宽450px、高1800px(宽度4倍),内容区自适应
  • 💾 数据持久化: 自动保存捕获的请求数据
  • 🎨 美观界面: 现代化的用户界面设计

安装方法

开发者模式安装

  1. 打开Chrome浏览器
  2. 进入扩展程序页面 (chrome://extensions/)
  3. 开启右上角的"开发者模式"
  4. 点击"加载已解压的扩展程序"
  5. 选择本项目的文件夹
  6. 插件安装完成

使用方法

基本操作

  1. 打开捕获窗口

    • 点击插件图标,自动弹出独立窗口
    • 窗口打开后自动开始监听,无需手动操作
  2. 捕获POST请求

    • 在网页上进行任何POST请求操作(如表单提交、AJAX等)
    • 插件会自动捕获并在窗口中实时展示
  3. 查看与复制请求

    • 捕获窗口直接列表展示请求URL(不含参数)和请求体参数
    • 点击"复制"按钮可一键复制请求体参数
  4. 清空记录

    • 点击"清空记录"按钮可删除所有捕获的请求
  5. 关闭窗口

    • 关闭窗口即自动停止监听

注意事项

  • 只捕获POST请求,GET等其他类型请求不会显示
  • 仅监听当前激活标签页
  • 窗口高度为1800px,宽度为450px
  • 无需手动点击开始/停止监听,窗口自动管理监听状态

技术实现

  • webRequest API: 拦截POST请求
  • Content Script: 辅助捕获用户点击信息(如可用)
  • 消息通信: 使用Chrome Extension API进行组件间通信
  • 数据存储: 使用chrome.storage.local进行数据持久化
  • 窗口管理: 通过background.js动态创建独立窗口并设置尺寸

文件结构

find-request/
├── manifest.json          # 插件配置文件
├── background.js         # 后台脚本(含窗口管理、请求捕获)
├── content-new.js        # 内容脚本(辅助点击捕获)
├── window.html           # 独立窗口HTML
├── window.js             # 独立窗口逻辑
├── popup.html            # 弹出页面HTML
├── popup.js              # 弹出页面逻辑
├── popup.css             # 弹出页面样式
└── README.md             # 说明文档

调试指南

  1. 查看日志

    • Content Script日志:开发者工具Console,前缀[API捕获器]
    • Background Script日志:扩展管理页-背景页Console
    • 窗口页面日志:右键窗口-检查,Console
  2. 常见问题排查

    • 未显示请求:确认窗口已自动监听,且操作为POST请求
    • 复制功能失效:检查浏览器Clipboard API权限
    • 窗口尺寸异常:确认background.js和window.html高度一致

开发说明

  • 修改代码后需在扩展程序页面点击"重新加载"
  • 重要日志信息已添加,便于调试
  • 遵循Chrome Extension最佳实践

许可证

本项目采用MIT许可证。

About

chrome extension

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published