Skip to content

Commit 5d5518a

Browse files
Hidden-NodeHidden-Node
authored
Add files via upload
0 parents  commit 5d5518a

4 files changed

Lines changed: 1828 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Chain Proxy Builder
2+
3+
A powerful, standalone web application to chain two proxy configurations into a single Xray JSON configuration. This tool is specifically designed to help users combine multiple proxy layers for enhanced connection stability and fixed IP masking.
4+
5+
## 🚀 Features
6+
7+
- **Dual Config Chaining**: Easily chain a primary proxy (e.g., Worker/CDN) with a secondary chain proxy.
8+
- **Protocol Support**: Supports **VLESS**, **VMess**, **Trojan**, **Shadowsocks**, **SOCKS**, and **HTTP**.
9+
- **ECH Support**: Automatically parses and includes `echConfigList` for secure connections.
10+
- **Xray JSON Generation**: Generates a clean, optimized JSON configuration ready for use in Xray clients.
11+
- **Premium UI**: Modern dark-mode interface with glassmorphism, real-time parsing, and flow visualization.
12+
- **Client-Side Only**: All processing happens in your browser. No data is sent to any server.
13+
14+
## 🔗 How it Works
15+
16+
The application generates a configuration that routes your traffic in this sequence:
17+
`You ➔ Config 1 (Proxy) ➔ Config 2 (Chain) ➔ Internet`
18+
19+
This ensures that your final outgoing IP address is that of the **Chain Proxy**, providing a consistent identity for the websites you visit.
20+
21+
## 🛠️ Usage
22+
23+
1. **Config 1**: Paste your first proxy URL (this can be a Cloudflare Worker, CDN, or any other proxy).
24+
2. **Config 2**: Paste your second proxy URL (the one you want to chain through).
25+
3. **Settings**: Adjust DNS servers or SOCKS ports if needed.
26+
4. **Generate**: Click "Generate Chained Config" to get your JSON.
27+
5. **Deploy**: Copy the JSON or download it as a file to use in your preferred VPN client.
28+
29+
## 📦 Tech Stack
30+
31+
- **HTML5**: Semantic structure.
32+
- **CSS3**: Custom variables, glassmorphism, and animations.
33+
- **JavaScript**: Core logic for URL parsing and JSON generation.
34+
35+
## 🛡️ Credits
36+
37+
This project draws inspiration and logic from the [BPB-Worker-Panel](https://github.com/bia-pain-bache/BPB-Worker-Panel) project.
38+
39+
---
40+
Built with ❤️ for the privacy community.

‎index.html‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Chain Proxy Builder</title>
8+
<meta name="description"
9+
content="Chain two proxy configs together — supports VLESS, VMess, Trojan, Shadowsocks, SOCKS, HTTP">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
14+
rel="stylesheet">
15+
<link rel="stylesheet" href="style.css">
16+
</head>
17+
18+
<body>
19+
<div class="bg-glow bg-glow-1"></div>
20+
<div class="bg-glow bg-glow-2"></div>
21+
<div class="bg-glow bg-glow-3"></div>
22+
23+
<div class="container">
24+
<!-- Header -->
25+
<header class="header">
26+
<div class="logo">
27+
<span class="logo-icon">🔗</span>
28+
<h1>Chain Proxy Builder</h1>
29+
</div>
30+
<p class="subtitle">Chain two proxy configs into a single Xray configuration</p>
31+
<div class="protocol-badges">
32+
<span class="badge badge-vless">VLESS</span>
33+
<span class="badge badge-vmess">VMess</span>
34+
<span class="badge badge-trojan">Trojan</span>
35+
<span class="badge badge-ss">Shadowsocks</span>
36+
<span class="badge badge-socks">SOCKS</span>
37+
<span class="badge badge-http">HTTP</span>
38+
</div>
39+
</header>
40+
41+
<!-- Config Inputs -->
42+
<div class="configs-grid">
43+
<!-- Config 1: Main Proxy -->
44+
<div class="config-card" id="config1-card">
45+
<div class="card-header">
46+
<div class="card-title">
47+
<span class="card-icon">1️⃣</span>
48+
<div>
49+
<h2>Config 1 — Main Proxy</h2>
50+
<p class="card-hint">Any proxy config (this becomes the <code>proxy</code> outbound)</p>
51+
</div>
52+
</div>
53+
<span class="protocol-tag" id="protocol1-tag">—</span>
54+
</div>
55+
<div class="input-group">
56+
<textarea id="config1-input" class="config-input"
57+
placeholder="Paste proxy URL here...&#10;e.g. vless://uuid@address:port?params#remark"
58+
spellcheck="false"></textarea>
59+
<button class="btn-clear" id="clear1" title="Clear">✕</button>
60+
</div>
61+
<div class="parsed-info" id="parsed1"></div>
62+
</div>
63+
64+
<!-- Config 2: Chain Proxy -->
65+
<div class="config-card" id="config2-card">
66+
<div class="card-header">
67+
<div class="card-title">
68+
<span class="card-icon">2️⃣</span>
69+
<div>
70+
<h2>Config 2 — Chain Proxy</h2>
71+
<p class="card-hint">External proxy to chain through (this becomes the <code>chain</code>
72+
outbound)</p>
73+
</div>
74+
</div>
75+
<span class="protocol-tag" id="protocol2-tag">—</span>
76+
</div>
77+
<div class="input-group">
78+
<textarea id="config2-input" class="config-input"
79+
placeholder="Paste chain proxy URL here...&#10;e.g. vless://uuid@server:port?params#remark"
80+
spellcheck="false"></textarea>
81+
<button class="btn-clear" id="clear2" title="Clear">✕</button>
82+
</div>
83+
<div class="parsed-info" id="parsed2"></div>
84+
</div>
85+
</div>
86+
87+
<!-- Chain Flow Visualization -->
88+
<div class="chain-flow" id="chain-flow">
89+
<div class="flow-node flow-you">
90+
<span class="flow-emoji">💻</span>
91+
<span>You</span>
92+
</div>
93+
<div class="flow-arrow">→</div>
94+
<div class="flow-node flow-proxy" id="flow-proxy">
95+
<span class="flow-emoji">☁️</span>
96+
<span id="flow-proxy-label">Config 1</span>
97+
</div>
98+
<div class="flow-arrow">→</div>
99+
<div class="flow-node flow-chain" id="flow-chain">
100+
<span class="flow-emoji">🔗</span>
101+
<span id="flow-chain-label">Config 2</span>
102+
</div>
103+
<div class="flow-arrow">→</div>
104+
<div class="flow-node flow-target">
105+
<span class="flow-emoji">🌐</span>
106+
<span>Internet</span>
107+
</div>
108+
</div>
109+
110+
<!-- Settings -->
111+
<div class="settings-card">
112+
<h3 class="settings-title">⚙️ Configuration Options</h3>
113+
<div class="settings-grid">
114+
<div class="setting-item">
115+
<label for="dns-server">Remote DNS</label>
116+
<select id="dns-server">
117+
<option value="https://8.8.8.8/dns-query">Google DoH (8.8.8.8)</option>
118+
<option value="https://dns.google/dns-query">Google DoH (dns.google)</option>
119+
<option value="https://dns.adguard-dns.com/dns-query">AdGuard DoH</option>
120+
<option value="https://dns.quad9.net/dns-query">Quad9 DoH</option>
121+
</select>
122+
</div>
123+
<div class="setting-item">
124+
<label for="socks-port">SOCKS Port</label>
125+
<input type="number" id="socks-port" value="10808" min="1" max="65535">
126+
</div>
127+
<div class="setting-item">
128+
<label for="log-level">Log Level</label>
129+
<select id="log-level">
130+
<option value="none">None</option>
131+
<option value="warning" selected>Warning</option>
132+
<option value="error">Error</option>
133+
<option value="info">Info</option>
134+
<option value="debug">Debug</option>
135+
</select>
136+
</div>
137+
</div>
138+
</div>
139+
140+
<!-- Generate Button -->
141+
<div class="generate-section">
142+
<button class="btn-generate" id="btn-generate" disabled>
143+
<span class="btn-icon">⚡</span>
144+
Generate Chained Config
145+
</button>
146+
<p class="generate-hint" id="generate-hint">Paste both configs above to enable</p>
147+
</div>
148+
149+
<!-- Output -->
150+
<div class="output-section" id="output-section" style="display:none;">
151+
<div class="output-header">
152+
<h3>📋 Generated Xray Configuration</h3>
153+
<div class="output-actions">
154+
<button class="btn-copy" id="btn-copy" title="Copy to clipboard">
155+
<span class="copy-icon">📋</span> Copy
156+
</button>
157+
<button class="btn-download" id="btn-download" title="Download as JSON">
158+
<span class="download-icon">💾</span> Download
159+
</button>
160+
</div>
161+
</div>
162+
<div class="output-remark" id="output-remark"></div>
163+
<pre class="output-code"><code id="output-json"></code></pre>
164+
</div>
165+
166+
<!-- Info -->
167+
<details class="info-section">
168+
<summary>ℹ️ How Chain Proxy Works</summary>
169+
<div class="info-content">
170+
<p>A <strong>chain proxy</strong> routes your traffic through two proxies in sequence:</p>
171+
<div class="info-flow">
172+
<code>You → Config 1 (Worker/CDN) → Config 2 (Chain) → Internet</code>
173+
</div>
174+
<p>This fixes your outgoing IP address to the chain proxy's IP, ensuring a consistent IP for all
175+
destinations.</p>
176+
<h4>Supported Protocols</h4>
177+
<ul>
178+
<li><strong>VLESS</strong> — <code>vless://uuid@server:port?params</code></li>
179+
<li><strong>VMess</strong> — <code>vmess://base64-json</code></li>
180+
<li><strong>Trojan</strong> — <code>trojan://password@server:port?params</code></li>
181+
<li><strong>Shadowsocks</strong> — <code>ss://base64(method:pass)@server:port</code></li>
182+
<li><strong>SOCKS</strong> — <code>socks://user:pass@server:port</code></li>
183+
<li><strong>HTTP</strong> — <code>http://user:pass@server:port</code></li>
184+
</ul>
185+
<h4>Supported Transports</h4>
186+
<p>TCP, TCP (http header), WebSocket, gRPC, HTTPUpgrade</p>
187+
<h4>Supported TLS</h4>
188+
<p>TLS, Reality, None</p>
189+
</div>
190+
</details>
191+
192+
<footer class="footer">
193+
<p>Based on <a href="https://github.com/bia-pain-bache/BPB-Worker-Panel"
194+
target="_blank">BPB-Worker-Panel</a> chain proxy logic</p>
195+
</footer>
196+
</div>
197+
198+
<script src="script.js"></script>
199+
</body>
200+
201+
</html>

0 commit comments

Comments
 (0)