# ReRes

**Repository Path**: luckyblank/re-res

## Basic Information

- **Project Name**: ReRes
- **Description**: Change the response of the request. ReRes 可以用来更改页面请求响应的内容，通过指定规则，您可以把请求映射到其他的 url，也可以映射到本机的文件或者目录。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-30
- **Last Updated**: 2026-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

ReRes
=====

> Change the response of the request. ReRes 可以把请求映射到其他的 URL 或本地文件/目录。

本项目已在 **v2.0** 完成现代化重构：

- 框架：**Vue.js 2.7.16** + **Element UI 2.15.14**
- 构建：**Vite 5** (`@vitejs/plugin-vue2`)
- 规范：Chrome Extension **Manifest V3**，使用 `declarativeNetRequest` 实现重定向
- 界面：全新的简洁 UI，支持分组管理、搜索过滤、规则统计、批量启停、导入导出

---

## 目录结构

```text
ReRes-master/
├── public/                     # 静态资源（构建时原样复制到 dist/）
│   ├── manifest.json
│   ├── icon.png
│   └── icon48.png
├── src/
│   ├── background/
│   │   └── index.js            # Service Worker（declarativeNetRequest 注册）
│   ├── popup/
│   │   ├── main.js
│   │   └── App.vue             # 浏览器图标弹窗
│   ├── options/
│   │   ├── main.js
│   │   └── App.vue             # 完整规则管理页
│   ├── components/
│   │   └── RuleEditor.vue      # 共用的规则编辑表单
│   └── utils/
│       └── storage.js          # chrome.storage 封装
├── popup.html                  # Vite 入口
├── options.html                # Vite 入口
├── vite.config.js
├── package.json
└── README.md
```

## 开始开发 / 构建

> 推荐 Node.js ≥ 18。

```bash
# 安装依赖
npm install

# 一次性构建（产物输出到 dist/）
npm run build

# 边改边构建（开发时使用）
npm run dev
```

构建完成后，**`dist/` 目录就是可加载的 Chrome 扩展**：

1. 打开 `chrome://extensions/`
2. 开启右上角「开发者模式」
3. 点击「加载已解压的扩展程序」，选中 `dist/` 文件夹

> ⚠️ 切勿直接加载项目根目录，根目录下的 `popup.html` / `options.html` 仅作为 Vite 入口，不能直接被扩展使用。

## 为什么需要构建步骤？

Chrome MV3 的内容安全策略（CSP）**禁止 `eval` 与 `new Function()`**，而 Vue 模板编译器在运行时正是通过 `new Function()` 把模板字符串编译为渲染函数。因此 MV3 扩展中使用 Vue 的标准做法是 **在构建期完成模板编译**，运行时只加载 `vue.runtime.esm`。本项目通过 Vite + `@vitejs/plugin-vue2` 自动完成这一过程。

## 功能说明

### 添加 / 编辑规则
点击「新建规则」或弹窗内的「添加规则」按钮，填写：

| 字段           | 说明                                                                                  |
| -------------- | ------------------------------------------------------------------------------------- |
| If URL match   | 一个正则表达式，请求 URL 与之匹配时规则生效（不要写开头的 `/` 和结尾的 `/gi`）。      |
| Response       | 映射后的地址，匹配部分会被替换为该值。线上地址以 `http://` / `https://` 开头。        |
| Method         | 限定请求方法，默认 `ALL`。                                                            |
| Group          | 可选的分组名，留空将归类到「未命名」。                                                |

> `Response` 字段支持正则替换（基于 Chrome `declarativeNetRequest` 的 `regexSubstitution`）：
> - `\0` 表示整段匹配
> - `\1` ~ `\9` 表示 `If URL match` 中第 1~9 个捕获组 `( ... )`

### 规则示例

#### 1. 单个 URL 重定向
把对 `test.com` 的请求改打到 `qunar.com`：

| 字段 | 值 |
| --- | --- |
| If URL match | `^https?:\/\/.*test\.com` |
| Response | `http://qunar.com` |

#### 2. 路径前缀转发（类 nginx 反向代理）
把 `http://192.168.2.18:15505/mapi2/*` 下所有多级路径转发到 `http://192.168.3.163:8080/*`：

| 字段 | 值 |
| --- | --- |
| If URL match | `^http://192\.168\.2\.18:15505/mapi2/(.*)$` |
| Response | `http://192.168.3.163:8080/\1` |

效果：

| 原请求 | 实际发出的请求 |
| --- | --- |
| `…/mapi2/aa` | `http://192.168.3.163:8080/aa` |
| `…/mapi2/aa/bb` | `http://192.168.3.163:8080/aa/bb` |
| `…/mapi2/aa/bb?x=1` | `http://192.168.3.163:8080/aa/bb?x=1` |

> ⚠️ 这是**浏览器层面的重定向**，并非真正的服务器反向代理：
> - 浏览器实际访问的是新域名，请求会带上**新的 Origin / Host**
> - 跨域时目标服务器必须返回正确的 **CORS** 响应头（包括预检 `OPTIONS`）
> - 原域名下的 **Cookie 不会**被自动带到新域名
>
> 如果需要完全透明、保留 Origin 的反代，建议使用真正的 nginx / caddy 或前端构建工具的 `devServer.proxy`。

#### 3. 替换 API 主机名
仅替换主机名，路径保持不变：

| 字段 | 值 |
| --- | --- |
| If URL match | `^https?://api\.example\.com/(.*)` |
| Response | `http://localhost:3000/\1` |

### 启用 / 禁用
- 列表中的开关 / 复选框，可单独启停某条规则
- 分组卡片右上角支持「全部启用」/「全部禁用」

### 批量导入 / 导出
点击工具栏中的「导入」/「导出」按钮，JSON 文件结构如下：

```json
[
    {
        "req": "^https?:\\/\\/.*test.com",
        "res": "http://qunar.com",
        "method": "all",
        "group": "默认",
        "checked": false
    }
]
```

### 关于本地文件映射 (`file:///`)
Manifest V3 的 `declarativeNetRequest` 不再支持将请求重定向到 `file:///`，本扩展会自动跳过这类规则。如有本地调试需求，建议使用本地 HTTP 服务器（如 `npx serve`、`live-server`）代替。

## 致谢

- Vue.js · Element UI · Vite
- 旧版本所使用的 AngularJS / Bootstrap / LESS