# chrome-extension-reqable

**Repository Path**: gavin78/chrome-extension-reqable

## Basic Information

- **Project Name**: chrome-extension-reqable
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Reqable

一个功能强大的 Chrome 浏览器 HTTP 请求修改插件，支持修改请求头、请求体、响应头和响应体，基于规则引擎实现灵活的匹配和修改。

## 📋 功能特性

- **请求拦截与修改**：拦截并修改 HTTP 请求的 URL、请求头和请求体
- **响应拦截与修改**：拦截并修改 HTTP 响应的响应头和响应体
- **规则引擎**：基于灵活的规则匹配引擎，支持多种匹配条件和修改动作
- **多种匹配方法**：支持等于、包含、正则匹配和 JSONPath 匹配
- **多种修改方式**：
  - 简单修改：直接修改对应项的值
  - 静态数据：使用代码编辑器编辑完整数据
  - 高级模式：编写自定义 JavaScript 脚本实现复杂修改逻辑
- **可视化配置**：直观的界面配置规则，无需编写代码
- **规则管理**：支持规则的启用/禁用、编辑和删除
- **导入/导出**：支持规则的导入和导出，方便备份和共享

## 🛠️ 技术栈

- **框架**：Plasmo
- **前端**：React 18 + TypeScript
- **样式**：Tailwind CSS
- **UI组件**：shadcn/ui
- **架构**：基于 Chrome WebRequest API 和 Content Scripts

## 🏗️ 架构设计

### 核心组件

1. **Background Script** (`background.ts`)
   - 处理 HTTP 请求拦截
   - 实现规则匹配和修改逻辑
   - 管理规则引擎实例

2. **Rule Engine** (`lib/rule-engine.ts`)
   - 规则匹配引擎：匹配请求/响应与规则
   - 修改动作执行器：执行规则定义的修改动作
   - 高级模式脚本执行：安全执行用户自定义脚本

3. **Content Script** (`content.tsx`)
   - 拦截并修改响应体
   - 处理 Fetch API 和 XMLHttpRequest

4. **Storage** (`lib/storage.ts`)
   - 基于 IndexedDB 的规则存储
   - 规则的增删改查操作

5. **UI 页面**
   - `popup.tsx`：规则列表和全局开关
   - `options.tsx`：规则配置界面

### 工作流程

1. 用户在插件中配置规则
2. 规则存储到 IndexedDB
3. 浏览器发起 HTTP 请求
4. Background Script 拦截请求
5. 规则引擎匹配请求
6. 执行匹配规则的修改动作
7. 对于响应体修改，通过 Content Script 处理
8. 返回修改后的请求/响应

## 🚀 快速开始

### 安装与使用

1. **克隆仓库**
   ```bash
   git clone https://github.com/your-username/reqable.git
   cd reqable
   ```

2. **安装依赖**
   ```bash
   pnpm install
   ```

3. **开发模式**
   ```bash
   pnpm dev
   ```

4. **构建生产版本**
   ```bash
   pnpm build
   ```

5. **加载到 Chrome**
   - 打开 Chrome 浏览器
   - 访问 `chrome://extensions/`
   - 开启「开发者模式」
   - 点击「加载已解压的扩展程序」
   - 选择项目的 `build/chrome-mv3-dev` 目录

### 基本使用

1. **创建规则**
   - 点击插件图标打开 popup 页面
   - 点击「添加规则」按钮（或进入 options 页面）
   - 填写规则名称和匹配条件
   - 添加修改动作
   - 保存规则

2. **启用规则**
   - 在 popup 页面中，确保全局开关和规则开关均已开启

3. **测试规则**
   - 访问匹配规则的网站或 API
   - 使用开发者工具检查请求/响应是否被修改

## 📝 规则配置

### 匹配条件

每个规则可以包含多个匹配条件，所有条件都满足时规则才会生效。

| 配置项 | 匹配方法 | 说明 |
|--------|----------|------|
| 请求方法 | 等于、包含 | 匹配 HTTP 请求方法（GET、POST 等） |
| 请求 URL | 等于、包含、正则匹配 | 匹配请求 URL |
| 请求头 | 等于、包含、正则匹配 | 匹配请求头字段和值 |
| 请求体 | 等于、包含、正则匹配、JSONPath | 匹配请求体内容 |
| 响应头 | 等于、包含、正则匹配 | 匹配响应头字段和值 |
| 响应体 | 等于、包含、正则匹配、JSONPath | 匹配响应体内容 |

### 修改动作

每个规则可以包含多个修改动作，按照顺序执行。

#### 1. 简单修改

| 可修改项 | 操作 | 参数 | 值 |
|----------|------|------|-----|
| 地址重写 | 添加/覆盖 | - | 新的 URL |
| 请求头 | 添加/覆盖、删除 | 头字段名 | 头字段值 |
| 请求体 | 添加/覆盖、删除 | JSONPath | 新的值 |
| 响应头 | 添加/覆盖、删除 | 头字段名 | 头字段值 |
| 响应体 | 添加/覆盖、删除 | JSONPath | 新的值 |

#### 2. 静态数据

直接替换完整的请求体或响应体，支持使用代码编辑器编写数据。

#### 3. 高级模式

编写自定义 JavaScript 脚本，实现复杂的修改逻辑。

**请求体修改示例**：
```javascript
function modifyRequestBody(args) {
  const { method, url, body, bodyAsJson } = args;
  // 自定义修改逻辑
  return JSON.stringify({
    ...bodyAsJson,
    modified: true
  });
}
```

**响应体修改示例**：
```javascript
function modifyResponse(args) {
  const { response, responseJSON } = args;
  // 自定义修改逻辑
  return JSON.stringify({
    ...responseJSON,
    modified: true
  });
}
```

## 🔧 开发指南

### 项目结构

```
reqable/
├── assets/           # 静态资源
├── components/       # React 组件
├── lib/              # 核心逻辑
│   ├── rule-engine.ts    # 规则引擎
│   ├── storage.ts        # 存储管理
│   └── utils.ts          # 工具函数
├── test/             # 测试文件
├── background.ts     # Background Script
├── content.tsx       # Content Script
├── options.tsx       # Options Page
├── popup.tsx         # Popup Page
└── package.json      # 项目配置
```

### 开发命令

- `pnpm dev`：启动开发服务器
- `pnpm build`：构建生产版本
- `pnpm package`：打包扩展

### 测试

```bash
# 运行规则引擎测试
npx ts-node-esm test/rule-engine.test.ts
```

## 🤝 贡献指南

欢迎贡献代码和提出建议！

1. Fork 仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

MIT License

## 📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

- GitHub Issues：[https://github.com/your-username/reqable/issues](https://github.com/your-username/reqable/issues)
- 邮箱：your-email@example.com

## 🙏 致谢

- [Plasmo](https://docs.plasmo.com/) - 优秀的浏览器扩展开发框架
- [shadcn/ui](https://ui.shadcn.com/) - 精美的 UI 组件库
- [Chrome WebRequest API](https://developer.chrome.com/docs/extensions/reference/webRequest/) - 强大的请求拦截能力

---

**Reqable** - 让 HTTP 请求修改变得简单高效！