@gxp-dev/tools 2.0.63 → 2.0.65

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 (182) hide show
  1. package/README.md +32 -31
  2. package/bin/gx-devtools.js +74 -54
  3. package/bin/lib/cli.js +23 -21
  4. package/bin/lib/commands/add-dependency.js +366 -325
  5. package/bin/lib/commands/assets.js +137 -139
  6. package/bin/lib/commands/build.js +169 -174
  7. package/bin/lib/commands/datastore.js +181 -183
  8. package/bin/lib/commands/dev.js +127 -131
  9. package/bin/lib/commands/extensions.js +147 -149
  10. package/bin/lib/commands/extract-config.js +73 -67
  11. package/bin/lib/commands/index.js +12 -12
  12. package/bin/lib/commands/init.js +342 -240
  13. package/bin/lib/commands/publish.js +69 -75
  14. package/bin/lib/commands/socket.js +69 -69
  15. package/bin/lib/commands/ssl.js +14 -14
  16. package/bin/lib/constants.js +10 -24
  17. package/bin/lib/tui/App.tsx +761 -705
  18. package/bin/lib/tui/components/AIPanel.tsx +191 -171
  19. package/bin/lib/tui/components/CommandInput.tsx +394 -343
  20. package/bin/lib/tui/components/GeminiPanel.tsx +175 -151
  21. package/bin/lib/tui/components/Header.tsx +23 -21
  22. package/bin/lib/tui/components/LogPanel.tsx +244 -220
  23. package/bin/lib/tui/components/TabBar.tsx +50 -48
  24. package/bin/lib/tui/components/WelcomeScreen.tsx +126 -71
  25. package/bin/lib/tui/index.tsx +37 -39
  26. package/bin/lib/tui/services/AIService.ts +518 -462
  27. package/bin/lib/tui/services/ExtensionService.ts +140 -129
  28. package/bin/lib/tui/services/GeminiService.ts +367 -337
  29. package/bin/lib/tui/services/ServiceManager.ts +344 -322
  30. package/bin/lib/tui/services/SocketService.ts +168 -168
  31. package/bin/lib/tui/services/ViteService.ts +88 -88
  32. package/bin/lib/tui/services/index.ts +47 -22
  33. package/bin/lib/utils/ai-scaffold.js +291 -280
  34. package/bin/lib/utils/extract-config.js +157 -140
  35. package/bin/lib/utils/files.js +82 -86
  36. package/bin/lib/utils/index.js +7 -7
  37. package/bin/lib/utils/paths.js +34 -34
  38. package/bin/lib/utils/prompts.js +194 -169
  39. package/bin/lib/utils/ssl.js +79 -81
  40. package/browser-extensions/README.md +0 -1
  41. package/browser-extensions/chrome/background.js +244 -237
  42. package/browser-extensions/chrome/content.js +32 -29
  43. package/browser-extensions/chrome/devtools.html +7 -7
  44. package/browser-extensions/chrome/devtools.js +19 -19
  45. package/browser-extensions/chrome/inspector.js +802 -767
  46. package/browser-extensions/chrome/manifest.json +71 -63
  47. package/browser-extensions/chrome/panel.html +674 -636
  48. package/browser-extensions/chrome/panel.js +722 -712
  49. package/browser-extensions/chrome/popup.html +586 -543
  50. package/browser-extensions/chrome/popup.js +282 -244
  51. package/browser-extensions/chrome/rules.json +1 -1
  52. package/browser-extensions/chrome/test-chrome.html +216 -136
  53. package/browser-extensions/chrome/test-mixed-content.html +284 -189
  54. package/browser-extensions/chrome/test-uri-pattern.html +221 -198
  55. package/browser-extensions/firefox/README.md +9 -6
  56. package/browser-extensions/firefox/background.js +221 -218
  57. package/browser-extensions/firefox/content.js +55 -52
  58. package/browser-extensions/firefox/debug-errors.html +386 -228
  59. package/browser-extensions/firefox/debug-https.html +153 -105
  60. package/browser-extensions/firefox/devtools.html +7 -7
  61. package/browser-extensions/firefox/devtools.js +23 -20
  62. package/browser-extensions/firefox/inspector.js +802 -767
  63. package/browser-extensions/firefox/manifest.json +68 -68
  64. package/browser-extensions/firefox/panel.html +674 -636
  65. package/browser-extensions/firefox/panel.js +722 -712
  66. package/browser-extensions/firefox/popup.html +572 -535
  67. package/browser-extensions/firefox/popup.js +281 -236
  68. package/browser-extensions/firefox/test-gramercy.html +170 -125
  69. package/browser-extensions/firefox/test-imports.html +59 -55
  70. package/browser-extensions/firefox/test-masking.html +231 -140
  71. package/browser-extensions/firefox/test-uri-pattern.html +221 -198
  72. package/dist/tui/App.d.ts +1 -1
  73. package/dist/tui/App.d.ts.map +1 -1
  74. package/dist/tui/App.js +154 -150
  75. package/dist/tui/App.js.map +1 -1
  76. package/dist/tui/components/AIPanel.d.ts.map +1 -1
  77. package/dist/tui/components/AIPanel.js +42 -35
  78. package/dist/tui/components/AIPanel.js.map +1 -1
  79. package/dist/tui/components/CommandInput.d.ts +1 -1
  80. package/dist/tui/components/CommandInput.d.ts.map +1 -1
  81. package/dist/tui/components/CommandInput.js +92 -62
  82. package/dist/tui/components/CommandInput.js.map +1 -1
  83. package/dist/tui/components/GeminiPanel.d.ts.map +1 -1
  84. package/dist/tui/components/GeminiPanel.js +37 -30
  85. package/dist/tui/components/GeminiPanel.js.map +1 -1
  86. package/dist/tui/components/Header.d.ts.map +1 -1
  87. package/dist/tui/components/Header.js +1 -1
  88. package/dist/tui/components/Header.js.map +1 -1
  89. package/dist/tui/components/LogPanel.d.ts +1 -1
  90. package/dist/tui/components/LogPanel.d.ts.map +1 -1
  91. package/dist/tui/components/LogPanel.js +26 -24
  92. package/dist/tui/components/LogPanel.js.map +1 -1
  93. package/dist/tui/components/TabBar.d.ts +2 -2
  94. package/dist/tui/components/TabBar.d.ts.map +1 -1
  95. package/dist/tui/components/TabBar.js +11 -11
  96. package/dist/tui/components/TabBar.js.map +1 -1
  97. package/dist/tui/components/WelcomeScreen.d.ts.map +1 -1
  98. package/dist/tui/components/WelcomeScreen.js +6 -6
  99. package/dist/tui/components/WelcomeScreen.js.map +1 -1
  100. package/dist/tui/index.d.ts.map +1 -1
  101. package/dist/tui/index.js +8 -8
  102. package/dist/tui/index.js.map +1 -1
  103. package/dist/tui/services/AIService.d.ts +2 -2
  104. package/dist/tui/services/AIService.d.ts.map +1 -1
  105. package/dist/tui/services/AIService.js +165 -125
  106. package/dist/tui/services/AIService.js.map +1 -1
  107. package/dist/tui/services/ExtensionService.d.ts +1 -1
  108. package/dist/tui/services/ExtensionService.d.ts.map +1 -1
  109. package/dist/tui/services/ExtensionService.js +33 -26
  110. package/dist/tui/services/ExtensionService.js.map +1 -1
  111. package/dist/tui/services/GeminiService.d.ts +1 -1
  112. package/dist/tui/services/GeminiService.d.ts.map +1 -1
  113. package/dist/tui/services/GeminiService.js +87 -76
  114. package/dist/tui/services/GeminiService.js.map +1 -1
  115. package/dist/tui/services/ServiceManager.d.ts +3 -3
  116. package/dist/tui/services/ServiceManager.d.ts.map +1 -1
  117. package/dist/tui/services/ServiceManager.js +72 -58
  118. package/dist/tui/services/ServiceManager.js.map +1 -1
  119. package/dist/tui/services/SocketService.d.ts.map +1 -1
  120. package/dist/tui/services/SocketService.js +32 -32
  121. package/dist/tui/services/SocketService.js.map +1 -1
  122. package/dist/tui/services/ViteService.d.ts.map +1 -1
  123. package/dist/tui/services/ViteService.js +26 -28
  124. package/dist/tui/services/ViteService.js.map +1 -1
  125. package/dist/tui/services/index.d.ts +6 -6
  126. package/dist/tui/services/index.d.ts.map +1 -1
  127. package/dist/tui/services/index.js +6 -6
  128. package/dist/tui/services/index.js.map +1 -1
  129. package/mcp/gxp-api-server.js +83 -81
  130. package/package.json +109 -93
  131. package/runtime/PortalContainer.vue +258 -234
  132. package/runtime/dev-tools/DevToolsModal.vue +153 -155
  133. package/runtime/dev-tools/LayoutSwitcher.vue +144 -140
  134. package/runtime/dev-tools/MockDataEditor.vue +456 -433
  135. package/runtime/dev-tools/SocketSimulator.vue +379 -371
  136. package/runtime/dev-tools/StoreInspector.vue +517 -455
  137. package/runtime/dev-tools/index.js +5 -5
  138. package/runtime/fallback-layouts/PrivateLayout.vue +2 -2
  139. package/runtime/fallback-layouts/PublicLayout.vue +2 -2
  140. package/runtime/fallback-layouts/SystemLayout.vue +2 -2
  141. package/runtime/gxpStringsPlugin.js +159 -134
  142. package/runtime/index.html +17 -19
  143. package/runtime/main.js +24 -22
  144. package/runtime/mock-api/auth-middleware.js +15 -15
  145. package/runtime/mock-api/image-generator.js +46 -46
  146. package/runtime/mock-api/index.js +55 -55
  147. package/runtime/mock-api/response-generator.js +116 -105
  148. package/runtime/mock-api/route-generator.js +107 -84
  149. package/runtime/mock-api/socket-triggers.js +94 -93
  150. package/runtime/mock-api/spec-loader.js +79 -80
  151. package/runtime/package.json +3 -0
  152. package/runtime/server.js +68 -68
  153. package/runtime/stores/gxpPortalConfigStore.js +204 -186
  154. package/runtime/stores/index.js +2 -2
  155. package/runtime/vite-inspector-plugin.js +858 -707
  156. package/runtime/vite-source-tracker-plugin.js +132 -113
  157. package/runtime/vite.config.js +191 -139
  158. package/scripts/launch-chrome.js +41 -41
  159. package/scripts/pack-chrome.js +38 -39
  160. package/socket-events/AiSessionMessageCreated.json +17 -17
  161. package/socket-events/SocialStreamPostCreated.json +23 -23
  162. package/socket-events/SocialStreamPostVariantCompleted.json +22 -22
  163. package/template/.claude/agents/gxp-developer.md +100 -99
  164. package/template/.claude/settings.json +7 -7
  165. package/template/AGENTS.md +30 -23
  166. package/template/GEMINI.md +20 -20
  167. package/template/README.md +70 -53
  168. package/template/app-manifest.json +2 -4
  169. package/template/configuration.json +10 -10
  170. package/template/default-styling.css +1 -1
  171. package/template/index.html +18 -20
  172. package/template/main.js +24 -22
  173. package/template/src/DemoPage.vue +415 -362
  174. package/template/src/Plugin.vue +76 -85
  175. package/template/src/stores/index.js +3 -3
  176. package/template/src/stores/test-data.json +164 -172
  177. package/template/theme-layouts/AdditionalStyling.css +50 -50
  178. package/template/theme-layouts/PrivateLayout.vue +8 -12
  179. package/template/theme-layouts/PublicLayout.vue +8 -12
  180. package/template/theme-layouts/SystemLayout.vue +8 -12
  181. package/template/vite.extend.js +45 -0
  182. package/template/vite.config.js +0 -409
