@gxp-dev/tools 2.0.63 → 2.0.64

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/chrome/test-mixed-content.html CHANGED
@@ -1,190 +1,285 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html>
3
- <head>
4
- <title>Mixed Content Proxy Test</title>
5
- <style>
6
- body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; }
7
- .test-section { margin: 20px 0; padding: 20px; border: 2px solid #ddd; border-radius: 8px; }
8
- .error { border-color: #dc3545; background: #fff5f5; }
9
- .success { border-color: #28a745; background: #f8fff8; }
10
- .warning { border-color: #ffc107; background: #fffbf0; }
11
- .info { border-color: #17a2b8; background: #f0f9ff; }
12
- .code { background: #e9ecef; padding: 8px; font-family: monospace; margin: 8px 0; word-break: break-all; }
13
- .results { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 4px; max-height: 300px; overflow-y: auto; }
14
- button { padding: 10px 15px; margin: 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
15
- .status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
16
- .blocked { background: #dc3545; }
17
- .allowed { background: #28a745; }
18
- .warning-icon { background: #ffc107; }
19
- </style>
20
- </head>
21
- <body>
22
- <h1>🔒 Mixed Content Proxy Test</h1>
23
-
24
- <div class="test-section info">
25
- <h2>🌐 Current Page Security</h2>
26
- <div id="pageInfo"></div>
27
- <div class="code" id="currentUrl"></div>
28
- </div>
29
-
30
- <div class="test-section warning">
31
- <h2>⚠️ Mixed Content Policy</h2>
32
- <p><strong>Browser Security Rule:</strong> HTTPS pages cannot make requests to HTTP endpoints</p>
33
- <ul>
34
- <li><span class="status-indicator blocked"></span><strong>BLOCKED:</strong> HTTPS → HTTP (Subresources)</li>
35
- <li><span class="status-indicator warning-icon"></span><strong>WARNING:</strong> HTTPS → HTTP (Navigation)</li>
36
- <li><span class="status-indicator allowed"></span><strong>ALLOWED:</strong> HTTPS → HTTPS</li>
37
- <li><span class="status-indicator allowed"></span><strong>ALLOWED:</strong> HTTP → HTTP</li>
38
- </ul>
39
- </div>
40
-
41
- <div class="test-section">
42
- <h2>🧪 Mixed Content Tests</h2>
43
- <button onclick="testHttpsToHttp()">Test HTTPS → HTTP Fetch</button>
44
- <button onclick="testHttpsToHttps()">Test HTTPS → HTTPS Fetch</button>
45
- <button onclick="testImageLoad()">Test HTTP Image Load</button>
46
- <button onclick="testScriptLoad()">Test HTTP Script Load</button>
47
- <div id="testResults" class="results"></div>
48
- </div>
49
-
50
- <div class="test-section error">
51
- <h2>❌ Common Scenarios That Fail</h2>
52
- <div class="code">
53
- # Page: https://example.com<br>
54
- # Proxy rule: api.service.com → http://my-proxy.local:8080<br>
55
- # Result: ❌ BLOCKED - Mixed content violation
56
- </div>
57
- </div>
58
-
59
- <div class="test-section success">
60
- <h2>✅ Working Solutions</h2>
61
- <h3>Option 1: Use HTTPS for Proxy Target</h3>
62
- <div class="code">
63
- # Proxy rule: api.service.com → https://my-proxy.com<br>
64
- # Result: ✅ WORKS - Both HTTPS
65
- </div>
66
-
67
- <h3>Option 2: Setup HTTPS on Local Proxy</h3>
68
- <div class="code">
69
- # Use mkcert or similar to create local HTTPS<br>
70
- # Proxy rule: api.service.com → https://localhost:8443<br>
71
- # Result: ✅ WORKS - HTTPS to HTTPS
72
- </div>
73
-
74
- <h3>Option 3: Browser Flags (Development Only)</h3>
75
- <div class="code">
76
- # Chrome: --disable-web-security --disable-features=VizDisplayCompositor<br>
77
- # Firefox: security.mixed_content.block_active_content = false<br>
78
- # Result: ⚠️ WORKS but INSECURE
79
- </div>
80
- </div>
81
-
82
- <div class="test-section info">
83
- <h2>🔧 Extension Capabilities</h2>
84
- <table style="width: 100%; border-collapse: collapse;">
85
- <tr style="background: #f8f9fa;">
86
- <th style="border: 1px solid #ddd; padding: 8px;">Request Type</th>
87
- <th style="border: 1px solid #ddd; padding: 8px;">HTTPS → HTTP</th>
88
- <th style="border: 1px solid #ddd; padding: 8px;">Extension Override</th>
89
- </tr>
90
- <tr>
91
- <td style="border: 1px solid #ddd; padding: 8px;">Main Frame Navigation</td>
92
- <td style="border: 1px solid #ddd; padding: 8px;">⚠️ Warning shown</td>
93
- <td style="border: 1px solid #ddd; padding: 8px;">✅ Can redirect</td>
94
- </tr>
95
- <tr>
96
- <td style="border: 1px solid #ddd; padding: 8px;">fetch() / XHR</td>
97
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
98
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
99
- </tr>
100
- <tr>
101
- <td style="border: 1px solid #ddd; padding: 8px;">Images / CSS</td>
102
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
103
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
104
- </tr>
105
- <tr>
106
- <td style="border: 1px solid #ddd; padding: 8px;">Scripts / Modules</td>
107
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
108
- <td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
109
- </tr>
110
- </table>
111
- </div>
112
-
113
- <script>
114
- function log(message, type = 'info') {
115
- const results = document.getElementById('testResults');
116
- const timestamp = new Date().toLocaleTimeString();
117
- const icon = type === 'error' ? '❌' : type === 'success' ? '✅' : type === 'warning' ? '⚠️' : 'ℹ️';
118
- results.innerHTML += `<div>${timestamp} ${icon} ${message}</div>`;
119
- }
120
-
121
- function updatePageInfo() {
122
- const protocol = window.location.protocol;
123
- const isHttps = protocol === 'https:';
124
- const pageInfo = document.getElementById('pageInfo');
125
- const currentUrl = document.getElementById('currentUrl');
126
-
127
- pageInfo.innerHTML = `
128
- <strong>Protocol:</strong> ${protocol} ${isHttps ? '🔒 Secure' : '🔓 Insecure'}<br>
129
- <strong>Mixed Content Policy:</strong> ${isHttps ? '✅ Active' : '➖ Not applicable'}
130
- `;
131
- currentUrl.textContent = window.location.href;
132
- }
133
-
134
- async function testHttpsToHttp() {
135
- log('Testing HTTPS page → HTTP endpoint...');
136
-
137
- try {
138
- const response = await fetch('http://httpbin.org/get?test=mixed-content');
139
- log(`✅ Request succeeded: ${response.status}`, 'success');
140
- } catch (error) {
141
- if (error.message.includes('mixed content')) {
142
- log(`❌ Mixed content blocked: ${error.message}`, 'error');
143
- } else {
144
- log(`❌ Request failed: ${error.message}`, 'error');
145
- }
146
- }
147
- }
148
-
149
- async function testHttpsToHttps() {
150
- log('Testing HTTPS page → HTTPS endpoint...');
151
-
152
- try {
153
- const response = await fetch('https://httpbin.org/get?test=secure');
154
- log(`✅ Request succeeded: ${response.status}`, 'success');
155
- } catch (error) {
156
- log(`❌ Request failed: ${error.message}`, 'error');
157
- }
158
- }
159
-
160
- function testImageLoad() {
161
- log('Testing HTTP image load...');
162
-
163
- const img = new Image();
164
- img.onload = () => log('✅ HTTP image loaded successfully', 'success');
165
- img.onerror = () => log('❌ HTTP image blocked by mixed content policy', 'error');
166
- img.src = 'http://httpbin.org/image/png?test=image';
167
- }
168
-
169
- function testScriptLoad() {
170
- log('Testing HTTP script load...');
171
-
172
- const script = document.createElement('script');
173
- script.onload = () => log('✅ HTTP script loaded successfully', 'success');
174
- script.onerror = () => log('❌ HTTP script blocked by mixed content policy', 'error');
175
- script.src = 'http://httpbin.org/base64/Y29uc29sZS5sb2coJ0hUVFAgc2NyaXB0IGxvYWRlZCcpOw==';
176
- document.head.appendChild(script);
177
- }
178
-
179
- // Initialize page
180
- updatePageInfo();
181
-
182
- // Show initial warning if on HTTPS
183
- if (window.location.protocol === 'https:') {
184
- log('⚠️ This is an HTTPS page. HTTP requests will be blocked by mixed content policy.', 'warning');
185
- } else {
186
- log('ℹ️ This is an HTTP page. No mixed content restrictions apply.', 'info');
187
- }
188
- </script>
189
- </body>
190
- </html>
3
+ <head>
4
+ <title>Mixed Content Proxy Test</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ padding: 20px;
9
+ max-width: 800px;
10
+ }
11
+ .test-section {
12
+ margin: 20px 0;
13
+ padding: 20px;
14
+ border: 2px solid #ddd;
15
+ border-radius: 8px;
16
+ }
17
+ .error {
18
+ border-color: #dc3545;
19
+ background: #fff5f5;
20
+ }
21
+ .success {
22
+ border-color: #28a745;
23
+ background: #f8fff8;
24
+ }
25
+ .warning {
26
+ border-color: #ffc107;
27
+ background: #fffbf0;
28
+ }
29
+ .info {
30
+ border-color: #17a2b8;
31
+ background: #f0f9ff;
32
+ }
33
+ .code {
34
+ background: #e9ecef;
35
+ padding: 8px;
36
+ font-family: monospace;
37
+ margin: 8px 0;
38
+ word-break: break-all;
39
+ }
40
+ .results {
41
+ background: #f5f5f5;
42
+ padding: 10px;
43
+ margin: 10px 0;
44
+ border-radius: 4px;
45
+ max-height: 300px;
46
+ overflow-y: auto;
47
+ }
48
+ button {
49
+ padding: 10px 15px;
50
+ margin: 5px;
51
+ cursor: pointer;
52
+ background: #007bff;
53
+ color: white;
54
+ border: none;
55
+ border-radius: 4px;
56
+ }
57
+ .status-indicator {
58
+ display: inline-block;
59
+ width: 12px;
60
+ height: 12px;
61
+ border-radius: 50%;
62
+ margin-right: 8px;
63
+ }
64
+ .blocked {
65
+ background: #dc3545;
66
+ }
67
+ .allowed {
68
+ background: #28a745;
69
+ }
70
+ .warning-icon {
71
+ background: #ffc107;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body>
76
+ <h1>🔒 Mixed Content Proxy Test</h1>
77
+
78
+ <div class="test-section info">
79
+ <h2>🌐 Current Page Security</h2>
80
+ <div id="pageInfo"></div>
81
+ <div class="code" id="currentUrl"></div>
82
+ </div>
83
+
84
+ <div class="test-section warning">
85
+ <h2>⚠️ Mixed Content Policy</h2>
86
+ <p>
87
+ <strong>Browser Security Rule:</strong> HTTPS pages cannot make requests
88
+ to HTTP endpoints
89
+ </p>
90
+ <ul>
91
+ <li>
92
+ <span class="status-indicator blocked"></span
93
+ ><strong>BLOCKED:</strong> HTTPS → HTTP (Subresources)
94
+ </li>
95
+ <li>
96
+ <span class="status-indicator warning-icon"></span
97
+ ><strong>WARNING:</strong> HTTPS → HTTP (Navigation)
98
+ </li>
99
+ <li>
100
+ <span class="status-indicator allowed"></span
101
+ ><strong>ALLOWED:</strong> HTTPS → HTTPS
102
+ </li>
103
+ <li>
104
+ <span class="status-indicator allowed"></span
105
+ ><strong>ALLOWED:</strong> HTTP → HTTP
106
+ </li>
107
+ </ul>
108
+ </div>
109
+
110
+ <div class="test-section">
111
+ <h2>🧪 Mixed Content Tests</h2>
112
+ <button onclick="testHttpsToHttp()">Test HTTPS → HTTP Fetch</button>
113
+ <button onclick="testHttpsToHttps()">Test HTTPS → HTTPS Fetch</button>
114
+ <button onclick="testImageLoad()">Test HTTP Image Load</button>
115
+ <button onclick="testScriptLoad()">Test HTTP Script Load</button>
116
+ <div id="testResults" class="results"></div>
117
+ </div>
118
+
119
+ <div class="test-section error">
120
+ <h2>❌ Common Scenarios That Fail</h2>
121
+ <div class="code">
122
+ # Page: https://example.com<br />
123
+ # Proxy rule: api.service.com → http://my-proxy.local:8080<br />
124
+ # Result: ❌ BLOCKED - Mixed content violation
125
+ </div>
126
+ </div>
127
+
128
+ <div class="test-section success">
129
+ <h2>✅ Working Solutions</h2>
130
+ <h3>Option 1: Use HTTPS for Proxy Target</h3>
131
+ <div class="code">
132
+ # Proxy rule: api.service.com → https://my-proxy.com<br />
133
+ # Result: ✅ WORKS - Both HTTPS
134
+ </div>
135
+
136
+ <h3>Option 2: Setup HTTPS on Local Proxy</h3>
137
+ <div class="code">
138
+ # Use mkcert or similar to create local HTTPS<br />
139
+ # Proxy rule: api.service.com → https://localhost:8443<br />
140
+ # Result: ✅ WORKS - HTTPS to HTTPS
141
+ </div>
142
+
143
+ <h3>Option 3: Browser Flags (Development Only)</h3>
144
+ <div class="code">
145
+ # Chrome: --disable-web-security
146
+ --disable-features=VizDisplayCompositor<br />
147
+ # Firefox: security.mixed_content.block_active_content = false<br />
148
+ # Result: ⚠️ WORKS but INSECURE
149
+ </div>
150
+ </div>
151
+
152
+ <div class="test-section info">
153
+ <h2>🔧 Extension Capabilities</h2>
154
+ <table style="width: 100%; border-collapse: collapse">
155
+ <tr style="background: #f8f9fa">
156
+ <th style="border: 1px solid #ddd; padding: 8px">Request Type</th>
157
+ <th style="border: 1px solid #ddd; padding: 8px">HTTPS → HTTP</th>
158
+ <th style="border: 1px solid #ddd; padding: 8px">
159
+ Extension Override
160
+ </th>
161
+ </tr>
162
+ <tr>
163
+ <td style="border: 1px solid #ddd; padding: 8px">
164
+ Main Frame Navigation
165
+ </td>
166
+ <td style="border: 1px solid #ddd; padding: 8px">⚠️ Warning shown</td>
167
+ <td style="border: 1px solid #ddd; padding: 8px">✅ Can redirect</td>
168
+ </tr>
169
+ <tr>
170
+ <td style="border: 1px solid #ddd; padding: 8px">fetch() / XHR</td>
171
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Blocked</td>
172
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Still blocked</td>
173
+ </tr>
174
+ <tr>
175
+ <td style="border: 1px solid #ddd; padding: 8px">Images / CSS</td>
176
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Blocked</td>
177
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Still blocked</td>
178
+ </tr>
179
+ <tr>
180
+ <td style="border: 1px solid #ddd; padding: 8px">
181
+ Scripts / Modules
182
+ </td>
183
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Blocked</td>
184
+ <td style="border: 1px solid #ddd; padding: 8px">❌ Still blocked</td>
185
+ </tr>
186
+ </table>
187
+ </div>
188
+
189
+ <script>
190
+ function log(message, type = "info") {
191
+ const results = document.getElementById("testResults")
192
+ const timestamp = new Date().toLocaleTimeString()
193
+ const icon =
194
+ type === "error"
195
+ ? "❌"
196
+ : type === "success"
197
+ ? "✅"
198
+ : type === "warning"
199
+ ? "⚠️"
200
+ : "ℹ️"
201
+ results.innerHTML += `<div>${timestamp} ${icon} ${message}</div>`
202
+ }
203
+
204
+ function updatePageInfo() {
205
+ const protocol = window.location.protocol
206
+ const isHttps = protocol === "https:"
207
+ const pageInfo = document.getElementById("pageInfo")
208
+ const currentUrl = document.getElementById("currentUrl")
209
+
210
+ pageInfo.innerHTML = `
211
+ <strong>Protocol:</strong> ${protocol} ${isHttps ? "🔒 Secure" : "🔓 Insecure"}<br>
212
+ <strong>Mixed Content Policy:</strong> ${isHttps ? "✅ Active" : "➖ Not applicable"}
213
+ `
214
+ currentUrl.textContent = window.location.href
215
+ }
216
+
217
+ async function testHttpsToHttp() {
218
+ log("Testing HTTPS page → HTTP endpoint...")
219
+
220
+ try {
221
+ const response = await fetch(
222
+ "http://httpbin.org/get?test=mixed-content",
223
+ )
224
+ log(`✅ Request succeeded: ${response.status}`, "success")
225
+ } catch (error) {
226
+ if (error.message.includes("mixed content")) {
227
+ log(`❌ Mixed content blocked: ${error.message}`, "error")
228
+ } else {
229
+ log(`❌ Request failed: ${error.message}`, "error")
230
+ }
231
+ }
232
+ }
233
+
234
+ async function testHttpsToHttps() {
235
+ log("Testing HTTPS page → HTTPS endpoint...")
236
+
237
+ try {
238
+ const response = await fetch("https://httpbin.org/get?test=secure")
239
+ log(`✅ Request succeeded: ${response.status}`, "success")
240
+ } catch (error) {
241
+ log(`❌ Request failed: ${error.message}`, "error")
242
+ }
243
+ }
244
+
245
+ function testImageLoad() {
246
+ log("Testing HTTP image load...")
247
+
248
+ const img = new Image()
249
+ img.onload = () => log("✅ HTTP image loaded successfully", "success")
250
+ img.onerror = () =>
251
+ log("❌ HTTP image blocked by mixed content policy", "error")
252
+ img.src = "http://httpbin.org/image/png?test=image"
253
+ }
254
+
255
+ function testScriptLoad() {
256
+ log("Testing HTTP script load...")
257
+
258
+ const script = document.createElement("script")
259
+ script.onload = () =>
260
+ log("✅ HTTP script loaded successfully", "success")
261
+ script.onerror = () =>
262
+ log("❌ HTTP script blocked by mixed content policy", "error")
263
+ script.src =
264
+ "http://httpbin.org/base64/Y29uc29sZS5sb2coJ0hUVFAgc2NyaXB0IGxvYWRlZCcpOw=="
265
+ document.head.appendChild(script)
266
+ }
267
+
268
+ // Initialize page
269
+ updatePageInfo()
270
+
271
+ // Show initial warning if on HTTPS
272
+ if (window.location.protocol === "https:") {
273
+ log(
274
+ "⚠️ This is an HTTPS page. HTTP requests will be blocked by mixed content policy.",
275
+ "warning",
276
+ )
277
+ } else {
278
+ log(
279
+ "ℹ️ This is an HTTP page. No mixed content restrictions apply.",
280
+ "info",
281
+ )
282
+ }
283
+ </script>
284
+ </body>
285
+ </html>