内容
# 浏览器变异
浏览器变异捕获在 Codex 应用程序内浏览器中进行的视觉编辑，并将它们转换为 Codex 的结构化实现意图。
它适用于用户拥有的本地开发页面，例如 `http://localhost:5174`、`http://127.0.0.1:3000`，以及类似的环回目标。本地 HTML 文件可以通过内置的环回静态服务器提供。
## 它包含什么
浏览器变异是一个社区 MIT 项目。它作为以下内容提供：
- 一个独立的本地收集器/代理
- 一个 Codex 技能
- 一个 Codex 插件清单
- 一个 MCP 服务器实现
<p align="center">
<img src="https://github.com/user-attachments/assets/bbe3bb60-a4e0-40bd-8089-3dafc930b3c1" alt="浏览器变异演示" width="100%">
</p>
## 为什么使用浏览器变异
浏览器使用已经可以在自动化过程中突出和注释浏览器目标。浏览器变异用于不同的步骤：将视觉编辑转换为 Codex 可以应用于源代码的实现意图。
在以下情况下使用浏览器变异：
- 文本、样式、布局、图标、移动、调整大小、重新父级、重新排序、注释和删除更改的前后记录
- 元素身份、选择器提示、邻近布局上下文和计算样式快照
- 可选的 React 开发模式源提示（当可用时）
- 显式的选定元素或会话注释，用于实现指令
- 类似 Canva 的移动指导，带有附近的 DOM 对齐、间距标签、轴锁定和仅中心对齐控件
- 用户按下 **发送** 后的捕获编辑有效载荷
- 从人工视觉编辑到源代码补丁的可重复交接
简而言之：浏览器使用对于打开、检查和与浏览器页面交互很有用。浏览器变异捕获了更改的内容和原因，以便 Codex 可以将视觉编辑转换为代码。
## 移动模式
移动模式旨在实现精确的视觉对齐，而不会将页面变成嘈杂的布局编辑器。
- 对齐线根据附近的 DOM 元素对齐，包括中心、边缘和间距参考。
- 间距指南使用与对齐线不同的颜色，并包含在移动有效载荷中。
- 按住 `Shift` 键拖动时，锁定主轴。
- 按住 `C` 键拖动时，在边缘对齐太近时优先使用中心对齐。
- 按住 `Alt` 键拖动时，暂时绕过对齐。
- 移动编辑首先暂存。移动按钮更改为勾选图标；单击它以记录最终位置。按 **发送** 也会记录一个待处理的移动，然后再发布有效载荷。
- 跨堆叠表面移动的元素在拖动过程中会被提升，以便它们可以定位在标头、合成器和其他更高层上。
## Codex 用户快速入门
在一个新的 Codex 线程中，这应该足够了：
```text
安装此 Codex 技能/插件：
https://github.com/JosPMSilva/Browser-mutation
```
要求：在 Windows、macOS 或 Linux 上使用 `git`、`node` 和 Codex 桌面版。
将存储库克隆到标准本地插件位置：
```bash
mkdir -p ~/plugins
git clone https://github.com/JosPMSilva/Browser-mutation.git ~/plugins/browser-mutation
cd ~/plugins/browser-mutation
node scripts/install-codex.mjs
node scripts/doctor.mjs
```
重启 Codex 桌面版。在 Codex 中，打开 **插件 > 本地 Codex 工具 > 浏览器变异**，单击 **添加到 Codex** 或启用 **浏览器变异**，并确保 **浏览器变异** 和 **变异** 切换按钮均已启用。
在启用后启动一个新的 Codex 线程，以便重新加载技能列表和 MCP 配置。
## 从 Git 更新
对于现有的安装，请在不重写 Codex 配置的情况下更新插件文件：
```bash
cd ~/plugins/browser-mutation
git pull
node scripts/update-codex.mjs
```
请勿重新运行 `node scripts/install-codex.mjs` 进行常规更新。安装程序仅用于首次安装或故意修复配置。
然后在 Codex 应用程序内浏览器中打开本地应用程序并询问：
```text
在此页面上使用浏览器变异。
```
## 本地收集器
```bash
node scripts/start-collector.mjs --target http://localhost:5174
```
对于静态 HTML 文件或文件夹：
```bash
node scripts/start-collector.mjs --file ./index.html
node scripts/start-collector.mjs --root ./dist
```
本地收集器为目标页面启动浏览器代理，并记录从浏览器变异叠加层发送的编辑。有关完整工作流程，请参阅[使用指南](docs/usage.md)。
叠加层默认为**交互**模式，以便正常的应用程序点击通过。只有在选择要变异的元素时才使用**选择元素**、`Alt+Click` 或 `Ctrl+Alt+S`。使用 `Ctrl+Alt+I` 返回交互模式，使用 `Ctrl+Alt+D` 将面板停靠。
## 文档
- [Codex 安装指南](docs/codex-install.md)
- [使用指南](docs/usage.md)
- [第三方通知](THIRD_PARTY_NOTICES.md)
- [隐私](PRIVACY.md)
- [条款](TERMS.md)
- [安全](SECURITY.md)
## 开发
运行 MCP 探针：
```bash
node scripts/doctor.mjs
```
## 许可证
MIT
MCP 市场