@gxp-dev/tools 2.0.13 → 2.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/bin/lib/tui/App.tsx +36 -23
  2. package/bin/lib/tui/services/ExtensionService.ts +34 -0
  3. package/browser-extensions/chrome/manifest.json +1 -1
  4. package/browser-extensions/chrome/popup.html +339 -237
  5. package/browser-extensions/chrome/popup.js +110 -110
  6. package/browser-extensions/firefox/manifest.json +2 -1
  7. package/browser-extensions/firefox/popup.html +478 -519
  8. package/browser-extensions/firefox/popup.js +444 -481
  9. package/dist/tui/App.d.ts.map +1 -1
  10. package/dist/tui/App.js +34 -24
  11. package/dist/tui/App.js.map +1 -1
  12. package/dist/tui/services/ExtensionService.d.ts.map +1 -1
  13. package/dist/tui/services/ExtensionService.js +30 -0
  14. package/dist/tui/services/ExtensionService.js.map +1 -1
  15. package/package.json +1 -1
  16. package/scripts/launch-chrome.js +39 -0
package/browser-extensions/firefox/popup.html CHANGED
@@ -1,525 +1,484 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
3
  <head>
4
- <meta charset="utf-8">
5
- <style>
6
- :root {
7
- --main-bg: #f8f9fa;
8
- --header-bg: #2563eb;
9
- --card-bg: #ffffff;
10
- --border-color: #e5e7eb;
11
- --text-primary: #1f2937;
12
- --text-secondary: #6b7280;
13
- --success-color: #10b981;
14
- --error-color: #ef4444;
15
- --warning-color: #f59e0b;
16
- --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
17
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
18
- }
19
-
20
- * {
21
- box-sizing: border-box;
22
- margin: 0;
23
- padding: 0;
24
- }
25
-
26
- body {
27
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
- font-size: 14px;
29
- line-height: 1.5;
30
- color: var(--text-primary);
31
- background: var(--main-bg);
32
- width: 420px;
33
- min-height: 500px;
34
- }
35
-
36
- .header {
37
- background: linear-gradient(135deg, var(--header-bg) 0%, #1d4ed8 100%);
38
- color: white;
39
- padding: 20px;
40
- text-align: center;
41
- box-shadow: var(--shadow);
42
- }
43
-
44
- .header h1 {
45
- font-size: 18px;
46
- font-weight: 600;
47
- margin: 0 0 8px 0;
48
- }
49
-
50
- .header .subtitle {
51
- font-size: 12px;
52
- opacity: 0.9;
53
- font-weight: 400;
54
- }
55
-
56
- .main-container {
57
- padding: 20px;
58
- }
59
-
60
- /* Main Toggle Section */
61
- .main-toggle {
62
- background: var(--card-bg);
63
- border-radius: 12px;
64
- box-shadow: var(--shadow);
65
- overflow: hidden;
66
- margin-bottom: 20px;
67
- }
68
-
69
- .toggle-header {
70
- padding: 16px 20px;
71
- border-bottom: 1px solid var(--border-color);
72
- display: flex;
73
- align-items: center;
74
- justify-content: space-between;
75
- }
76
-
77
- .toggle-title {
78
- font-weight: 600;
79
- font-size: 15px;
80
- }
81
-
82
- .master-toggle {
83
- position: relative;
84
- width: 52px;
85
- height: 28px;
86
- }
87
-
88
- .master-toggle input {
89
- opacity: 0;
90
- width: 0;
91
- height: 0;
92
- }
93
-
94
- .master-slider {
95
- position: absolute;
96
- cursor: pointer;
97
- top: 0;
98
- left: 0;
99
- right: 0;
100
- bottom: 0;
101
- background-color: #cbd5e1;
102
- border-radius: 28px;
103
- transition: all 0.3s ease;
104
- }
105
-
106
- .master-slider:before {
107
- position: absolute;
108
- content: "";
109
- height: 22px;
110
- width: 22px;
111
- left: 3px;
112
- bottom: 3px;
113
- background-color: white;
114
- border-radius: 50%;
115
- transition: all 0.3s ease;
116
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
117
- }
118
-
119
- .master-toggle input:checked + .master-slider {
120
- background-color: var(--success-color);
121
- }
122
-
123
- .master-toggle input:checked + .master-slider:before {
124
- transform: translateX(24px);
125
- }
126
-
127
- .status-info {
128
- padding: 12px 20px;
129
- background: #f1f5f9;
130
- font-size: 13px;
131
- color: var(--text-secondary);
132
- }
133
-
134
- /* Rule Cards */
135
- .rule-container {
136
- background: var(--card-bg);
137
- border-radius: 12px;
138
- box-shadow: var(--shadow);
139
- overflow: hidden;
140
- margin-bottom: 16px;
141
- }
142
-
143
- .rule-header {
144
- padding: 16px 20px;
145
- border-bottom: 1px solid var(--border-color);
146
- display: flex;
147
- align-items: center;
148
- justify-content: space-between;
149
- background: #fafbfc;
150
- }
151
-
152
- .rule-title {
153
- font-weight: 600;
154
- font-size: 14px;
155
- color: var(--text-primary);
156
- }
157
-
158
- .rule-subtitle {
159
- font-size: 12px;
160
- color: var(--text-secondary);
161
- margin-top: 2px;
162
- }
163
-
164
- .rule-toggle {
165
- position: relative;
166
- width: 44px;
167
- height: 24px;
168
- }
169
-
170
- .rule-toggle input {
171
- opacity: 0;
172
- width: 0;
173
- height: 0;
174
- }
175
-
176
- .rule-slider {
177
- position: absolute;
178
- cursor: pointer;
179
- top: 0;
180
- left: 0;
181
- right: 0;
182
- bottom: 0;
183
- background-color: #cbd5e1;
184
- border-radius: 24px;
185
- transition: all 0.3s ease;
186
- }
187
-
188
- .rule-slider:before {
189
- position: absolute;
190
- content: "";
191
- height: 18px;
192
- width: 18px;
193
- left: 3px;
194
- bottom: 3px;
195
- background-color: white;
196
- border-radius: 50%;
197
- transition: all 0.3s ease;
198
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
199
- }
200
-
201
- .rule-toggle input:checked + .rule-slider {
202
- background-color: var(--success-color);
203
- }
204
-
205
- .rule-toggle input:checked + .rule-slider:before {
206
- transform: translateX(20px);
207
- }
208
-
209
- .rule-content {
210
- padding: 20px;
211
- }
212
-
213
- /* Form Fields */
214
- .form-group {
215
- margin-bottom: 16px;
216
- }
217
-
218
- .form-group:last-child {
219
- margin-bottom: 0;
220
- }
221
-
222
- .form-group label {
223
- display: block;
224
- font-weight: 500;
225
- margin-bottom: 6px;
226
- font-size: 13px;
227
- color: var(--text-primary);
228
- }
229
-
230
- .form-group input,
231
- .form-group textarea {
232
- width: 100%;
233
- padding: 10px 12px;
234
- border: 1px solid var(--border-color);
235
- border-radius: 8px;
236
- font-size: 13px;
237
- transition: all 0.2s ease;
238
- background: white;
239
- }
240
-
241
- .form-group input:focus,
242
- .form-group textarea:focus {
243
- outline: none;
244
- border-color: var(--header-bg);
245
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
246
- }
247
-
248
- .form-group textarea {
249
- resize: vertical;
250
- min-height: 65px;
251
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
252
- }
253
-
254
- /* Checkbox */
255
- .checkbox-group {
256
- display: flex;
257
- align-items: center;
258
- margin-bottom: 16px;
259
- }
260
-
261
- .checkbox-group input[type="checkbox"] {
262
- width: auto;
263
- margin-right: 8px;
264
- cursor: pointer;
265
- }
266
-
267
- .checkbox-group label {
268
- margin-bottom: 0;
269
- cursor: pointer;
270
- font-size: 13px;
271
- }
272
-
273
- /* Action Buttons */
274
- .action-buttons {
275
- display: flex;
276
- gap: 8px;
277
- margin-top: 20px;
278
- }
279
-
280
- .btn {
281
- flex: 1;
282
- padding: 10px 16px;
283
- border: none;
284
- border-radius: 8px;
285
- font-size: 13px;
286
- font-weight: 500;
287
- cursor: pointer;
288
- transition: all 0.2s ease;
289
- text-align: center;
290
- }
291
-
292
- .btn-primary {
293
- background: var(--header-bg);
294
- color: white;
295
- }
296
-
297
- .btn-primary:hover {
298
- background: #1d4ed8;
299
- transform: translateY(-1px);
300
- box-shadow: var(--shadow-lg);
301
- }
302
-
303
- .btn-secondary {
304
- background: #f3f4f6;
305
- color: var(--text-primary);
306
- border: 1px solid var(--border-color);
307
- }
308
-
309
- .btn-secondary:hover {
310
- background: #e5e7eb;
311
- transform: translateY(-1px);
312
- }
313
-
314
- .btn:disabled {
315
- opacity: 0.6;
316
- cursor: not-allowed;
317
- transform: none !important;
318
- }
319
-
320
- /* Status Messages */
321
- .status-message {
322
- padding: 12px 16px;
323
- border-radius: 8px;
324
- margin-bottom: 16px;
325
- font-size: 13px;
326
- font-weight: 500;
327
- }
328
-
329
- .status-success {
330
- background: #ecfdf5;
331
- color: #065f46;
332
- border: 1px solid #a7f3d0;
333
- }
334
-
335
- .status-error {
336
- background: #fef2f2;
337
- color: #991b1b;
338
- border: 1px solid #fca5a5;
339
- }
340
-
341
- /* Hidden class */
342
- .hidden {
343
- display: none !important;
344
- }
345
-
346
- /* Disabled state for rule containers */
347
- .rule-container.disabled {
348
- opacity: 0.6;
349
- }
350
-
351
- .rule-container.disabled .rule-content {
352
- pointer-events: none;
353
- }
354
-
355
- /* Pattern info */
356
- .pattern-info {
357
- font-size: 11px;
358
- color: var(--text-secondary);
359
- margin-top: 4px;
360
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
361
- }
362
-
363
- /* Advanced Settings */
364
- .advanced-settings {
365
- background: var(--card-bg);
366
- border-radius: 12px;
367
- box-shadow: var(--shadow);
368
- overflow: hidden;
369
- margin-top: 20px;
370
- }
371
-
372
- .advanced-header {
373
- padding: 16px 20px;
374
- background: #fafbfc;
375
- border-bottom: 1px solid var(--border-color);
376
- cursor: pointer;
377
- display: flex;
378
- align-items: center;
379
- justify-content: space-between;
380
- }
381
-
382
- .advanced-header:hover {
383
- background: #f1f5f9;
384
- }
385
-
386
- .advanced-title {
387
- font-weight: 600;
388
- font-size: 14px;
389
- }
390
-
391
- .advanced-toggle {
392
- font-size: 12px;
393
- color: var(--text-secondary);
394
- }
395
-
396
- .advanced-content {
397
- padding: 20px;
398
- }
399
- </style>
4
+ <meta charset="utf-8">
5
+ <style>
6
+ * {
7
+ box-sizing: border-box;
8
+ }
9
+
10
+ body {
11
+ width: 380px;
12
+ height: 500px;
13
+ padding: 0;
14
+ margin: 0;
15
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
16
+ background: #f8f9fa;
17
+ display: flex;
18
+ flex-direction: column;
19
+ overflow: hidden;
20
+ }
21
+
22
+ /* Header */
23
+ .header {
24
+ background: #fff;
25
+ padding: 12px 16px;
26
+ border-bottom: 1px solid #e9ecef;
27
+ flex-shrink: 0;
28
+ }
29
+
30
+ .header-row {
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: space-between;
34
+ }
35
+
36
+ .title {
37
+ margin: 0;
38
+ font-size: 15px;
39
+ font-weight: 600;
40
+ color: #212529;
41
+ }
42
+
43
+ .toggle-button {
44
+ background: #dc3545;
45
+ border: none;
46
+ padding: 6px 14px;
47
+ border-radius: 16px;
48
+ color: white;
49
+ font-weight: 500;
50
+ font-size: 12px;
51
+ cursor: pointer;
52
+ transition: all 0.2s;
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 6px;
56
+ }
57
+
58
+ .toggle-button.enabled {
59
+ background: #28a745;
60
+ }
61
+
62
+ .toggle-button:hover {
63
+ opacity: 0.9;
64
+ }
65
+
66
+ .status-dot {
67
+ width: 6px;
68
+ height: 6px;
69
+ border-radius: 50%;
70
+ background: currentColor;
71
+ }
72
+
73
+ /* Tabs */
74
+ .tabs {
75
+ display: flex;
76
+ background: #fff;
77
+ border-bottom: 1px solid #e9ecef;
78
+ flex-shrink: 0;
79
+ }
80
+
81
+ .tab {
82
+ flex: 1;
83
+ padding: 10px 16px;
84
+ border: none;
85
+ background: transparent;
86
+ font-size: 13px;
87
+ font-weight: 500;
88
+ color: #6c757d;
89
+ cursor: pointer;
90
+ border-bottom: 2px solid transparent;
91
+ transition: all 0.2s;
92
+ }
93
+
94
+ .tab:hover {
95
+ color: #495057;
96
+ background: #f8f9fa;
97
+ }
98
+
99
+ .tab.active {
100
+ color: #007bff;
101
+ border-bottom-color: #007bff;
102
+ }
103
+
104
+ .tab-badge {
105
+ display: inline-block;
106
+ padding: 2px 6px;
107
+ margin-left: 6px;
108
+ border-radius: 10px;
109
+ font-size: 10px;
110
+ font-weight: 600;
111
+ }
112
+
113
+ .tab-badge.enabled {
114
+ background: #d4edda;
115
+ color: #155724;
116
+ }
117
+
118
+ .tab-badge.disabled {
119
+ background: #f8d7da;
120
+ color: #721c24;
121
+ }
122
+
123
+ /* Content area */
124
+ .content {
125
+ flex: 1;
126
+ overflow-y: auto;
127
+ padding: 16px;
128
+ }
129
+
130
+ .tab-content {
131
+ display: none;
132
+ }
133
+
134
+ .tab-content.active {
135
+ display: block;
136
+ }
137
+
138
+ /* Rule sections */
139
+ .rule-header {
140
+ display: flex;
141
+ align-items: center;
142
+ justify-content: space-between;
143
+ margin-bottom: 16px;
144
+ }
145
+
146
+ .rule-title {
147
+ font-size: 14px;
148
+ font-weight: 600;
149
+ color: #495057;
150
+ }
151
+
152
+ .input-group {
153
+ margin-bottom: 14px;
154
+ }
155
+
156
+ .input-label {
157
+ display: block;
158
+ font-size: 11px;
159
+ color: #6c757d;
160
+ font-weight: 500;
161
+ margin-bottom: 4px;
162
+ }
163
+
164
+ input[type="text"],
165
+ textarea {
166
+ width: 100%;
167
+ padding: 8px 10px;
168
+ border: 1px solid #ced4da;
169
+ border-radius: 4px;
170
+ font-size: 12px;
171
+ }
172
+
173
+ textarea {
174
+ min-height: 60px;
175
+ font-family: 'Monaco', 'Menlo', monospace;
176
+ resize: vertical;
177
+ }
178
+
179
+ input[type="text"]:focus,
180
+ textarea:focus {
181
+ outline: none;
182
+ border-color: #007bff;
183
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
184
+ }
185
+
186
+ input[type="text"]:disabled,
187
+ textarea:disabled {
188
+ background: #f8f9fa;
189
+ color: #6c757d;
190
+ }
191
+
192
+ .checkbox-group {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 8px;
196
+ margin-bottom: 10px;
197
+ }
198
+
199
+ .checkbox-group input[type="checkbox"] {
200
+ margin: 0;
201
+ }
202
+
203
+ .checkbox-group label {
204
+ font-size: 12px;
205
+ color: #495057;
206
+ cursor: pointer;
207
+ }
208
+
209
+ .help-text {
210
+ font-size: 10px;
211
+ color: #6c757d;
212
+ margin-top: 4px;
213
+ line-height: 1.3;
214
+ }
215
+
216
+ .blank-option {
217
+ background: #fff3cd;
218
+ border: 1px solid #ffeaa7;
219
+ border-radius: 4px;
220
+ padding: 10px;
221
+ margin-bottom: 14px;
222
+ }
223
+
224
+ .blank-option-title {
225
+ font-size: 11px;
226
+ font-weight: 600;
227
+ color: #856404;
228
+ margin-bottom: 6px;
229
+ }
230
+
231
+ /* Settings tab */
232
+ .settings-section {
233
+ background: white;
234
+ border: 1px solid #dee2e6;
235
+ border-radius: 6px;
236
+ padding: 12px;
237
+ margin-bottom: 12px;
238
+ }
239
+
240
+ .settings-title {
241
+ font-size: 12px;
242
+ font-weight: 600;
243
+ color: #495057;
244
+ margin-bottom: 10px;
245
+ }
246
+
247
+ /* Inspector section */
248
+ .inspector-toggle {
249
+ padding: 4px 10px;
250
+ font-size: 11px;
251
+ }
252
+
253
+ kbd {
254
+ background: #e9ecef;
255
+ padding: 2px 5px;
256
+ border-radius: 3px;
257
+ font-size: 9px;
258
+ }
259
+
260
+ /* Footer */
261
+ .footer {
262
+ background: #fff;
263
+ padding: 12px 16px;
264
+ border-top: 1px solid #e9ecef;
265
+ flex-shrink: 0;
266
+ }
267
+
268
+ .footer-buttons {
269
+ display: flex;
270
+ gap: 8px;
271
+ }
272
+
273
+ .save-button {
274
+ flex: 1;
275
+ background: #007bff;
276
+ border: none;
277
+ color: white;
278
+ padding: 10px 16px;
279
+ border-radius: 4px;
280
+ font-size: 13px;
281
+ font-weight: 500;
282
+ cursor: pointer;
283
+ }
284
+
285
+ .save-button:hover {
286
+ background: #0056b3;
287
+ }
288
+
289
+ .save-button:disabled {
290
+ background: #6c757d;
291
+ cursor: not-allowed;
292
+ }
293
+
294
+ .cache-button {
295
+ background: #ffc107;
296
+ border: none;
297
+ color: #212529;
298
+ padding: 10px 16px;
299
+ border-radius: 4px;
300
+ font-size: 13px;
301
+ cursor: pointer;
302
+ }
303
+
304
+ .cache-button:hover {
305
+ background: #e0a800;
306
+ }
307
+
308
+ .status {
309
+ margin-top: 8px;
310
+ padding: 6px 10px;
311
+ border-radius: 4px;
312
+ font-size: 11px;
313
+ text-align: center;
314
+ display: none;
315
+ }
316
+
317
+ .status.success {
318
+ background: #d4edda;
319
+ color: #155724;
320
+ display: block;
321
+ }
322
+
323
+ .status.error {
324
+ background: #f8d7da;
325
+ color: #721c24;
326
+ display: block;
327
+ }
328
+
329
+ .rule-disabled {
330
+ opacity: 0.5;
331
+ pointer-events: none;
332
+ }
333
+
334
+ .hidden {
335
+ display: none !important;
336
+ }
337
+ </style>
400
338
  </head>
401
339
  <body>
402
- <div class="header">
403
- <h1>JavaScript Proxy</h1>
404
- <div class="subtitle">Intercept & redirect web requests</div>
405
- </div>
406
-
407
- <div class="main-container">
408
- <!-- Status Messages -->
409
- <div id="statusMessage" class="status-message hidden"></div>
410
-
411
- <!-- Main Toggle -->
412
- <div class="main-toggle">
413
- <div class="toggle-header">
414
- <div class="toggle-title">Proxy Extension</div>
415
- <label class="master-toggle">
416
- <input type="checkbox" id="masterToggle">
417
- <span class="master-slider"></span>
418
- </label>
419
- </div>
420
- <div class="status-info" id="statusInfo">
421
- Extension is currently disabled
422
- </div>
423
- </div>
424
-
425
- <!-- JavaScript Rule -->
426
- <div class="rule-container" id="jsRuleContainer">
427
- <div class="rule-header">
428
- <div>
429
- <div class="rule-title">JavaScript Files (.js)</div>
430
- <div class="rule-subtitle">Redirect JavaScript files to development server</div>
431
- </div>
432
- <label class="rule-toggle">
433
- <input type="checkbox" id="jsRuleToggle">
434
- <span class="rule-slider"></span>
435
- </label>
436
- </div>
437
- <div class="rule-content">
438
- <div class="form-group">
439
- <label for="jsRedirectUrl">Redirect URL:</label>
440
- <input type="url" id="jsRedirectUrl" placeholder="https://localhost:3060/src/Plugin.vue">
441
- </div>
442
-
443
- <div class="checkbox-group">
444
- <input type="checkbox" id="jsUseCustomPattern">
445
- <label for="jsUseCustomPattern">Use custom URL pattern</label>
446
- </div>
447
-
448
- <div class="form-group" id="jsPatternGroup">
449
- <label for="jsPattern">URL Pattern (RegEx):</label>
450
- <textarea id="jsPattern" placeholder="uploads\/plugin-version\/\d+\/file_name\/.*\.js(\?.*)?"></textarea>
451
- <div class="pattern-info">Matches JavaScript files in plugin uploads</div>
452
- </div>
453
- </div>
454
- </div>
455
-
456
- <!-- CSS Rule -->
457
- <div class="rule-container" id="cssRuleContainer">
458
- <div class="rule-header">
459
- <div>
460
- <div class="rule-title">CSS Files (.css)</div>
461
- <div class="rule-subtitle">Handle CSS files with redirect or blank return</div>
462
- </div>
463
- <label class="rule-toggle">
464
- <input type="checkbox" id="cssRuleToggle">
465
- <span class="rule-slider"></span>
466
- </label>
467
- </div>
468
- <div class="rule-content">
469
- <div class="checkbox-group">
470
- <input type="checkbox" id="cssReturnBlank">
471
- <label for="cssReturnBlank">Return blank CSS document instead of redirecting</label>
472
- </div>
473
-
474
- <div class="form-group" id="cssRedirectGroup">
475
- <label for="cssRedirectUrl">Redirect URL:</label>
476
- <input type="url" id="cssRedirectUrl" placeholder="https://localhost:3060/src/styles.css">
477
- </div>
478
-
479
- <div class="checkbox-group">
480
- <input type="checkbox" id="cssUseCustomPattern">
481
- <label for="cssUseCustomPattern">Use custom URL pattern</label>
482
- </div>
483
-
484
- <div class="form-group" id="cssPatternGroup">
485
- <label for="cssPattern">URL Pattern (RegEx):</label>
486
- <textarea id="cssPattern" placeholder="uploads\/plugin-version\/\d+\/style_file_name\/.*\.css(\?.*)?"></textarea>
487
- <div class="pattern-info">Matches CSS files in plugin uploads</div>
488
- </div>
489
- </div>
490
- </div>
491
-
492
- <!-- Advanced Settings -->
493
- <div class="advanced-settings">
494
- <div class="advanced-header" id="advancedHeader">
495
- <div class="advanced-title">Advanced Settings</div>
496
- <div class="advanced-toggle" id="advancedToggle">Show ▼</div>
497
- </div>
498
- <div class="advanced-content hidden" id="advancedContent">
499
- <div class="checkbox-group">
500
- <input type="checkbox" id="maskingMode">
501
- <label for="maskingMode">URL Masking Mode (experimental)</label>
502
- </div>
503
-
504
- <div class="checkbox-group">
505
- <input type="checkbox" id="clearCacheOnEnable">
506
- <label for="clearCacheOnEnable">Clear cache when enabling proxy</label>
507
- </div>
508
-
509
- <div class="checkbox-group">
510
- <input type="checkbox" id="disableCacheForRedirects">
511
- <label for="disableCacheForRedirects">Disable cache for redirected requests</label>
512
- </div>
513
- </div>
514
- </div>
515
-
516
- <!-- Action Buttons -->
517
- <div class="action-buttons">
518
- <button class="btn btn-secondary" id="clearCacheBtn">Clear Cache</button>
519
- <button class="btn btn-primary" id="saveBtn">Save Changes</button>
520
- </div>
521
- </div>
522
-
523
- <script src="popup.js"></script>
340
+ <!-- Header with main toggle -->
341
+ <div class="header">
342
+ <div class="header-row">
343
+ <h1 class="title">GxP Developer Toolkit</h1>
344
+ <button id="toggleButton" class="toggle-button">
345
+ <div class="status-dot"></div>
346
+ <span id="toggleText">OFF</span>
347
+ </button>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Tabs -->
352
+ <div class="tabs">
353
+ <button class="tab active" data-tab="js">
354
+ JavaScript
355
+ <span id="jsBadge" class="tab-badge enabled">ON</span>
356
+ </button>
357
+ <button class="tab" data-tab="css">
358
+ CSS
359
+ <span id="cssBadge" class="tab-badge enabled">ON</span>
360
+ </button>
361
+ <button class="tab" data-tab="settings">Settings</button>
362
+ </div>
363
+
364
+ <!-- Scrollable content area -->
365
+ <div class="content">
366
+ <!-- JavaScript Tab -->
367
+ <div id="jsTab" class="tab-content active">
368
+ <div class="rule-header">
369
+ <span class="rule-title">JavaScript Redirect</span>
370
+ <div>
371
+ <input type="checkbox" id="jsRuleToggle">
372
+ <label for="jsRuleToggle" style="font-size: 11px; margin-left: 4px;">Enabled</label>
373
+ </div>
374
+ </div>
375
+
376
+ <div id="jsRuleContent">
377
+ <div class="input-group">
378
+ <label class="input-label">Redirect To URL</label>
379
+ <input type="text" id="jsRedirectUrl" placeholder="https://localhost:3060/src/Plugin.vue">
380
+ <div class="help-text">Local URL where JavaScript files should be redirected</div>
381
+ </div>
382
+
383
+ <div class="checkbox-group">
384
+ <input type="checkbox" id="jsUseCustomPattern">
385
+ <label for="jsUseCustomPattern">Use custom URL pattern</label>
386
+ </div>
387
+
388
+ <div class="input-group" id="jsPatternGroup">
389
+ <label class="input-label">URL Pattern to Match (RegEx)</label>
390
+ <textarea id="jsPattern" placeholder="Custom regex pattern"></textarea>
391
+ <div class="help-text">RegEx pattern to match JavaScript file URLs</div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- CSS Tab -->
397
+ <div id="cssTab" class="tab-content">
398
+ <div class="rule-header">
399
+ <span class="rule-title">CSS Override</span>
400
+ <div>
401
+ <input type="checkbox" id="cssRuleToggle">
402
+ <label for="cssRuleToggle" style="font-size: 11px; margin-left: 4px;">Enabled</label>
403
+ </div>
404
+ </div>
405
+
406
+ <div id="cssRuleContent">
407
+ <div class="blank-option">
408
+ <div class="blank-option-title">Return Blank CSS</div>
409
+ <div class="checkbox-group" style="margin-bottom: 4px;">
410
+ <input type="checkbox" id="cssReturnBlank">
411
+ <label for="cssReturnBlank">Return empty CSS instead of redirecting</label>
412
+ </div>
413
+ <div class="help-text" style="margin: 0;">Disables production styles during development</div>
414
+ </div>
415
+
416
+ <div id="cssRedirectGroup">
417
+ <div class="input-group">
418
+ <label class="input-label">Redirect To URL</label>
419
+ <input type="text" id="cssRedirectUrl" placeholder="https://localhost:3060/src/styles.css">
420
+ <div class="help-text">Local URL where CSS files should be redirected</div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="checkbox-group">
425
+ <input type="checkbox" id="cssUseCustomPattern">
426
+ <label for="cssUseCustomPattern">Use custom URL pattern</label>
427
+ </div>
428
+
429
+ <div class="input-group" id="cssPatternGroup">
430
+ <label class="input-label">URL Pattern to Match (RegEx)</label>
431
+ <textarea id="cssPattern" placeholder="Custom regex pattern"></textarea>
432
+ <div class="help-text">RegEx pattern to match CSS file URLs</div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Settings Tab -->
438
+ <div id="settingsTab" class="tab-content">
439
+ <div class="settings-section">
440
+ <div class="settings-title">Cache Management</div>
441
+ <div class="checkbox-group">
442
+ <input type="checkbox" id="clearCacheOnEnable">
443
+ <label for="clearCacheOnEnable">Clear cache when extension is enabled</label>
444
+ </div>
445
+ <div class="checkbox-group">
446
+ <input type="checkbox" id="disableCacheForRedirects">
447
+ <label for="disableCacheForRedirects">Disable caching for matched URLs</label>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="settings-section">
452
+ <div class="settings-title">Advanced</div>
453
+ <div class="checkbox-group">
454
+ <input type="checkbox" id="maskingMode">
455
+ <label for="maskingMode">URL Masking Mode</label>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="settings-section">
460
+ <div class="settings-title">Component Inspector</div>
461
+ <div style="display: flex; align-items: center; gap: 10px;">
462
+ <button id="inspectorToggle" class="toggle-button inspector-toggle">
463
+ <div class="status-dot"></div>
464
+ <span id="inspectorText">OFF</span>
465
+ </button>
466
+ <span style="font-size: 11px; color: #6c757d;">or press <kbd>Ctrl+Shift+I</kbd></span>
467
+ </div>
468
+ <div class="help-text" style="margin-top: 8px;">Inspect Vue components and extract hardcoded strings</div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Fixed footer with buttons -->
474
+ <div class="footer">
475
+ <div class="footer-buttons">
476
+ <button id="saveBtn" class="save-button">Save Configuration</button>
477
+ <button id="clearCacheBtn" class="cache-button">Clear Cache</button>
478
+ </div>
479
+ <div id="statusMessage" class="status"></div>
480
+ </div>
481
+
482
+ <script src="popup.js"></script>
524
483
  </body>
525
- </html>
484
+ </html>