纯前端单文件 · 开箱即用的 Clash 链式代理配置生成工具
将机场入口节点与你的私人 VPS 落地节点无缝拼接，一键生成 Clash Meta 预处理脚本
ClashHop 是一个轻量级的纯前端工具，专为解决手动编写 Clash 链式代理（Relay）配置繁琐易错的问题而生。
通过该工具，你可以直接在浏览器中粘贴你的 VPS 节点分享链接，它会自动解析并生成一段标准的 Clash Meta JavaScript 预处理脚本。将这段脚本放入你的 Clash 配置中，即可自动让流量先经过机场节点（第一跳），再通过你的 VPS（落地节点）发出。
完美适用场景：
- 希望使用机场的优质线路转发流量，但要求最终出口 IP 是自己干净的海外 VPS。
- 需要指定特定域名的流量强制走自己的落地节点。
在线生成器地址： https://ziren28.github.io/ClashHop/
只需简单 4 步，即可在 Clash 客户端（以 Clash Verge 为例）中完成链式代理的配置：
访问上方在线配置生成器，在输入框中粘贴你的 VPS 落地节点分享链接并添加。配置完成后，点击底部的 「⚡ 生成 Clash 预处理脚本」，并复制生成的 JavaScript 代码。
打开 Clash Verge，进入左侧的 「订阅」 页面。 找到界面中的 「全局扩展脚本」 卡片，右键点击该卡片，选择 「编辑」。 将刚才复制的脚本代码完整粘贴进去，保存并关闭。
(注：此处请替换为你图 1 的相对路径)
脚本生效后，进入左侧的 「代理」 -> 「代理组」 页面。 在顶部你会发现自动生成了一个名为 「🛫 第一跳-机场入口」 的全新策略组。 在这里，选择一条你认为网络质量最好、速度最快的机场节点（例如：香港 IEPL 专线）作为中转的入口。
(注：此处请替换为你图 2 的相对路径)
向下滑动，找到你日常控制全局路由的主策略组（通常名为 「Proxies」、「节点选择」 或 「手动切换」）。
在列表中找到你刚才通过工具添加的、带有 ⛓️ 落地 前缀的 VPS 节点，并选中它。
(注：此处请替换为你图 3 的相对路径)
🎉 大功告成！ 现在你的所有科学上网流量，都会呈现：本机 ──► 机场节点（第一跳） ──► 你的VPS（落地） ──► 目标网站 的完美链式路由。
本项目采用 纯 Vanilla JS + HTML + CSS 编写，没有任何复杂的构建工具链（如 Webpack/Vite）或庞大的框架（如 Vue/React），主打极致轻量与安全。
- 📦 单文件运行： 只有一个 HTML 文件，双击即可在任意浏览器打开使用。
- 🔒 绝对安全： 所有解析与代码生成都在本地浏览器完成，数据保存在本地
localStorage，零网络请求。 - 📋 智能解析： 支持直接粘贴分享链接（或 Base64 编码的链接）进行一键快速添加。
- 🔀 规则分流： 内置链路分流规则配置，指定域名流量强制走代理链。
- 🖱️ 体验流畅： 支持节点拖拽排序、一键批量导入、节点快捷编辑与删除。
- 🌗 自适应 UI： 沉浸式深色模式设计，附带背景光效与流畅的 Toast 动画交互。
支持直接解析以下协议的标准分享链接或带密码的 URI：
| 协议格式 | 链接示例 |
|---|---|
| Shadowsocks | ss://base64_string#name |
| VLESS | vless://uuid@server:port?type=tcp&security=reality...#name |
| VMess | vmess://base64_json |
| SOCKS5 | socks5://user:pass@server:port#name socks5://server:port#name |
| HTTP / HTTPS | http://user:pass@server:port#name https://server:port#name |
- 在“快速添加”输入框中，粘贴你的 VPS 节点分享链接（支持
ss://,vless://,vmess://等）。 - 可选填一个易于识别的“自定义名称”（例如：
⛓️ 落地-美西）。 - 点击 「✚ 添加」，或直接按回车键。
- （进阶）点击 「📋 批量导入」 可一次性粘贴多个链接，每行一个。
如果你只希望特定网站（如 ChatGPT、Netflix）走你的私人 VPS，在“链路分流规则”区添加匹配规则：
- 例如：
DOMAIN-SUFFIX,openai.com - 例如：
DOMAIN-KEYWORD,netflix
- 第一跳策略组名称： 自动生成的机场节点集合组名，默认为
🛫 第一跳-机场入口。 - 排除关键词： 自动过滤订阅中的冗余节点（如包含“剩余流量”、“官网”的节点）。
- 主策略组名称匹配： 脚本会自动寻找你的 Clash 配置文件中的主代理组（如
Proxies,节点选择），并将生成的代理链注入其中。如果你的主策略组名字很特殊，请在这里添加。
- 点击底部的 「⚡ 生成 Clash 预处理脚本」。
- 点击代码框右上角的 「📋 复制」。
- 将复制的代码粘贴到你的 Clash Meta / 订阅转换器的预处理脚本 (
script) 区域中。
ClashHop 生成的是 JavaScript 代码。当你的客户端加载该配置时，引擎会执行以下逻辑：
- 解析注入：将你在网页端配置的 VPS 节点注入到
proxies列表中。 - 清洗数据：根据排除关键词过滤机场的无用节点，提取出真正可用的“机场节点”。
- 构建第一跳：创建一个包含所有机场节点的
select策略组（作为第一跳）。 - 串联链路：利用 Clash Meta 的
dialer-proxy属性，将你的 VPS 节点的出站流量强行指向“第一跳”策略组，形成代理链：本机 -> 机场节点 -> 你的VPS -> 目标网站。 - 规则接管：将你配置的分流规则插入到原有规则的最前面，确保精准路由。
由于项目是零依赖的单文件，你可以选择任意一种方式运行：
将仓库代码克隆或下载到本地，双击目录下的 index.html 即可在浏览器中愉快使用。
将 index.html 上传到任何支持静态页面的服务即可，例如：
- GitHub Pages
- Cloudflare Pages
- Vercel / Netlify
- 你的私人 Nginx / Apache 服务器