@gxp-dev/tools 2.0.12 → 2.0.14
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.
- package/bin/lib/commands/init.js +15 -2
- package/bin/lib/tui/App.tsx +69 -49
- package/bin/lib/tui/components/CommandInput.tsx +100 -95
- package/bin/lib/tui/components/LogPanel.tsx +30 -17
- package/bin/lib/tui/components/TabBar.tsx +1 -1
- package/bin/lib/tui/services/ExtensionService.ts +34 -0
- package/bin/lib/utils/ai-scaffold.js +82 -11
- package/browser-extensions/chrome/manifest.json +1 -1
- package/browser-extensions/chrome/popup.html +339 -237
- package/browser-extensions/chrome/popup.js +110 -110
- package/browser-extensions/firefox/manifest.json +2 -1
- package/browser-extensions/firefox/popup.js +31 -12
- package/dist/tui/App.d.ts.map +1 -1
- package/dist/tui/App.js +66 -48
- package/dist/tui/App.js.map +1 -1
- package/dist/tui/components/CommandInput.d.ts.map +1 -1
- package/dist/tui/components/CommandInput.js +87 -89
- package/dist/tui/components/CommandInput.js.map +1 -1
- package/dist/tui/components/LogPanel.d.ts +4 -2
- package/dist/tui/components/LogPanel.d.ts.map +1 -1
- package/dist/tui/components/LogPanel.js +25 -15
- package/dist/tui/components/LogPanel.js.map +1 -1
- package/dist/tui/components/TabBar.js +1 -1
- package/dist/tui/components/TabBar.js.map +1 -1
- package/dist/tui/services/ExtensionService.d.ts.map +1 -1
- package/dist/tui/services/ExtensionService.js +30 -0
- package/dist/tui/services/ExtensionService.js.map +1 -1
- package/package.json +1 -1
- package/scripts/launch-chrome.js +39 -0
|
@@ -3,397 +3,499 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<style>
|
|
6
|
+
* {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
body {
|
|
7
|
-
width:
|
|
11
|
+
width: 380px;
|
|
12
|
+
height: 500px;
|
|
8
13
|
padding: 0;
|
|
9
14
|
margin: 0;
|
|
10
15
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
11
16
|
background: #f8f9fa;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
overflow: hidden;
|
|
12
20
|
}
|
|
13
|
-
|
|
21
|
+
|
|
22
|
+
/* Header */
|
|
14
23
|
.header {
|
|
15
24
|
background: #fff;
|
|
16
|
-
padding: 16px;
|
|
25
|
+
padding: 12px 16px;
|
|
17
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;
|
|
18
34
|
}
|
|
19
|
-
|
|
35
|
+
|
|
20
36
|
.title {
|
|
21
|
-
margin: 0
|
|
22
|
-
font-size:
|
|
37
|
+
margin: 0;
|
|
38
|
+
font-size: 15px;
|
|
23
39
|
font-weight: 600;
|
|
24
40
|
color: #212529;
|
|
25
41
|
}
|
|
26
|
-
|
|
27
|
-
.toggle-container {
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
gap: 12px;
|
|
31
|
-
}
|
|
32
|
-
|
|
42
|
+
|
|
33
43
|
.toggle-button {
|
|
34
44
|
background: #dc3545;
|
|
35
45
|
border: none;
|
|
36
|
-
padding:
|
|
37
|
-
border-radius:
|
|
46
|
+
padding: 6px 14px;
|
|
47
|
+
border-radius: 16px;
|
|
38
48
|
color: white;
|
|
39
49
|
font-weight: 500;
|
|
50
|
+
font-size: 12px;
|
|
40
51
|
cursor: pointer;
|
|
41
52
|
transition: all 0.2s;
|
|
42
53
|
display: flex;
|
|
43
54
|
align-items: center;
|
|
44
55
|
gap: 6px;
|
|
45
56
|
}
|
|
46
|
-
|
|
57
|
+
|
|
47
58
|
.toggle-button.enabled {
|
|
48
59
|
background: #28a745;
|
|
49
60
|
}
|
|
50
|
-
|
|
61
|
+
|
|
51
62
|
.toggle-button:hover {
|
|
52
63
|
opacity: 0.9;
|
|
53
64
|
}
|
|
54
|
-
|
|
65
|
+
|
|
55
66
|
.status-dot {
|
|
56
|
-
width:
|
|
57
|
-
height:
|
|
67
|
+
width: 6px;
|
|
68
|
+
height: 6px;
|
|
58
69
|
border-radius: 50%;
|
|
59
70
|
background: currentColor;
|
|
60
71
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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;
|
|
64
92
|
}
|
|
65
|
-
|
|
66
|
-
.
|
|
67
|
-
|
|
93
|
+
|
|
94
|
+
.tab:hover {
|
|
95
|
+
color: #495057;
|
|
96
|
+
background: #f8f9fa;
|
|
68
97
|
}
|
|
69
|
-
|
|
70
|
-
.
|
|
71
|
-
|
|
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;
|
|
72
110
|
font-weight: 600;
|
|
73
|
-
margin-bottom: 8px;
|
|
74
|
-
color: #495057;
|
|
75
111
|
}
|
|
76
|
-
|
|
77
|
-
.
|
|
78
|
-
background:
|
|
79
|
-
|
|
80
|
-
border-radius: 6px;
|
|
81
|
-
padding: 16px;
|
|
112
|
+
|
|
113
|
+
.tab-badge.enabled {
|
|
114
|
+
background: #d4edda;
|
|
115
|
+
color: #155724;
|
|
82
116
|
}
|
|
83
|
-
|
|
84
|
-
.
|
|
85
|
-
background:
|
|
86
|
-
|
|
87
|
-
|
|
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;
|
|
88
127
|
padding: 16px;
|
|
89
|
-
margin-bottom: 12px;
|
|
90
128
|
}
|
|
91
|
-
|
|
129
|
+
|
|
130
|
+
.tab-content {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.tab-content.active {
|
|
135
|
+
display: block;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Rule sections */
|
|
92
139
|
.rule-header {
|
|
93
140
|
display: flex;
|
|
94
141
|
align-items: center;
|
|
95
|
-
|
|
96
|
-
margin-bottom:
|
|
142
|
+
justify-content: space-between;
|
|
143
|
+
margin-bottom: 16px;
|
|
97
144
|
}
|
|
98
|
-
|
|
145
|
+
|
|
99
146
|
.rule-title {
|
|
100
147
|
font-size: 14px;
|
|
101
148
|
font-weight: 600;
|
|
102
149
|
color: #495057;
|
|
103
|
-
margin: 0;
|
|
104
150
|
}
|
|
105
|
-
|
|
106
|
-
.rule-toggle {
|
|
107
|
-
margin-left: auto;
|
|
108
|
-
}
|
|
109
|
-
|
|
151
|
+
|
|
110
152
|
.input-group {
|
|
111
|
-
|
|
112
|
-
flex-direction: column;
|
|
113
|
-
gap: 6px;
|
|
114
|
-
margin-bottom: 16px;
|
|
153
|
+
margin-bottom: 14px;
|
|
115
154
|
}
|
|
116
|
-
|
|
155
|
+
|
|
117
156
|
.input-label {
|
|
118
|
-
|
|
157
|
+
display: block;
|
|
158
|
+
font-size: 11px;
|
|
119
159
|
color: #6c757d;
|
|
120
160
|
font-weight: 500;
|
|
161
|
+
margin-bottom: 4px;
|
|
121
162
|
}
|
|
122
|
-
|
|
163
|
+
|
|
123
164
|
input[type="text"] {
|
|
165
|
+
width: 100%;
|
|
124
166
|
padding: 8px 10px;
|
|
125
167
|
border: 1px solid #ced4da;
|
|
126
168
|
border-radius: 4px;
|
|
127
|
-
font-size:
|
|
169
|
+
font-size: 12px;
|
|
128
170
|
}
|
|
129
|
-
|
|
171
|
+
|
|
130
172
|
input[type="text"]:focus {
|
|
131
173
|
outline: none;
|
|
132
174
|
border-color: #007bff;
|
|
133
175
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
134
176
|
}
|
|
135
|
-
|
|
177
|
+
|
|
136
178
|
input[type="text"]:disabled {
|
|
137
179
|
background: #f8f9fa;
|
|
138
180
|
color: #6c757d;
|
|
139
|
-
cursor: not-allowed;
|
|
140
181
|
}
|
|
141
|
-
|
|
182
|
+
|
|
142
183
|
.checkbox-group {
|
|
143
184
|
display: flex;
|
|
144
185
|
align-items: center;
|
|
145
186
|
gap: 8px;
|
|
146
|
-
margin-bottom:
|
|
187
|
+
margin-bottom: 10px;
|
|
147
188
|
}
|
|
148
|
-
|
|
189
|
+
|
|
149
190
|
.checkbox-group input[type="checkbox"] {
|
|
150
191
|
margin: 0;
|
|
151
192
|
}
|
|
152
|
-
|
|
193
|
+
|
|
153
194
|
.checkbox-group label {
|
|
154
195
|
font-size: 12px;
|
|
155
196
|
color: #495057;
|
|
156
|
-
margin: 0;
|
|
157
197
|
cursor: pointer;
|
|
158
198
|
}
|
|
159
|
-
|
|
199
|
+
|
|
200
|
+
.help-text {
|
|
201
|
+
font-size: 10px;
|
|
202
|
+
color: #6c757d;
|
|
203
|
+
margin-top: 4px;
|
|
204
|
+
line-height: 1.3;
|
|
205
|
+
}
|
|
206
|
+
|
|
160
207
|
.pattern-display {
|
|
161
208
|
background: #f8f9fa;
|
|
162
209
|
border: 1px solid #e9ecef;
|
|
163
210
|
border-radius: 4px;
|
|
164
|
-
padding: 8px
|
|
165
|
-
font-size:
|
|
211
|
+
padding: 6px 8px;
|
|
212
|
+
font-size: 10px;
|
|
166
213
|
color: #6c757d;
|
|
167
|
-
font-family: 'Monaco', 'Menlo',
|
|
214
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
168
215
|
word-break: break-all;
|
|
169
|
-
margin-bottom: 8px;
|
|
170
216
|
}
|
|
171
|
-
|
|
217
|
+
|
|
172
218
|
.pattern-input {
|
|
173
219
|
display: none;
|
|
174
220
|
}
|
|
175
|
-
|
|
221
|
+
|
|
176
222
|
.pattern-input.visible {
|
|
177
223
|
display: block;
|
|
178
224
|
}
|
|
179
|
-
|
|
225
|
+
|
|
226
|
+
.blank-option {
|
|
227
|
+
background: #fff3cd;
|
|
228
|
+
border: 1px solid #ffeaa7;
|
|
229
|
+
border-radius: 4px;
|
|
230
|
+
padding: 10px;
|
|
231
|
+
margin-bottom: 14px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.blank-option-title {
|
|
235
|
+
font-size: 11px;
|
|
236
|
+
font-weight: 600;
|
|
237
|
+
color: #856404;
|
|
238
|
+
margin-bottom: 6px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Settings tab */
|
|
242
|
+
.settings-section {
|
|
243
|
+
background: white;
|
|
244
|
+
border: 1px solid #dee2e6;
|
|
245
|
+
border-radius: 6px;
|
|
246
|
+
padding: 12px;
|
|
247
|
+
margin-bottom: 12px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.settings-title {
|
|
251
|
+
font-size: 12px;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
color: #495057;
|
|
254
|
+
margin-bottom: 10px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Inspector section */
|
|
258
|
+
.inspector-row {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
gap: 10px;
|
|
262
|
+
padding: 10px 0;
|
|
263
|
+
border-top: 1px solid #e9ecef;
|
|
264
|
+
margin-top: 8px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.inspector-toggle {
|
|
268
|
+
padding: 4px 10px;
|
|
269
|
+
font-size: 11px;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
kbd {
|
|
273
|
+
background: #e9ecef;
|
|
274
|
+
padding: 2px 5px;
|
|
275
|
+
border-radius: 3px;
|
|
276
|
+
font-size: 9px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Footer */
|
|
280
|
+
.footer {
|
|
281
|
+
background: #fff;
|
|
282
|
+
padding: 12px 16px;
|
|
283
|
+
border-top: 1px solid #e9ecef;
|
|
284
|
+
flex-shrink: 0;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.footer-buttons {
|
|
288
|
+
display: flex;
|
|
289
|
+
gap: 8px;
|
|
290
|
+
}
|
|
291
|
+
|
|
180
292
|
.save-button {
|
|
181
|
-
|
|
293
|
+
flex: 1;
|
|
294
|
+
background: #007bff;
|
|
182
295
|
border: none;
|
|
183
296
|
color: white;
|
|
184
|
-
padding:
|
|
297
|
+
padding: 10px 16px;
|
|
185
298
|
border-radius: 4px;
|
|
186
|
-
font-size:
|
|
299
|
+
font-size: 13px;
|
|
300
|
+
font-weight: 500;
|
|
187
301
|
cursor: pointer;
|
|
188
|
-
width: 100%;
|
|
189
|
-
margin-top: 8px;
|
|
190
302
|
}
|
|
191
|
-
|
|
303
|
+
|
|
192
304
|
.save-button:hover {
|
|
193
|
-
background: #
|
|
305
|
+
background: #0056b3;
|
|
194
306
|
}
|
|
195
|
-
|
|
307
|
+
|
|
196
308
|
.save-button:disabled {
|
|
197
309
|
background: #6c757d;
|
|
198
310
|
cursor: not-allowed;
|
|
199
311
|
}
|
|
200
|
-
|
|
312
|
+
|
|
313
|
+
.cache-button {
|
|
314
|
+
background: #ffc107;
|
|
315
|
+
border: none;
|
|
316
|
+
color: #212529;
|
|
317
|
+
padding: 10px 16px;
|
|
318
|
+
border-radius: 4px;
|
|
319
|
+
font-size: 13px;
|
|
320
|
+
cursor: pointer;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.cache-button:hover {
|
|
324
|
+
background: #e0a800;
|
|
325
|
+
}
|
|
326
|
+
|
|
201
327
|
.status {
|
|
202
|
-
margin-top:
|
|
203
|
-
padding:
|
|
328
|
+
margin-top: 8px;
|
|
329
|
+
padding: 6px 10px;
|
|
204
330
|
border-radius: 4px;
|
|
205
|
-
font-size:
|
|
331
|
+
font-size: 11px;
|
|
206
332
|
text-align: center;
|
|
333
|
+
display: none;
|
|
207
334
|
}
|
|
208
|
-
|
|
335
|
+
|
|
209
336
|
.status.success {
|
|
210
337
|
background: #d4edda;
|
|
211
338
|
color: #155724;
|
|
212
|
-
|
|
339
|
+
display: block;
|
|
213
340
|
}
|
|
214
|
-
|
|
341
|
+
|
|
215
342
|
.status.error {
|
|
216
343
|
background: #f8d7da;
|
|
217
344
|
color: #721c24;
|
|
218
|
-
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.help-text {
|
|
222
|
-
font-size: 11px;
|
|
223
|
-
color: #6c757d;
|
|
224
|
-
margin-top: 4px;
|
|
225
|
-
line-height: 1.3;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.example-text {
|
|
229
|
-
font-size: 11px;
|
|
230
|
-
color: #007bff;
|
|
231
|
-
margin-bottom: 8px;
|
|
232
|
-
font-style: italic;
|
|
345
|
+
display: block;
|
|
233
346
|
}
|
|
234
|
-
|
|
347
|
+
|
|
235
348
|
.rule-disabled {
|
|
236
|
-
opacity: 0.
|
|
349
|
+
opacity: 0.5;
|
|
237
350
|
pointer-events: none;
|
|
238
351
|
}
|
|
239
|
-
|
|
240
|
-
.blank-option {
|
|
241
|
-
background: #fff3cd;
|
|
242
|
-
border: 1px solid #ffeaa7;
|
|
243
|
-
border-radius: 4px;
|
|
244
|
-
padding: 8px 10px;
|
|
245
|
-
margin-bottom: 12px;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.blank-option-title {
|
|
249
|
-
font-size: 12px;
|
|
250
|
-
font-weight: 600;
|
|
251
|
-
color: #856404;
|
|
252
|
-
margin-bottom: 4px;
|
|
253
|
-
}
|
|
254
352
|
</style>
|
|
255
353
|
</head>
|
|
256
354
|
<body>
|
|
355
|
+
<!-- Header with main toggle -->
|
|
257
356
|
<div class="header">
|
|
258
|
-
<
|
|
259
|
-
|
|
357
|
+
<div class="header-row">
|
|
358
|
+
<h1 class="title">GxP Developer Toolkit</h1>
|
|
260
359
|
<button id="toggleButton" class="toggle-button">
|
|
261
360
|
<div class="status-dot"></div>
|
|
262
361
|
<span id="toggleText">OFF</span>
|
|
263
362
|
</button>
|
|
264
|
-
<label style="font-size: 12px; color: #6c757d;">
|
|
265
|
-
<input type="checkbox" id="maskingMode" style="margin-right: 4px;">
|
|
266
|
-
URL Masking Mode
|
|
267
|
-
</label>
|
|
268
363
|
</div>
|
|
269
364
|
</div>
|
|
270
365
|
|
|
271
|
-
<!--
|
|
272
|
-
<div class="
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
<
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
366
|
+
<!-- Tabs -->
|
|
367
|
+
<div class="tabs">
|
|
368
|
+
<button class="tab active" data-tab="js">
|
|
369
|
+
JavaScript
|
|
370
|
+
<span id="jsBadge" class="tab-badge enabled">ON</span>
|
|
371
|
+
</button>
|
|
372
|
+
<button class="tab" data-tab="css">
|
|
373
|
+
CSS
|
|
374
|
+
<span id="cssBadge" class="tab-badge enabled">ON</span>
|
|
375
|
+
</button>
|
|
376
|
+
<button class="tab" data-tab="settings">Settings</button>
|
|
377
|
+
</div>
|
|
378
|
+
|
|
379
|
+
<!-- Scrollable content area -->
|
|
380
|
+
<div class="content">
|
|
381
|
+
<!-- JavaScript Tab -->
|
|
382
|
+
<div id="jsTab" class="tab-content active">
|
|
383
|
+
<div class="rule-header">
|
|
384
|
+
<span class="rule-title">JavaScript Redirect</span>
|
|
385
|
+
<div>
|
|
386
|
+
<input type="checkbox" id="jsRuleEnabled">
|
|
387
|
+
<label for="jsRuleEnabled" style="font-size: 11px; margin-left: 4px;">Enabled</label>
|
|
282
388
|
</div>
|
|
283
|
-
<div class="help-text">Hover over Vue components to inspect props and extract hardcoded strings to getString() helpers.</div>
|
|
284
389
|
</div>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
<div class="config-container">
|
|
292
|
-
<div class="checkbox-group">
|
|
293
|
-
<input type="checkbox" id="clearCacheOnEnable">
|
|
294
|
-
<label for="clearCacheOnEnable">Clear cache when extension is enabled</label>
|
|
390
|
+
|
|
391
|
+
<div id="jsRuleContent">
|
|
392
|
+
<div class="input-group">
|
|
393
|
+
<label class="input-label">Redirect To URL</label>
|
|
394
|
+
<input type="text" id="jsRedirectUrl" placeholder="https://localhost:3060/src/Plugin.vue">
|
|
395
|
+
<div class="help-text">Local URL where JavaScript files should be redirected</div>
|
|
295
396
|
</div>
|
|
296
|
-
|
|
297
|
-
|
|
397
|
+
|
|
298
398
|
<div class="checkbox-group">
|
|
299
|
-
<input type="checkbox" id="
|
|
300
|
-
<label for="
|
|
399
|
+
<input type="checkbox" id="jsCustomPattern">
|
|
400
|
+
<label for="jsCustomPattern">Use custom URL pattern</label>
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<div class="input-group">
|
|
404
|
+
<label class="input-label">URL Pattern to Match</label>
|
|
405
|
+
<div id="jsPatternDisplay" class="pattern-display"></div>
|
|
406
|
+
<input type="text" id="jsCustomPatternInput" class="pattern-input" placeholder="Custom regex pattern">
|
|
407
|
+
<div class="help-text">RegEx pattern to match JavaScript file URLs</div>
|
|
301
408
|
</div>
|
|
302
|
-
<div class="help-text" style="margin-top: -8px; margin-bottom: 12px;">Adds cache-busting headers to prevent service worker caching</div>
|
|
303
|
-
|
|
304
|
-
<button id="clearCacheButton" style="background: #ffc107; color: #212529; border: none; padding: 8px 16px; border-radius: 4px; font-size: 12px; cursor: pointer; width: 100%; margin-top: 8px;">
|
|
305
|
-
Clear Cache Now
|
|
306
|
-
</button>
|
|
307
409
|
</div>
|
|
308
410
|
</div>
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
411
|
+
|
|
412
|
+
<!-- CSS Tab -->
|
|
413
|
+
<div id="cssTab" class="tab-content">
|
|
414
|
+
<div class="rule-header">
|
|
415
|
+
<span class="rule-title">CSS Override</span>
|
|
416
|
+
<div>
|
|
417
|
+
<input type="checkbox" id="cssRuleEnabled">
|
|
418
|
+
<label for="cssRuleEnabled" style="font-size: 11px; margin-left: 4px;">Enabled</label>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
|
|
422
|
+
<div id="cssRuleContent">
|
|
423
|
+
<div class="blank-option">
|
|
424
|
+
<div class="blank-option-title">Return Blank CSS</div>
|
|
425
|
+
<div class="checkbox-group" style="margin-bottom: 4px;">
|
|
426
|
+
<input type="checkbox" id="cssReturnBlank">
|
|
427
|
+
<label for="cssReturnBlank">Return empty CSS instead of redirecting</label>
|
|
322
428
|
</div>
|
|
429
|
+
<div class="help-text" style="margin: 0;">Disables production styles during development</div>
|
|
323
430
|
</div>
|
|
324
|
-
|
|
325
|
-
<div id="
|
|
326
|
-
<div class="example-text">Redirects JavaScript files from production uploads to your local development server</div>
|
|
327
|
-
|
|
431
|
+
|
|
432
|
+
<div id="cssRedirectSection">
|
|
328
433
|
<div class="input-group">
|
|
329
434
|
<label class="input-label">Redirect To URL</label>
|
|
330
|
-
<input type="text" id="
|
|
331
|
-
<div class="help-text">Local URL where
|
|
332
|
-
</div>
|
|
333
|
-
|
|
334
|
-
<div class="checkbox-group">
|
|
335
|
-
<input type="checkbox" id="jsCustomPattern">
|
|
336
|
-
<label for="jsCustomPattern">Use custom URL pattern</label>
|
|
337
|
-
</div>
|
|
338
|
-
|
|
339
|
-
<div class="input-group">
|
|
340
|
-
<label class="input-label">URL Pattern to Match</label>
|
|
341
|
-
<div id="jsPatternDisplay" class="pattern-display"></div>
|
|
342
|
-
<input type="text" id="jsCustomPatternInput" class="pattern-input" placeholder="">
|
|
343
|
-
<div class="help-text">RegEx pattern to match JavaScript file URLs</div>
|
|
435
|
+
<input type="text" id="cssRedirectUrl" placeholder="https://localhost:3060/src/styles.css">
|
|
436
|
+
<div class="help-text">Local URL where CSS files should be redirected</div>
|
|
344
437
|
</div>
|
|
345
438
|
</div>
|
|
439
|
+
|
|
440
|
+
<div class="checkbox-group">
|
|
441
|
+
<input type="checkbox" id="cssCustomPattern">
|
|
442
|
+
<label for="cssCustomPattern">Use custom URL pattern</label>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<div class="input-group">
|
|
446
|
+
<label class="input-label">URL Pattern to Match</label>
|
|
447
|
+
<div id="cssPatternDisplay" class="pattern-display"></div>
|
|
448
|
+
<input type="text" id="cssCustomPatternInput" class="pattern-input" placeholder="Custom regex pattern">
|
|
449
|
+
<div class="help-text">RegEx pattern to match CSS file URLs</div>
|
|
450
|
+
</div>
|
|
346
451
|
</div>
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
</
|
|
452
|
+
</div>
|
|
453
|
+
|
|
454
|
+
<!-- Settings Tab -->
|
|
455
|
+
<div id="settingsTab" class="tab-content">
|
|
456
|
+
<div class="settings-section">
|
|
457
|
+
<div class="settings-title">Cache Management</div>
|
|
458
|
+
<div class="checkbox-group">
|
|
459
|
+
<input type="checkbox" id="clearCacheOnEnable">
|
|
460
|
+
<label for="clearCacheOnEnable">Clear cache when extension is enabled</label>
|
|
356
461
|
</div>
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
</div>
|
|
369
|
-
|
|
370
|
-
<div id="cssRedirectSection">
|
|
371
|
-
<div class="input-group">
|
|
372
|
-
<label class="input-label">Redirect To URL</label>
|
|
373
|
-
<input type="text" id="cssRedirectUrl" placeholder="https://localhost:3060/src/styles.css">
|
|
374
|
-
<div class="help-text">Local URL where matching CSS files should be redirected</div>
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
|
|
378
|
-
<div class="checkbox-group">
|
|
379
|
-
<input type="checkbox" id="cssCustomPattern">
|
|
380
|
-
<label for="cssCustomPattern">Use custom URL pattern</label>
|
|
381
|
-
</div>
|
|
382
|
-
|
|
383
|
-
<div class="input-group">
|
|
384
|
-
<label class="input-label">URL Pattern to Match</label>
|
|
385
|
-
<div id="cssPatternDisplay" class="pattern-display"></div>
|
|
386
|
-
<input type="text" id="cssCustomPatternInput" class="pattern-input" placeholder="">
|
|
387
|
-
<div class="help-text">RegEx pattern to match CSS file URLs</div>
|
|
388
|
-
</div>
|
|
462
|
+
<div class="checkbox-group">
|
|
463
|
+
<input type="checkbox" id="disableCacheForRedirects">
|
|
464
|
+
<label for="disableCacheForRedirects">Disable caching for matched URLs</label>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<div class="settings-section">
|
|
469
|
+
<div class="settings-title">Advanced</div>
|
|
470
|
+
<div class="checkbox-group">
|
|
471
|
+
<input type="checkbox" id="maskingMode">
|
|
472
|
+
<label for="maskingMode">URL Masking Mode</label>
|
|
389
473
|
</div>
|
|
390
474
|
</div>
|
|
475
|
+
|
|
476
|
+
<div class="settings-section">
|
|
477
|
+
<div class="settings-title">Component Inspector</div>
|
|
478
|
+
<div style="display: flex; align-items: center; gap: 10px;">
|
|
479
|
+
<button id="inspectorToggle" class="toggle-button inspector-toggle">
|
|
480
|
+
<div class="status-dot"></div>
|
|
481
|
+
<span id="inspectorText">OFF</span>
|
|
482
|
+
</button>
|
|
483
|
+
<span style="font-size: 11px; color: #6c757d;">or press <kbd>Ctrl+Shift+I</kbd></span>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="help-text" style="margin-top: 8px;">Inspect Vue components and extract hardcoded strings</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<!-- Fixed footer with buttons -->
|
|
491
|
+
<div class="footer">
|
|
492
|
+
<div class="footer-buttons">
|
|
493
|
+
<button id="saveButton" class="save-button">Save Configuration</button>
|
|
494
|
+
<button id="clearCacheButton" class="cache-button">Clear Cache</button>
|
|
391
495
|
</div>
|
|
392
|
-
|
|
393
|
-
<button id="saveButton" class="save-button">Save Configuration</button>
|
|
394
|
-
<div id="status" class="status" style="display: none;"></div>
|
|
496
|
+
<div id="status" class="status"></div>
|
|
395
497
|
</div>
|
|
396
498
|
|
|
397
499
|
<script src="popup.js"></script>
|
|
398
500
|
</body>
|
|
399
|
-
</html>
|
|
501
|
+
</html>
|