api-diff-plugin

这是一个chrome插件，用来进行接口diff操作

基本功能

1. 抓包，对浏览器请求中符合规则的请求进行捕获和暂存，暂存完整请求和返回结果
2. 回放，对暂存的请求可以点击进行重放
3. 暂存数据diff，可以对暂存的两个请求进行diff，diff请求和返回
4. 接口diff，可以对指定的接口的不同字段进行修改，然后发起修改前后的请求，进行diff，支持修改域名，header，参数，body
5. 方便的图形操作页面
6. 可以通过分组进行管理

安装说明

开发者安装

1. 克隆仓库

git clone https://github.com/yourusername/api-diff-plugin.git
cd api-diff-plugin

2. 安装依赖

npm install

3. 构建插件

npm run build

4. 在Chrome中安装

• 打开Chrome浏览器
• 访问 chrome://extensions/
• 开启右上角的"开发者模式"
• 点击"加载已解压的扩展程序"
• 选择项目中的 dist 目录

普通用户安装

1. 下载最新的发布版本
2. 解压下载的文件
3. 按照上述"在Chrome中安装"的步骤进行安装

使用说明

1. 抓包功能

• 点击插件图标打开操作界面
• 点击"开始抓包"按钮开始捕获请求
• 浏览网页，插件会自动捕获所有的API请求
• 点击"停止抓包"按钮停止捕获

2. 查看请求

• 在请求列表中可以看到所有捕获的请求
• 每个请求都显示了请求方法、URL和时间
• 点击请求可以查看详细信息，包括请求头、参数和响应数据

3. 回放请求

• 在请求详情页面点击"重放"按钮
• 插件会使用相同的参数重新发送请求
• 可以查看新的响应结果

4. Diff 对比

• 在请求列表中选择两个请求
• 点击"对比请求"按钮
• 可以看到两个请求的差异，包括：
  • URL差异
  • 请求头差异
  • 请求参数差异
  • 响应数据差异

5. 修改请求

• 在请求详情页面可以修改：
  • 域名
  • 请求头
  • URL参数
  • 请求体
• 修改后点击"发送"按钮
• 可以对比修改前后的差异

6. 分组管理

• 点击"添加分组"创建新的分组
• 可以将请求拖放到不同分组中
• 使用分组筛选器查看特定分组的请求

注意事项

1. 插件需要网页请求权限才能正常工作
2. 建议在开发/测试环境使用，避免在生产环境使用
3. 请注意保护捕获的数据，可能包含敏感信息
4. 大量请求可能会占用较多内存，建议定期清理

开发相关

技术栈

• TypeScript
• Chrome Extension API
• Webpack
• React (用于UI构建)

开发命令

# 开发模式构建
npm run dev

# 监听模式
npm run watch

# 生产模式构建
npm run prod

目录结构

api-diff-plugin/
├── src/
│   ├── background/     # 后台脚本
│   ├── popup/         # 弹出窗口
│   ├── content/       # 内容脚本
│   ├── utils/         # 工具函数
│   └── icons/         # 图标资源
├── dist/              # 构建输出
├── scripts/           # 构建脚本
└── public/           # 静态资源