-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
329 lines (313 loc) ยท 15.4 KB
/
Copy pathindex.html
File metadata and controls
329 lines (313 loc) ยท 15.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Editor Pro - Free Chrome Extension for HTTP Header Modification</title>
<meta name="description" content="Free Chrome extension to modify HTTP request and response headers. Unlimited profiles, 7 languages, real-time editing, zero data collection. Best ModHeader alternative for developers.">
<link rel="canonical" href="https://testacode.github.io/header-editor-pro-free/">
<link rel="icon" type="image/png" sizes="128x128" href="src/assets/icons/icon128.png">
<link rel="icon" type="image/png" sizes="48x48" href="src/assets/icons/icon48.png">
<link rel="icon" type="image/png" sizes="16x16" href="src/assets/icons/icon16.png">
<!-- Open Graph -->
<meta property="og:title" content="Header Editor Pro - Free HTTP Header Editor">
<meta property="og:description" content="Modify HTTP headers in Chrome for free. Unlimited profiles, 7 languages, API testing, CORS debugging. Best ModHeader alternative.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://testacode.github.io/header-editor-pro-free/">
<meta property="og:image" content="https://testacode.github.io/header-editor-pro-free/og-image.png">
<meta property="og:site_name" content="Header Editor Pro">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Header Editor Pro - Free">
<meta name="twitter:description" content="Free Chrome extension for HTTP header modification. Unlimited profiles, zero tracking.">
<meta name="twitter:image" content="https://testacode.github.io/header-editor-pro-free/og-image.png">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Header Editor Pro - Free",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Chrome, Firefox",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"description": "Professional HTTP header editor for Chrome and Firefox. Modify request and response headers with unlimited profiles, real-time editing, and zero data collection.",
"softwareVersion": "2.2.2",
"author": {
"@type": "Person",
"name": "testacode"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "1"
}
}
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.container {
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
margin-bottom: 30px;
}
h2 {
color: #34495e;
margin-top: 35px;
padding-left: 15px;
border-left: 4px solid #3498db;
}
.hero {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
}
.hero h1 {
color: white;
border-bottom: none;
font-size: 2.5em;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2em;
opacity: 0.9;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature {
padding: 20px;
background: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #3498db;
}
.feature h3 {
margin-top: 0;
color: #2c3e50;
}
ul {
padding-left: 20px;
}
li {
margin: 8px 0;
}
.privacy-section {
background: #fff5f5;
border: 1px solid #feb2b2;
padding: 20px;
border-radius: 6px;
margin: 30px 0;
}
.nav {
text-align: center;
margin: 30px 0;
}
.nav a {
display: inline-block;
margin: 0 15px;
padding: 10px 20px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.nav a:hover {
background: #2980b9;
}
.install-btn {
display: inline-block;
background: #27ae60;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
font-size: 1.1em;
margin: 20px 0;
}
.install-btn:hover {
background: #229954;
}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section -->
<div class="hero">
<h1>Header Editor Pro - Free</h1>
<p>Professional HTTP Header Editor for Chrome - Completely Free</p>
<a href="https://chromewebstore.google.com/detail/cpdkigffbilaglfmddclhgfflimpaeim" class="install-btn" target="_blank" rel="noopener">Install from Chrome Web Store</a>
</div>
<!-- Navigation -->
<div class="nav">
<a href="#how-it-works">๐ฏ How It Works</a>
<a href="#features">โจ Features</a>
<a href="privacy.html">๐ Privacy Policy</a>
<a href="https://github.com/testacode/header-editor-pro-free">๐ป GitHub</a>
</div>
<!-- How It Works Section -->
<div id="how-it-works">
<h2>๐ฏ How It Works</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 30px 0;">
<!-- Step 1 -->
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<div style="font-size: 3em; margin-bottom: 15px;">๐ง</div>
<h3 style="color: #2c3e50; margin-bottom: 15px;">1. Install & Open</h3>
<p>Add the extension to Chrome and click the icon in your toolbar. You'll see a professional dark interface with profile circles on the left.</p>
</div>
<!-- Step 2 -->
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<div style="font-size: 3em; margin-bottom: 15px;">โ๏ธ</div>
<h3 style="color: #2c3e50; margin-bottom: 15px;">2. Create Profiles</h3>
<p>Click the "+" circle to create different header configurations. Each profile can have unlimited request and response headers.</p>
</div>
<!-- Step 3 -->
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<div style="font-size: 3em; margin-bottom: 15px;">๐ฏ</div>
<h3 style="color: #2c3e50; margin-bottom: 15px;">3. Add Headers</h3>
<p>Use the "Add header" buttons to create custom HTTP headers. Each header has a checkbox to enable/disable individually.</p>
</div>
<!-- Step 4 -->
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<div style="font-size: 3em; margin-bottom: 15px;">โก</div>
<h3 style="color: #2c3e50; margin-bottom: 15px;">4. Instant Results</h3>
<p>Headers are applied in real-time! Switch profiles by clicking numbered circles. Use the pause button to temporarily disable.</p>
</div>
</div>
<!-- Visual Example -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px; margin: 30px 0; text-align: center;">
<h3 style="margin-bottom: 20px; color: white;">๐ก Perfect For These Scenarios:</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; text-align: left;">
<div>
<h4>๐ API Testing</h4>
<p style="opacity: 0.9;">Add <code>Authorization: Bearer token123</code> for testing authenticated endpoints</p>
</div>
<div>
<h4>๐ CORS Debugging</h4>
<p style="opacity: 0.9;">Add <code>Access-Control-Allow-Origin: *</code> to test cross-origin requests</p>
</div>
<div>
<h4>๐งช Environment Testing</h4>
<p style="opacity: 0.9;">Set <code>X-Environment: staging</code> to test against different backends</p>
</div>
<div>
<h4>๐ญ User Agent Spoofing</h4>
<p style="opacity: 0.9;">Change <code>User-Agent</code> to test mobile vs desktop responses</p>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features">
<h2>โจ Key Features</h2>
<div class="features">
<div class="feature">
<h3>๐ 100% Free Forever</h3>
<p>No subscriptions, no premium tiers, no feature limitations. Everything is completely free, unlike competitors charging $5-15/month.</p>
</div>
<div class="feature">
<h3>๐ฏ Unlimited Profiles</h3>
<p>Create as many header configurations as you need. Most free alternatives limit you to just 3 profiles.</p>
</div>
<div class="feature">
<h3>๐ 7 Languages</h3>
<p>English, ็ฎไฝไธญๆ, ็น้ซไธญๆ, ๆฅๆฌ่ช, ํ๊ตญ์ด, ะ ัััะบะธะน and Espaรฑol โ switch from the toolbar, or let it follow your browser.</p>
</div>
<div class="feature">
<h3>โก Real-time Modification</h3>
<p>Modify request and response headers instantly using Chrome's latest declarativeNetRequest API. No page refreshes needed!</p>
</div>
<div class="feature">
<h3>โ Set or Append</h3>
<p>Toggle any header between set and append mode โ perfect for multi-value headers like Accept, Cookie or Accept-Encoding.</p>
</div>
<div class="feature">
<h3>๐๏ธ Domain & Tab Group Filters</h3>
<p>Scope a profile to specific domains, or to a Chrome tab group โ keep sandbox headers in their tabs and never mix environments again.</p>
</div>
<div class="feature">
<h3>๐จ Professional Interface</h3>
<p>Beautiful dark theme with numbered profile circles, checkboxes for individual headers, and intuitive controls.</p>
</div>
<div class="feature">
<h3>โธ๏ธ Pause Functionality</h3>
<p>Temporarily disable all headers without losing your configurations. Perfect for quick testing comparisons.</p>
</div>
<div class="feature">
<h3>๐พ Import & Export</h3>
<p>Back up or share your profiles as a JSON file with one click, and import configurations โ including profiles exported from ModHeader.</p>
</div>
<div class="feature">
<h3>๐ Privacy First</h3>
<p>Zero data collection, zero tracking. All configurations stored locally on your device only.</p>
</div>
</div>
</div>
<!-- Support Section -->
<div style="background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%); color: white; padding: 40px; border-radius: 8px; margin: 40px 0; text-align: center;">
<h2 style="color: white; border: none; margin-bottom: 20px;">๐ Support This Project</h2>
<p style="font-size: 1.1em; margin-bottom: 25px; opacity: 0.95;">Help keep Header Editor Pro - Free completely free for everyone!</p>
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
<a href="https://buymeacoffee.com/charlybrown" style="display: inline-block; background: #FFDD00; color: #000; padding: 12px 25px; text-decoration: none; border-radius: 6px; font-weight: bold; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
โ Buy Me a Coffee
</a>
<a href="https://github.com/sponsors/testacode" style="display: inline-block; background: #ea4aaa; color: white; padding: 12px 25px; text-decoration: none; border-radius: 6px; font-weight: bold; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
๐ GitHub Sponsors
</a>
</div>
<p style="margin-top: 20px; opacity: 0.9; font-size: 0.95em;">Your support helps maintain this free alternative to expensive paid tools!</p>
</div>
<!-- Privacy Summary -->
<div class="privacy-section">
<h2>๐ Privacy & Security</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
<div>
<h4>๐ซ Zero Data Collection</h4>
<p>We don't collect, track, or store any personal information. No analytics, no telemetry, no user data.</p>
</div>
<div>
<h4>๐พ Local Storage Only</h4>
<p>All your header configurations stay on your device using Chrome's secure local storage.</p>
</div>
<div>
<h4>๐ Open Source</h4>
<p>Full transparency - inspect the code on GitHub to verify our privacy claims.</p>
</div>
</div>
<p style="text-align: center; margin-top: 20px;">
<a href="privacy.html" style="color: #3498db; text-decoration: none; font-weight: bold;">๐ Read Full Privacy Policy โ</a>
</p>
</div>
<!-- Footer -->
<div style="text-align: center; margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; color: #666;">
<p>Made with โค๏ธ for the developer community</p>
<p><a href="https://github.com/testacode/header-editor-pro-free">View on GitHub</a></p>
</div>
</div>
</body>
</html>