package/browser-extensions/firefox/popup.html CHANGED
@@ -1,537 +1,574 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html>
3
- <head>
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-card {
249
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
250
- border-radius: 8px;
251
- padding: 14px;
252
- margin-top: 16px;
253
- cursor: pointer;
254
- transition: all 0.2s;
255
- box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
256
- }
257
-
258
- .inspector-card:hover {
259
- transform: translateY(-1px);
260
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
261
- }
262
-
263
- .inspector-card-header {
264
- display: flex;
265
- align-items: center;
266
- justify-content: space-between;
267
- margin-bottom: 8px;
268
- }
269
-
270
- .inspector-card-title {
271
- font-size: 13px;
272
- font-weight: 600;
273
- color: white;
274
- }
275
-
276
- .inspector-badge {
277
- background: rgba(255, 255, 255, 0.2);
278
- padding: 3px 8px;
279
- border-radius: 10px;
280
- font-size: 10px;
281
- font-weight: 600;
282
- color: white;
283
- }
284
-
285
- .inspector-badge.enabled {
286
- background: rgba(40, 167, 69, 0.8);
287
- }
288
-
289
- .inspector-card-desc {
290
- font-size: 11px;
291
- color: rgba(255, 255, 255, 0.85);
292
- margin-bottom: 8px;
293
- }
294
-
295
- .inspector-card-hint {
296
- font-size: 10px;
297
- color: rgba(255, 255, 255, 0.6);
298
- }
299
-
300
- .inspector-card-hint kbd {
301
- background: rgba(255, 255, 255, 0.2);
302
- color: white;
303
- padding: 2px 5px;
304
- border-radius: 3px;
305
- font-size: 9px;
306
- }
307
-
308
- kbd {
309
- background: #e9ecef;
310
- padding: 2px 5px;
311
- border-radius: 3px;
312
- font-size: 9px;
313
- }
314
-
315
- /* Footer */
316
- .footer {
317
- background: #fff;
318
- padding: 12px 16px;
319
- border-top: 1px solid #e9ecef;
320
- flex-shrink: 0;
321
- }
322
-
323
- .footer-buttons {
324
- display: flex;
325
- gap: 8px;
326
- }
327
-
328
- .save-button {
329
- flex: 1;
330
- background: #007bff;
331
- border: none;
332
- color: white;
333
- padding: 10px 16px;
334
- border-radius: 4px;
335
- font-size: 13px;
336
- font-weight: 500;
337
- cursor: pointer;
338
- }
339
-
340
- .save-button:hover {
341
- background: #0056b3;
342
- }
343
-
344
- .save-button:disabled {
345
- background: #6c757d;
346
- cursor: not-allowed;
347
- }
348
-
349
- .cache-button {
350
- background: #ffc107;
351
- border: none;
352
- color: #212529;
353
- padding: 10px 16px;
354
- border-radius: 4px;
355
- font-size: 13px;
356
- cursor: pointer;
357
- }
358
-
359
- .cache-button:hover {
360
- background: #e0a800;
361
- }
362
-
363
- .status {
364
- margin-top: 8px;
365
- padding: 6px 10px;
366
- border-radius: 4px;
367
- font-size: 11px;
368
- text-align: center;
369
- display: none;
370
- }
371
-
372
- .status.success {
373
- background: #d4edda;
374
- color: #155724;
375
- display: block;
376
- }
377
-
378
- .status.error {
379
- background: #f8d7da;
380
- color: #721c24;
381
- display: block;
382
- }
383
-
384
- .rule-disabled {
385
- opacity: 0.5;
386
- pointer-events: none;
387
- }
388
-
389
- .hidden {
390
- display: none !important;
391
- }
392
- </style>
393
- </head>
394
- <body>
395
- <!-- Header with main toggle -->
396
- <div class="header">
397
- <div class="header-row">
398
- <h1 class="title">GxP Developer Toolkit</h1>
399
- <button id="toggleButton" class="toggle-button">
400
- <div class="status-dot"></div>
401
- <span id="toggleText">OFF</span>
402
- </button>
403
- </div>
404
- </div>
405
-
406
- <!-- Tabs -->
407
- <div class="tabs">
408
- <button class="tab active" data-tab="js">
409
- JavaScript
410
- <span id="jsBadge" class="tab-badge enabled">ON</span>
411
- </button>
412
- <button class="tab" data-tab="css">
413
- CSS
414
- <span id="cssBadge" class="tab-badge enabled">ON</span>
415
- </button>
416
- <button class="tab" data-tab="settings">Settings</button>
417
- </div>
418
-
419
- <!-- Scrollable content area -->
420
- <div class="content">
421
- <!-- JavaScript Tab -->
422
- <div id="jsTab" class="tab-content active">
423
- <div class="rule-header">
424
- <span class="rule-title">JavaScript Redirect</span>
425
- <div>
426
- <input type="checkbox" id="jsRuleToggle">
427
- <label for="jsRuleToggle" style="font-size: 11px; margin-left: 4px;">Enabled</label>
428
- </div>
429
- </div>
430
-
431
- <div id="jsRuleContent">
432
- <div class="input-group">
433
- <label class="input-label">Redirect To URL</label>
434
- <input type="text" id="jsRedirectUrl" placeholder="https://localhost:3060/src/Plugin.vue">
435
- <div class="help-text">Local URL where JavaScript files should be redirected</div>
436
- </div>
437
-
438
- <div class="checkbox-group">
439
- <input type="checkbox" id="jsUseCustomPattern">
440
- <label for="jsUseCustomPattern">Use custom URL pattern</label>
441
- </div>
442
-
443
- <div class="input-group" id="jsPatternGroup">
444
- <label class="input-label">URL Pattern to Match (RegEx)</label>
445
- <textarea id="jsPattern" placeholder="Custom regex pattern"></textarea>
446
- <div class="help-text">RegEx pattern to match JavaScript file URLs</div>
447
- </div>
448
- </div>
449
-
450
- <!-- Component Inspector Card -->
451
- <div id="inspectorCard" class="inspector-card">
452
- <div class="inspector-card-header">
453
- <span class="inspector-card-title">Component Inspector</span>
454
- <span id="inspectorBadge" class="inspector-badge">OFF</span>
455
- </div>
456
- <div class="inspector-card-desc">Click to open DevTools and inspect Vue components</div>
457
- <div class="inspector-card-hint">Or press <kbd>Ctrl+Shift+I</kbd> on the page</div>
458
- </div>
459
- </div>
460
-
461
- <!-- CSS Tab -->
462
- <div id="cssTab" class="tab-content">
463
- <div class="rule-header">
464
- <span class="rule-title">CSS Override</span>
465
- <div>
466
- <input type="checkbox" id="cssRuleToggle">
467
- <label for="cssRuleToggle" style="font-size: 11px; margin-left: 4px;">Enabled</label>
468
- </div>
469
- </div>
470
-
471
- <div id="cssRuleContent">
472
- <div class="blank-option">
473
- <div class="blank-option-title">Return Blank CSS</div>
474
- <div class="checkbox-group" style="margin-bottom: 4px;">
475
- <input type="checkbox" id="cssReturnBlank">
476
- <label for="cssReturnBlank">Return empty CSS instead of redirecting</label>
477
- </div>
478
- <div class="help-text" style="margin: 0;">Disables production styles during development</div>
479
- </div>
480
-
481
- <div id="cssRedirectGroup">
482
- <div class="input-group">
483
- <label class="input-label">Redirect To URL</label>
484
- <input type="text" id="cssRedirectUrl" placeholder="https://localhost:3060/src/styles.css">
485
- <div class="help-text">Local URL where CSS files should be redirected</div>
486
- </div>
487
- </div>
488
-
489
- <div class="checkbox-group">
490
- <input type="checkbox" id="cssUseCustomPattern">
491
- <label for="cssUseCustomPattern">Use custom URL pattern</label>
492
- </div>
493
-
494
- <div class="input-group" id="cssPatternGroup">
495
- <label class="input-label">URL Pattern to Match (RegEx)</label>
496
- <textarea id="cssPattern" placeholder="Custom regex pattern"></textarea>
497
- <div class="help-text">RegEx pattern to match CSS file URLs</div>
498
- </div>
499
- </div>
500
- </div>
501
-
502
- <!-- Settings Tab -->
503
- <div id="settingsTab" class="tab-content">
504
- <div class="settings-section">
505
- <div class="settings-title">Cache Management</div>
506
- <div class="checkbox-group">
507
- <input type="checkbox" id="clearCacheOnEnable">
508
- <label for="clearCacheOnEnable">Clear cache when extension is enabled</label>
509
- </div>
510
- <div class="checkbox-group">
511
- <input type="checkbox" id="disableCacheForRedirects">
512
- <label for="disableCacheForRedirects">Disable caching for matched URLs</label>
513
- </div>
514
- </div>
515
-
516
- <div class="settings-section">
517
- <div class="settings-title">Advanced</div>
518
- <div class="checkbox-group">
519
- <input type="checkbox" id="maskingMode">
520
- <label for="maskingMode">URL Masking Mode</label>
521
- </div>
522
- </div>
523
- </div>
524
- </div>
525
-
526
- <!-- Fixed footer with buttons -->
527
- <div class="footer">
528
- <div class="footer-buttons">
529
- <button id="saveBtn" class="save-button">Save Configuration</button>
530
- <button id="clearCacheBtn" class="cache-button">Clear Cache</button>
531
- </div>
532
- <div id="statusMessage" class="status"></div>
533
- </div>
534
-
535
- <script src="popup.js"></script>
536
- </body>
3
+ <head>
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:
16
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
17
+ background: #f8f9fa;
18
+ display: flex;
19
+ flex-direction: column;
20
+ overflow: hidden;
21
+ }
22
+
23
+ /* Header */
24
+ .header {
25
+ background: #fff;
26
+ padding: 12px 16px;
27
+ border-bottom: 1px solid #e9ecef;
28
+ flex-shrink: 0;
29
+ }
30
+
31
+ .header-row {
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: space-between;
35
+ }
36
+
37
+ .title {
38
+ margin: 0;
39
+ font-size: 15px;
40
+ font-weight: 600;
41
+ color: #212529;
42
+ }
43
+
44
+ .toggle-button {
45
+ background: #dc3545;
46
+ border: none;
47
+ padding: 6px 14px;
48
+ border-radius: 16px;
49
+ color: white;
50
+ font-weight: 500;
51
+ font-size: 12px;
52
+ cursor: pointer;
53
+ transition: all 0.2s;
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 6px;
57
+ }
58
+
59
+ .toggle-button.enabled {
60
+ background: #28a745;
61
+ }
62
+
63
+ .toggle-button:hover {
64
+ opacity: 0.9;
65
+ }
66
+
67
+ .status-dot {
68
+ width: 6px;
69
+ height: 6px;
70
+ border-radius: 50%;
71
+ background: currentColor;
72
+ }
73
+
74
+ /* Tabs */
75
+ .tabs {
76
+ display: flex;
77
+ background: #fff;
78
+ border-bottom: 1px solid #e9ecef;
79
+ flex-shrink: 0;
80
+ }
81
+
82
+ .tab {
83
+ flex: 1;
84
+ padding: 10px 16px;
85
+ border: none;
86
+ background: transparent;
87
+ font-size: 13px;
88
+ font-weight: 500;
89
+ color: #6c757d;
90
+ cursor: pointer;
91
+ border-bottom: 2px solid transparent;
92
+ transition: all 0.2s;
93
+ }
94
+
95
+ .tab:hover {
96
+ color: #495057;
97
+ background: #f8f9fa;
98
+ }
99
+
100
+ .tab.active {
101
+ color: #007bff;
102
+ border-bottom-color: #007bff;
103
+ }
104
+
105
+ .tab-badge {
106
+ display: inline-block;
107
+ padding: 2px 6px;
108
+ margin-left: 6px;
109
+ border-radius: 10px;
110
+ font-size: 10px;
111
+ font-weight: 600;
112
+ }
113
+
114
+ .tab-badge.enabled {
115
+ background: #d4edda;
116
+ color: #155724;
117
+ }
118
+
119
+ .tab-badge.disabled {
120
+ background: #f8d7da;
121
+ color: #721c24;
122
+ }
123
+
124
+ /* Content area */
125
+ .content {
126
+ flex: 1;
127
+ overflow-y: auto;
128
+ padding: 16px;
129
+ }
130
+
131
+ .tab-content {
132
+ display: none;
133
+ }
134
+
135
+ .tab-content.active {
136
+ display: block;
137
+ }
138
+
139
+ /* Rule sections */
140
+ .rule-header {
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: space-between;
144
+ margin-bottom: 16px;
145
+ }
146
+
147
+ .rule-title {
148
+ font-size: 14px;
149
+ font-weight: 600;
150
+ color: #495057;
151
+ }
152
+
153
+ .input-group {
154
+ margin-bottom: 14px;
155
+ }
156
+
157
+ .input-label {
158
+ display: block;
159
+ font-size: 11px;
160
+ color: #6c757d;
161
+ font-weight: 500;
162
+ margin-bottom: 4px;
163
+ }
164
+
165
+ input[type="text"],
166
+ textarea {
167
+ width: 100%;
168
+ padding: 8px 10px;
169
+ border: 1px solid #ced4da;
170
+ border-radius: 4px;
171
+ font-size: 12px;
172
+ }
173
+
174
+ textarea {
175
+ min-height: 60px;
176
+ font-family: "Monaco", "Menlo", monospace;
177
+ resize: vertical;
178
+ }
179
+
180
+ input[type="text"]:focus,
181
+ textarea:focus {
182
+ outline: none;
183
+ border-color: #007bff;
184
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
185
+ }
186
+
187
+ input[type="text"]:disabled,
188
+ textarea:disabled {
189
+ background: #f8f9fa;
190
+ color: #6c757d;
191
+ }
192
+
193
+ .checkbox-group {
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 8px;
197
+ margin-bottom: 10px;
198
+ }
199
+
200
+ .checkbox-group input[type="checkbox"] {
201
+ margin: 0;
202
+ }
203
+
204
+ .checkbox-group label {
205
+ font-size: 12px;
206
+ color: #495057;
207
+ cursor: pointer;
208
+ }
209
+
210
+ .help-text {
211
+ font-size: 10px;
212
+ color: #6c757d;
213
+ margin-top: 4px;
214
+ line-height: 1.3;
215
+ }
216
+
217
+ .blank-option {
218
+ background: #fff3cd;
219
+ border: 1px solid #ffeaa7;
220
+ border-radius: 4px;
221
+ padding: 10px;
222
+ margin-bottom: 14px;
223
+ }
224
+
225
+ .blank-option-title {
226
+ font-size: 11px;
227
+ font-weight: 600;
228
+ color: #856404;
229
+ margin-bottom: 6px;
230
+ }
231
+
232
+ /* Settings tab */
233
+ .settings-section {
234
+ background: white;
235
+ border: 1px solid #dee2e6;
236
+ border-radius: 6px;
237
+ padding: 12px;
238
+ margin-bottom: 12px;
239
+ }
240
+
241
+ .settings-title {
242
+ font-size: 12px;
243
+ font-weight: 600;
244
+ color: #495057;
245
+ margin-bottom: 10px;
246
+ }
247
+
248
+ /* Inspector section */
249
+ .inspector-card {
250
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
251
+ border-radius: 8px;
252
+ padding: 14px;
253
+ margin-top: 16px;
254
+ cursor: pointer;
255
+ transition: all 0.2s;
256
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
257
+ }
258
+
259
+ .inspector-card:hover {
260
+ transform: translateY(-1px);
261
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
262
+ }
263
+
264
+ .inspector-card-header {
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: space-between;
268
+ margin-bottom: 8px;
269
+ }
270
+
271
+ .inspector-card-title {
272
+ font-size: 13px;
273
+ font-weight: 600;
274
+ color: white;
275
+ }
276
+
277
+ .inspector-badge {
278
+ background: rgba(255, 255, 255, 0.2);
279
+ padding: 3px 8px;
280
+ border-radius: 10px;
281
+ font-size: 10px;
282
+ font-weight: 600;
283
+ color: white;
284
+ }
285
+
286
+ .inspector-badge.enabled {
287
+ background: rgba(40, 167, 69, 0.8);
288
+ }
289
+
290
+ .inspector-card-desc {
291
+ font-size: 11px;
292
+ color: rgba(255, 255, 255, 0.85);
293
+ margin-bottom: 8px;
294
+ }
295
+
296
+ .inspector-card-hint {
297
+ font-size: 10px;
298
+ color: rgba(255, 255, 255, 0.6);
299
+ }
300
+
301
+ .inspector-card-hint kbd {
302
+ background: rgba(255, 255, 255, 0.2);
303
+ color: white;
304
+ padding: 2px 5px;
305
+ border-radius: 3px;
306
+ font-size: 9px;
307
+ }
308
+
309
+ kbd {
310
+ background: #e9ecef;
311
+ padding: 2px 5px;
312
+ border-radius: 3px;
313
+ font-size: 9px;
314
+ }
315
+
316
+ /* Footer */
317
+ .footer {
318
+ background: #fff;
319
+ padding: 12px 16px;
320
+ border-top: 1px solid #e9ecef;
321
+ flex-shrink: 0;
322
+ }
323
+
324
+ .footer-buttons {
325
+ display: flex;
326
+ gap: 8px;
327
+ }
328
+
329
+ .save-button {
330
+ flex: 1;
331
+ background: #007bff;
332
+ border: none;
333
+ color: white;
334
+ padding: 10px 16px;
335
+ border-radius: 4px;
336
+ font-size: 13px;
337
+ font-weight: 500;
338
+ cursor: pointer;
339
+ }
340
+
341
+ .save-button:hover {
342
+ background: #0056b3;
343
+ }
344
+
345
+ .save-button:disabled {
346
+ background: #6c757d;
347
+ cursor: not-allowed;
348
+ }
349
+
350
+ .cache-button {
351
+ background: #ffc107;
352
+ border: none;
353
+ color: #212529;
354
+ padding: 10px 16px;
355
+ border-radius: 4px;
356
+ font-size: 13px;
357
+ cursor: pointer;
358
+ }
359
+
360
+ .cache-button:hover {
361
+ background: #e0a800;
362
+ }
363
+
364
+ .status {
365
+ margin-top: 8px;
366
+ padding: 6px 10px;
367
+ border-radius: 4px;
368
+ font-size: 11px;
369
+ text-align: center;
370
+ display: none;
371
+ }
372
+
373
+ .status.success {
374
+ background: #d4edda;
375
+ color: #155724;
376
+ display: block;
377
+ }
378
+
379
+ .status.error {
380
+ background: #f8d7da;
381
+ color: #721c24;
382
+ display: block;
383
+ }
384
+
385
+ .rule-disabled {
386
+ opacity: 0.5;
387
+ pointer-events: none;
388
+ }
389
+
390
+ .hidden {
391
+ display: none !important;
392
+ }
393
+ </style>
394
+ </head>
395
+ <body>
396
+ <!-- Header with main toggle -->
397
+ <div class="header">
398
+ <div class="header-row">
399
+ <h1 class="title">GxP Developer Toolkit</h1>
400
+ <button id="toggleButton" class="toggle-button">
401
+ <div class="status-dot"></div>
402
+ <span id="toggleText">OFF</span>
403
+ </button>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Tabs -->
408
+ <div class="tabs">
409
+ <button class="tab active" data-tab="js">
410
+ JavaScript
411
+ <span id="jsBadge" class="tab-badge enabled">ON</span>
412
+ </button>
413
+ <button class="tab" data-tab="css">
414
+ CSS
415
+ <span id="cssBadge" class="tab-badge enabled">ON</span>
416
+ </button>
417
+ <button class="tab" data-tab="settings">Settings</button>
418
+ </div>
419
+
420
+ <!-- Scrollable content area -->
421
+ <div class="content">
422
+ <!-- JavaScript Tab -->
423
+ <div id="jsTab" class="tab-content active">
424
+ <div class="rule-header">
425
+ <span class="rule-title">JavaScript Redirect</span>
426
+ <div>
427
+ <input type="checkbox" id="jsRuleToggle" />
428
+ <label for="jsRuleToggle" style="font-size: 11px; margin-left: 4px"
429
+ >Enabled</label
430
+ >
431
+ </div>
432
+ </div>
433
+
434
+ <div id="jsRuleContent">
435
+ <div class="input-group">
436
+ <label class="input-label">Redirect To URL</label>
437
+ <input
438
+ type="text"
439
+ id="jsRedirectUrl"
440
+ placeholder="https://localhost:3060/src/Plugin.vue"
441
+ />
442
+ <div class="help-text">
443
+ Local URL where JavaScript files should be redirected
444
+ </div>
445
+ </div>
446
+
447
+ <div class="checkbox-group">
448
+ <input type="checkbox" id="jsUseCustomPattern" />
449
+ <label for="jsUseCustomPattern">Use custom URL pattern</label>
450
+ </div>
451
+
452
+ <div class="input-group" id="jsPatternGroup">
453
+ <label class="input-label">URL Pattern to Match (RegEx)</label>
454
+ <textarea
455
+ id="jsPattern"
456
+ placeholder="Custom regex pattern"
457
+ ></textarea>
458
+ <div class="help-text">
459
+ RegEx pattern to match JavaScript file URLs
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Component Inspector Card -->
465
+ <div id="inspectorCard" class="inspector-card">
466
+ <div class="inspector-card-header">
467
+ <span class="inspector-card-title">Component Inspector</span>
468
+ <span id="inspectorBadge" class="inspector-badge">OFF</span>
469
+ </div>
470
+ <div class="inspector-card-desc">
471
+ Click to open DevTools and inspect Vue components
472
+ </div>
473
+ <div class="inspector-card-hint">
474
+ Or press <kbd>Ctrl+Shift+I</kbd> on the page
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- CSS Tab -->
480
+ <div id="cssTab" class="tab-content">
481
+ <div class="rule-header">
482
+ <span class="rule-title">CSS Override</span>
483
+ <div>
484
+ <input type="checkbox" id="cssRuleToggle" />
485
+ <label for="cssRuleToggle" style="font-size: 11px; margin-left: 4px"
486
+ >Enabled</label
487
+ >
488
+ </div>
489
+ </div>
490
+
491
+ <div id="cssRuleContent">
492
+ <div class="blank-option">
493
+ <div class="blank-option-title">Return Blank CSS</div>
494
+ <div class="checkbox-group" style="margin-bottom: 4px">
495
+ <input type="checkbox" id="cssReturnBlank" />
496
+ <label for="cssReturnBlank"
497
+ >Return empty CSS instead of redirecting</label
498
+ >
499
+ </div>
500
+ <div class="help-text" style="margin: 0">
501
+ Disables production styles during development
502
+ </div>
503
+ </div>
504
+
505
+ <div id="cssRedirectGroup">
506
+ <div class="input-group">
507
+ <label class="input-label">Redirect To URL</label>
508
+ <input
509
+ type="text"
510
+ id="cssRedirectUrl"
511
+ placeholder="https://localhost:3060/src/styles.css"
512
+ />
513
+ <div class="help-text">
514
+ Local URL where CSS files should be redirected
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="checkbox-group">
520
+ <input type="checkbox" id="cssUseCustomPattern" />
521
+ <label for="cssUseCustomPattern">Use custom URL pattern</label>
522
+ </div>
523
+
524
+ <div class="input-group" id="cssPatternGroup">
525
+ <label class="input-label">URL Pattern to Match (RegEx)</label>
526
+ <textarea
527
+ id="cssPattern"
528
+ placeholder="Custom regex pattern"
529
+ ></textarea>
530
+ <div class="help-text">RegEx pattern to match CSS file URLs</div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Settings Tab -->
536
+ <div id="settingsTab" class="tab-content">
537
+ <div class="settings-section">
538
+ <div class="settings-title">Cache Management</div>
539
+ <div class="checkbox-group">
540
+ <input type="checkbox" id="clearCacheOnEnable" />
541
+ <label for="clearCacheOnEnable"
542
+ >Clear cache when extension is enabled</label
543
+ >
544
+ </div>
545
+ <div class="checkbox-group">
546
+ <input type="checkbox" id="disableCacheForRedirects" />
547
+ <label for="disableCacheForRedirects"
548
+ >Disable caching for matched URLs</label
549
+ >
550
+ </div>
551
+ </div>
552
+
553
+ <div class="settings-section">
554
+ <div class="settings-title">Advanced</div>
555
+ <div class="checkbox-group">
556
+ <input type="checkbox" id="maskingMode" />
557
+ <label for="maskingMode">URL Masking Mode</label>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Fixed footer with buttons -->
564
+ <div class="footer">
565
+ <div class="footer-buttons">
566
+ <button id="saveBtn" class="save-button">Save Configuration</button>
567
+ <button id="clearCacheBtn" class="cache-button">Clear Cache</button>
568
+ </div>
569
+ <div id="statusMessage" class="status"></div>
570
+ </div>
571
+
572
+ <script src="popup.js"></script>
573
+ </body>
537
574
  </html>