Easy Proxy

前端 CDN 资源代理工具，支持正则匹配、规则分组、可视化编辑

前端 CDN 资源代理工具，支持正则匹配、规则分组、可视化编辑 # Easy Proxy 功能介绍 ## 概述 Easy Proxy 是一款专为前端开发者设计的 Chrome 浏览器扩展，用于将线上 CDN 资源代理到本地或其他地址。通过正则匹配规则，实现灵活的资源重定向，帮助开发者在生产环境中快速调试代码。 --- ## 核心功能 ### 1. 正则匹配代理 使用 RE2 正则语法匹配请求 URL，支持捕获组替换。 **示例：** | 匹配规则 | 目标地址 | 说明 | |----------|----------|------| | `https://cdn\.example\.com/(.+)\.js` | `http://localhost:3000/$1.js` | 将 CDN JS 文件代理到本地 | | `https://api\.example\.com/(.*)` | `http://localhost:8080/$1` | 将 API 请求代理到本地服务 | | `https://(.+)\.cdn\.com/(.*)` | `http://localhost:3000/$2` | 多 CDN 域名统一代理 | **支持的捕获组：** `$1`、`$2`、`$3` ... `$9` ### 2. 规则分组管理 按项目或场景组织代理规则，便于管理复杂的代理需求。 **功能：** - 创建、重命名、删除代理组 - 整组启用/禁用 - 拖拽排序调整优先级 - 组内规则独立管理 **限制：** - 最多 50 个代理组 - 每组最多 100 条规则 ### 3. 多维度规则启用 支持三种启用模式，满足不同使用场景： #### 全局模式（默认） - 所有启用的规则对所有页面生效 - 适用于需要全局代理的场景 #### 域名模式 - 将代理组绑定到特定域名 - 支持一个域名绑定多个代理组 - 适用于按项目隔离代理规则 #### 标签页模式 - 将代理组绑定到特定标签页 - 适用于临时调试某个页面 - 标签页关闭后自动清理绑定 ### 4. 双编辑模式 #### 可视化模式 - 表单化编辑规则 - 实时规则测试 - 适合新手使用 #### JSON 模式 - 直接编辑 JSON 配置 - 支持批量修改 - 适合高级用户 ### 5. 实时规则测试 编辑规则时输入测试 URL，即可预览匹配结果： - 显示是否匹配 - 显示替换后的目标地址 ### 6. 冲突检测 启发式检测可能匹配相同 URL 的规则冲突： - 检测正则表达式重叠 - 提供示例 URL 验证 - 帮助发现潜在的规则冲突 ### 7. 导入/导出 **导出：** - 导出为 JSON 文件 - 支持选择性导出部分代理组 **导入：** - 支持合并或覆盖两种策略 - 自动生成新 ID 避免冲突 - 文件大小限制 1MB ### 8. Badge 状态显示 工具栏图标实时显示当前状态： | 状态 | 图标 | Badge | 说明 | |------|------|-------|------| | 开启 | 彩色 | `ON` | 全局开关开启 | | 关闭 | 灰色 | `OFF` | 全局开关关闭 | | 有匹配 | 彩色 | 数字 | 显示匹配规则数量（如 `3`、`99+`） | --- ## 界面说明 ### Popup 弹窗 点击扩展图标打开，提供快捷操作： ``` ┌─────────────────────────────────┐ │ [全局开关] ON/OFF │ ├─────────────────────────────────┤ │ 模式: ○全局 ○域名 ○标签页 │ │ 当前: example.com │ ├─────────────────────────────────┤ │ ▶ 代理组A [绑定] [开关]│ │ ▶ 代理组B [绑定] [开关]│ │ ▶ 代理组C [绑定] [开关]│ ├─────────────────────────────────┤ │ 打开配置页 [刷新] [导��] [导出]│ └─────────────────────────────────┘ ``` **操作说明：** - 单击代理组：展开/收起规则列表 - 双击代理组：打开配置页编辑 - 绑定按钮：域名/标签页模式下绑定当前页面 ### Options 配置页 右键扩展图标 → 选项，打开完整配置界面： ``` ┌──────────────────────────────────────────────────────┐ │ Easy Proxy 配置 [🔍 检测冲突] │ ├──────────────────────────────────────────────────────┤ │ 运行模式: ○全局 ○域名 ○标签页 │ │ ─────────────────────────────────────────────────── │ │ 域名绑定管理 | 标签页绑定管理 │ ├──────────────┬───────────────────────────────────────┤ │ [+新建] │ 代理组A │ │ ───────── │ [可视化模式] [JSON模式] │ │ 🟢 代理组A │ ─────────────────────────────────── │ │ ○ 代理组B │ 规则列表... │ │ ○ 代理组C │ [+添加规则] │ └──────────────┴───────────────────────────────────────┘ ``` **功能区域：** - 左侧栏：代理组管理 - 右侧主区域：规则编辑 - 顶部设置面板：模式切换、绑定管理 --- ## 规则匹配状态 ### 颜色标识 | 颜色 | 状态 | 含义 | |------|------|------| | 🟢 绿色 | 已匹配 | 规则被实际匹配到 | | 🟠 橙色 | 生效中 | 规则已启用但尚未命中 | | 🔵 蓝色 | 已绑定 | 代理组已绑定到当前页面 | | ⚪ 灰色 | 未生效 | 规则或组未启用 | ### 状态追踪原理 基于 `chrome.declarativeNetRequest.onRuleMatchedDebug` API 实现： - 监听真实的网络请求 - 记录实际匹配到的规则 - 确保状态与浏览器行为一致 > **注意：** 此功能仅在开发者模式下可用。 --- ## 使用场景 ### 场景一：本地开发调试 将线上 CDN 资源代理到本地开发服务器： ``` 匹配规则: https://cdn\.company\.com/static/(.+)\.js 目标地址: http://localhost:8080/static/$1.js ``` ### 场景二：API 接口调试 将线上 API 请求代理到本地 Mock 服务： ``` 匹配规则: https://api\.company\.com/v1/(.*) 目标地址: http://localhost:3000/mock/$1 ``` ### 场景三：多项目并行开发 使用域名模式隔离不同项目的代理规则： - `project-a.example.com` → 绑定代理组 A - `project-b.example.com` → 绑定代理组 B ### 场景四：临时调试 使用标签页模式临时调试某个页面： - 打开目标页面 - 切换到标签页模式 - 绑定需要的代理组 --- ## 注意事项 1. **正则语法限制** - 使用 RE2 语法 - 不支持前瞻断言 `(?=...)` - 不支持后顾断言 `(?<=...)` - 不支持反向引用 `\1` 2. **规则数量限制** - 最多 50 个代理组 - 每组最多 100 条规则 - DNR 动态规则上限 5000 条 3. **开发者模式** - 规则匹配状态追踪需要开发者模式 - 生产环境安装时此功能不可用 4. **HTTPS 限制** - 无法代理 HTTPS 请求到 HTTP 目��（混合内容限制） - 建议本地服务也使用 HTTPS --- ## 快捷键 暂不支持自定义快捷键，可通过以下方式操作： - 点击扩展图标：打开 Popup - 右键扩展图标 → 选项：打开配置页 - 双击代理组：快速打开配置页编辑