@dynamicu/chromedebug-mcp 2.6.7 → 2.7.1
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/CLAUDE.md +17 -1
- package/README.md +1 -1
- package/chrome-extension/activation-manager.js +10 -10
- package/chrome-extension/background.js +1045 -736
- package/chrome-extension/browser-recording-manager.js +1 -1
- package/chrome-extension/chrome-debug-logger.js +168 -0
- package/chrome-extension/chrome-session-manager.js +5 -5
- package/chrome-extension/console-interception-library.js +430 -0
- package/chrome-extension/content.css +16 -16
- package/chrome-extension/content.js +739 -221
- package/chrome-extension/data-buffer.js +5 -5
- package/chrome-extension/dom-tracker.js +9 -9
- package/chrome-extension/extension-config.js +1 -1
- package/chrome-extension/firebase-client.js +13 -13
- package/chrome-extension/frame-capture.js +20 -38
- package/chrome-extension/license-helper.js +33 -7
- package/chrome-extension/manifest.free.json +3 -6
- package/chrome-extension/network-tracker.js +9 -9
- package/chrome-extension/options.html +10 -0
- package/chrome-extension/options.js +21 -8
- package/chrome-extension/performance-monitor.js +17 -17
- package/chrome-extension/popup.html +230 -193
- package/chrome-extension/popup.js +146 -458
- package/chrome-extension/pro/enhanced-capture.js +406 -0
- package/chrome-extension/pro/frame-editor.html +433 -0
- package/chrome-extension/pro/frame-editor.js +1567 -0
- package/chrome-extension/pro/function-tracker.js +843 -0
- package/chrome-extension/pro/jszip.min.js +13 -0
- package/chrome-extension/upload-manager.js +7 -7
- package/dist/chromedebug-extension-free.zip +0 -0
- package/package.json +3 -1
- package/scripts/webpack.config.free.cjs +8 -8
- package/scripts/webpack.config.pro.cjs +2 -0
- package/src/cli.js +2 -2
- package/src/database.js +55 -7
- package/src/index.js +9 -6
- package/src/mcp/server.js +2 -2
- package/src/services/process-manager.js +10 -6
- package/src/services/process-tracker.js +10 -5
- package/src/services/profile-manager.js +17 -2
- package/src/validation/schemas.js +12 -11
- package/src/index-direct.js +0 -157
- package/src/index-modular.js +0 -219
- package/src/index-monolithic-backup.js +0 -2230
- package/src/legacy/chrome-controller-old.js +0 -1406
- package/src/legacy/index-express.js +0 -625
- package/src/legacy/index-old.js +0 -977
- package/src/legacy/routes.js +0 -260
- package/src/legacy/shared-storage.js +0 -101
|
@@ -4,9 +4,11 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<style>
|
|
6
6
|
body {
|
|
7
|
-
width:
|
|
8
|
-
padding:
|
|
7
|
+
width: 750px;
|
|
8
|
+
padding: 10px;
|
|
9
9
|
font-family: Arial, sans-serif;
|
|
10
|
+
overflow-x: hidden;
|
|
11
|
+
box-sizing: border-box;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
a {
|
|
@@ -152,117 +154,86 @@
|
|
|
152
154
|
</style>
|
|
153
155
|
</head>
|
|
154
156
|
<body>
|
|
155
|
-
<div style="position: absolute; top: 5px; right:
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<!-- Pro Tier Display -->
|
|
173
|
-
<div id="pro-tier-status" style="display: none;">
|
|
174
|
-
<p style="font-size: 13px; margin: 5px 0; color: #4caf50; font-weight: 500;">
|
|
175
|
-
Pro License Active - Unlimited recordings
|
|
176
|
-
</p>
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
|
-
<!-- License Activation -->
|
|
180
|
-
<div id="license-activation" style="margin-top: 10px;">
|
|
181
|
-
<input type="text" id="license-key-input" placeholder="Enter license key"
|
|
182
|
-
style="width: 100%; padding: 6px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 5px; box-sizing: border-box;">
|
|
183
|
-
<button id="activate-license-btn" style="padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; width: 100%;">
|
|
184
|
-
Activate License
|
|
185
|
-
</button>
|
|
186
|
-
</div>
|
|
187
|
-
|
|
188
|
-
<div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
|
|
189
|
-
|
|
190
|
-
<!-- Inline Activation Manager (shown when activation limit reached) -->
|
|
191
|
-
<div id="inline-activation-manager" style="display: none; margin-top: 15px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;">
|
|
192
|
-
<div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 10px;">
|
|
193
|
-
⚠️ Activation Limit Reached
|
|
194
|
-
</div>
|
|
195
|
-
<div style="font-size: 12px; color: #856404; margin-bottom: 12px;">
|
|
196
|
-
Please deactivate an existing activation to continue
|
|
197
|
-
</div>
|
|
198
|
-
<div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
|
|
199
|
-
<!-- Activations will be loaded here dynamically -->
|
|
157
|
+
<div style="position: absolute; top: 5px; right: 35px; font-size: 10px; color: #999; font-family: monospace;">v2.1.2</div>
|
|
158
|
+
|
|
159
|
+
<!-- Settings Button (Top Right) -->
|
|
160
|
+
<button id="settings-btn" title="Settings" style="position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; padding: 0; border: none; background: transparent; cursor: pointer; opacity: 0.6; transition: opacity 0.2s;">
|
|
161
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#666">
|
|
162
|
+
<path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
|
163
|
+
</svg>
|
|
164
|
+
</button>
|
|
165
|
+
|
|
166
|
+
<!-- Header with Title and Server Status -->
|
|
167
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0;">
|
|
168
|
+
<h2 style="margin: 0; flex: 0 0 auto;">Chrome Debug Assistant</h2>
|
|
169
|
+
<div style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 15px;">
|
|
170
|
+
<div style="font-size: 10px;">
|
|
171
|
+
<span class="server-status disconnected" id="serverStatus"></span>
|
|
172
|
+
<span id="statusText">Checking...</span>
|
|
200
173
|
</div>
|
|
174
|
+
<a href="https://github.com/dynamicupgrade/ChromeDebug" target="_blank" style="font-size: 10px; color: #2196F3; text-decoration: none;">📚 Documentation</a>
|
|
201
175
|
</div>
|
|
176
|
+
<div style="flex: 0 0 auto; width: 200px;"></div>
|
|
202
177
|
</div>
|
|
203
178
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
179
|
+
<!-- License Section (Outside Grid, Hidden for PRO) -->
|
|
180
|
+
<div id="license-section" style="padding: 8px; border: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; margin-bottom: 15px;">
|
|
181
|
+
<h3 style="margin: 0 0 6px 0; font-size: 12px; color: #333;">License Status</h3>
|
|
182
|
+
|
|
183
|
+
<!-- Free Tier Display -->
|
|
184
|
+
<div id="free-tier-status" style="display: none;">
|
|
185
|
+
<p style="font-size: 10px; margin: 3px 0; color: #666;">
|
|
186
|
+
<span id="usage-count" style="font-weight: bold;">0</span>/<span id="usage-limit" style="font-weight: bold;">5</span> today
|
|
187
|
+
</p>
|
|
188
|
+
<button id="upgrade-btn" style="background: #ff6b6b; color: white; padding: 5px 8px; border: none; border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 500; width: 100%; margin-top: 4px;">
|
|
189
|
+
Upgrade Pro
|
|
190
|
+
</button>
|
|
191
|
+
</div>
|
|
208
192
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
<button id="retryConnectionBtn" style="display: none; padding: 4px 12px; font-size: 12px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; white-space: nowrap;">
|
|
216
|
-
Retry Connection
|
|
217
|
-
</button>
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
193
|
+
<!-- Pro Tier Display -->
|
|
194
|
+
<div id="pro-tier-status" style="display: none;">
|
|
195
|
+
<p style="font-size: 10px; margin: 3px 0; color: #4caf50; font-weight: 500;">
|
|
196
|
+
Pro Active
|
|
197
|
+
</p>
|
|
198
|
+
</div>
|
|
220
199
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<a href="/options.html" target="_blank" style="font-size: 12px;">Settings</a>
|
|
230
|
-
</div>
|
|
231
|
-
<div id="siteStatus" style="font-size: 13px; margin-bottom: 8px;">
|
|
232
|
-
<span id="siteStatusIcon">⏳</span> <span id="siteStatusText">Checking...</span>
|
|
233
|
-
</div>
|
|
234
|
-
<div style="display: flex; gap: 5px;">
|
|
235
|
-
<button id="toggleSiteBtn" class="site-toggle-btn" style="flex: 1; padding: 5px 8px; font-size: 12px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer;" disabled>
|
|
236
|
-
Loading...
|
|
237
|
-
</button>
|
|
238
|
-
<button id="addSiteBtn" class="site-toggle-btn" style="flex: 1; padding: 5px 8px; font-size: 12px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer;" disabled>
|
|
239
|
-
Add Site
|
|
240
|
-
</button>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
200
|
+
<!-- License Activation -->
|
|
201
|
+
<div id="license-activation" style="margin-top: 6px;">
|
|
202
|
+
<input type="text" id="license-key-input" placeholder="License key"
|
|
203
|
+
style="width: 100%; padding: 4px; font-size: 10px; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 4px; box-sizing: border-box;">
|
|
204
|
+
<button id="activate-license-btn" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 10px; width: 100%;">
|
|
205
|
+
Activate
|
|
206
|
+
</button>
|
|
207
|
+
</div>
|
|
243
208
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
209
|
+
<div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
|
|
210
|
+
|
|
211
|
+
<!-- Inline Activation Manager (shown when activation limit reached) -->
|
|
212
|
+
<div id="inline-activation-manager" style="display: none; margin-top: 15px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;">
|
|
213
|
+
<div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 10px;">
|
|
214
|
+
⚠️ Activation Limit Reached
|
|
215
|
+
</div>
|
|
216
|
+
<div style="font-size: 12px; color: #856404; margin-bottom: 12px;">
|
|
217
|
+
Please deactivate an existing activation to continue
|
|
218
|
+
</div>
|
|
219
|
+
<div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
|
|
220
|
+
<!-- Activations will be loaded here dynamically -->
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
256
223
|
</div>
|
|
257
224
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
225
|
+
<!-- 2-Column Layout for Recordings -->
|
|
226
|
+
<div style="display: grid; grid-template-columns: 50% 50%; gap: 6px; box-sizing: border-box; overflow: hidden; max-width: 100%; margin-bottom: 60px;">
|
|
227
|
+
|
|
228
|
+
<!-- LEFT COLUMN: Workflow Recording -->
|
|
229
|
+
<div class="recording-section" id="workflow-recording-section" style="margin: 0; padding: 0 12px 0 0; border: none; border-right: 1px solid #ccc; position: relative; box-sizing: border-box; min-width: 0; overflow-wrap: break-word; width: 100%;">
|
|
230
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px 0;">
|
|
231
|
+
<h3 style="margin: 0; font-size: 12px;">Workflow Recording</h3>
|
|
232
|
+
<a href="#" id="viewWorkflowRecordings" style="font-size: 9px; color: #2196F3; text-decoration: none;">View Past</a>
|
|
233
|
+
</div>
|
|
234
|
+
<p style="font-size: 10px; color: #666; margin: 0 0 6px 0;">
|
|
235
|
+
Record user interactions to create replayable workflows
|
|
236
|
+
</p>
|
|
266
237
|
|
|
267
238
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
268
239
|
<!--
|
|
@@ -272,65 +243,70 @@
|
|
|
272
243
|
</div>
|
|
273
244
|
-->
|
|
274
245
|
|
|
275
|
-
<!--
|
|
276
|
-
<div
|
|
277
|
-
<
|
|
278
|
-
<
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
<
|
|
286
|
-
<
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
246
|
+
<!-- Recording Settings -->
|
|
247
|
+
<div class="recording-settings" style="background: #f9f9f9; padding: 6px; border-radius: 3px; margin-bottom: 6px;">
|
|
248
|
+
<details>
|
|
249
|
+
<summary style="cursor: pointer; font-size: 10px; font-weight: bold; color: #333;">Recording Settings</summary>
|
|
250
|
+
<div style="margin-top: 4px;">
|
|
251
|
+
<label style="font-size: 9px; display: flex; align-items: center; cursor: pointer; margin-bottom: 4px;">
|
|
252
|
+
<input type="checkbox" id="enableScreenshotsCheckbox" checked style="margin-right: 4px;">
|
|
253
|
+
Screenshots
|
|
254
|
+
</label>
|
|
255
|
+
|
|
256
|
+
<div id="screenshotSettings" style="display: none; margin-left: 12px;">
|
|
257
|
+
<div style="margin-bottom: 3px;">
|
|
258
|
+
<label style="font-size: 8px;">Format: </label>
|
|
259
|
+
<select id="screenshotFormat" style="font-size: 8px; padding: 1px;">
|
|
260
|
+
<option value="jpeg">JPEG</option>
|
|
261
|
+
<option value="png">PNG</option>
|
|
262
|
+
</select>
|
|
263
|
+
</div>
|
|
264
|
+
<div style="margin-bottom: 3px;">
|
|
265
|
+
<label style="font-size: 8px;">Quality: </label>
|
|
266
|
+
<input type="range" id="screenshotQuality" min="10" max="100" value="30" style="width: 50px;">
|
|
267
|
+
<span id="qualityValue" style="font-size: 8px;">30</span>
|
|
268
|
+
</div>
|
|
269
|
+
<div>
|
|
270
|
+
<label style="font-size: 8px;">Max Width: </label>
|
|
271
|
+
<input type="number" id="screenshotMaxWidth" placeholder="800" style="width: 40px; font-size: 8px; padding: 1px;">
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<label style="font-size: 9px; display: flex; align-items: center; cursor: pointer; margin-top: 4px;">
|
|
276
|
+
<input type="checkbox" id="includeLogsCheckbox" style="margin-right: 4px;">
|
|
277
|
+
Logs
|
|
278
|
+
</label>
|
|
298
279
|
</div>
|
|
299
|
-
</
|
|
300
|
-
</div>
|
|
301
|
-
|
|
302
|
-
<div style="margin-bottom: 10px;">
|
|
303
|
-
<label style="font-size: 13px; display: flex; align-items: center; cursor: pointer;">
|
|
304
|
-
<input type="checkbox" id="includeLogsCheckbox" style="margin-right: 8px;">
|
|
305
|
-
Include console logs and errors in export
|
|
306
|
-
</label>
|
|
280
|
+
</details>
|
|
307
281
|
</div>
|
|
308
|
-
<button class="record-btn" id="workflowRecordBtn" style="background: #9c27b0; position: relative;">
|
|
282
|
+
<button class="record-btn" id="workflowRecordBtn" style="background: #9c27b0; position: relative; padding: 8px; font-size: 11px;">
|
|
309
283
|
Start Workflow Recording
|
|
310
284
|
<span id="workflowProBadge" style="position: absolute; top: -8px; right: -8px; background: #ff6b6b; color: white; font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: bold; display: none;">PRO</span>
|
|
311
285
|
</button>
|
|
312
|
-
<button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top:
|
|
313
|
-
<div class="recording-status" id="workflowRecordingStatus"></div>
|
|
286
|
+
<button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">📍 Save Point</button>
|
|
287
|
+
<div class="recording-status" id="workflowRecordingStatus" style="font-size: 10px;"></div>
|
|
314
288
|
|
|
315
|
-
<div class="recordings-list" id="workflowRecordingsList" style="margin-top:
|
|
316
|
-
<h4 style="margin: 0 0
|
|
317
|
-
<div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding:
|
|
289
|
+
<div class="recordings-list" id="workflowRecordingsList" style="margin-top: 10px; display: none;">
|
|
290
|
+
<h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Workflow Recordings:</h4>
|
|
291
|
+
<div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
|
|
318
292
|
</div>
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
</div>
|
|
325
|
-
|
|
326
|
-
<div class="recording-section" id="screen-recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; position: relative;">
|
|
327
|
-
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0;">
|
|
328
|
-
<h3 style="margin: 0; font-size: 16px;">Screen Recording</h3>
|
|
329
|
-
<a href="#" id="viewScreenRecordings" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Recordings</a>
|
|
293
|
+
|
|
294
|
+
<div class="restore-points-list" id="restorePointsList" style="margin-top: 10px; display: none;">
|
|
295
|
+
<h4 style="margin: 0 0 6px 0; font-size: 10px;">Restore Points:</h4>
|
|
296
|
+
<div id="restorePointsContainer"></div>
|
|
297
|
+
</div>
|
|
330
298
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
299
|
+
<!-- End Workflow Recording Section -->
|
|
300
|
+
|
|
301
|
+
<!-- RIGHT COLUMN: Screen Recording -->
|
|
302
|
+
<div class="recording-section" id="screen-recording-section" style="margin: 0; padding: 0 0 0 12px; border: none; position: relative; box-sizing: border-box; min-width: 0; overflow-wrap: break-word; width: 100%;">
|
|
303
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px 0;">
|
|
304
|
+
<h3 style="margin: 0; font-size: 12px;">Screen Recording</h3>
|
|
305
|
+
<a href="#" id="viewScreenRecordings" style="font-size: 9px; color: #2196F3; text-decoration: none;">View Past</a>
|
|
306
|
+
</div>
|
|
307
|
+
<p style="font-size: 10px; color: #666; margin: 0 0 6px 0;">
|
|
308
|
+
Record your screen with console logs to help explain issues
|
|
309
|
+
</p>
|
|
334
310
|
|
|
335
311
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
336
312
|
<!--
|
|
@@ -341,52 +317,109 @@
|
|
|
341
317
|
-->
|
|
342
318
|
|
|
343
319
|
<!-- Recording Settings -->
|
|
344
|
-
<div class="recording-settings" style="background: #f9f9f9; padding:
|
|
320
|
+
<div class="recording-settings" style="background: #f9f9f9; padding: 6px; border-radius: 3px; margin-bottom: 6px;">
|
|
345
321
|
<details>
|
|
346
|
-
<summary style="cursor: pointer; font-size:
|
|
347
|
-
<div style="margin-top:
|
|
348
|
-
<div style="margin-bottom:
|
|
349
|
-
<label for="frameRate" style="font-size:
|
|
350
|
-
<select id="frameRate" style="width: 100%; padding:
|
|
351
|
-
<option value="0.5">0.5s
|
|
352
|
-
<option value="1" selected>1s
|
|
353
|
-
<option value="2">2s
|
|
354
|
-
<option value="3">3s
|
|
355
|
-
<option value="5">5s
|
|
322
|
+
<summary style="cursor: pointer; font-size: 10px; font-weight: bold; color: #333;">Recording Settings</summary>
|
|
323
|
+
<div style="margin-top: 4px;">
|
|
324
|
+
<div style="margin-bottom: 4px;">
|
|
325
|
+
<label for="frameRate" style="font-size: 9px; color: #666; display: block;">Frame Rate:</label>
|
|
326
|
+
<select id="frameRate" style="width: 100%; padding: 2px; font-size: 9px;">
|
|
327
|
+
<option value="0.5">0.5s</option>
|
|
328
|
+
<option value="1" selected>1s</option>
|
|
329
|
+
<option value="2">2s</option>
|
|
330
|
+
<option value="3">3s</option>
|
|
331
|
+
<option value="5">5s</option>
|
|
356
332
|
</select>
|
|
357
333
|
</div>
|
|
358
|
-
<div style="margin-bottom:
|
|
359
|
-
<label for="imageQuality" style="font-size:
|
|
360
|
-
<select id="imageQuality" style="width: 100%; padding:
|
|
361
|
-
<option value="10">10
|
|
362
|
-
<option value="20">20
|
|
363
|
-
<option value="30" selected>30
|
|
364
|
-
<option value="50">50
|
|
365
|
-
<option value="70">70
|
|
334
|
+
<div style="margin-bottom: 4px;">
|
|
335
|
+
<label for="imageQuality" style="font-size: 9px; color: #666; display: block;">Quality:</label>
|
|
336
|
+
<select id="imageQuality" style="width: 100%; padding: 2px; font-size: 9px;">
|
|
337
|
+
<option value="10">10%</option>
|
|
338
|
+
<option value="20">20%</option>
|
|
339
|
+
<option value="30" selected>30%</option>
|
|
340
|
+
<option value="50">50%</option>
|
|
341
|
+
<option value="70">70%</option>
|
|
366
342
|
</select>
|
|
367
343
|
</div>
|
|
368
|
-
<div style="margin-bottom:
|
|
369
|
-
<label style="font-size:
|
|
370
|
-
<input type="checkbox" id="frameFlash"> Flash
|
|
344
|
+
<div style="margin-bottom: 4px;">
|
|
345
|
+
<label style="font-size: 9px; color: #666; display: block;">
|
|
346
|
+
<input type="checkbox" id="frameFlash"> Flash
|
|
371
347
|
</label>
|
|
372
348
|
</div>
|
|
373
349
|
</div>
|
|
374
350
|
</details>
|
|
375
351
|
</div>
|
|
376
|
-
|
|
377
|
-
<button class="record-btn" id="recordBtn">Start Recording</button>
|
|
378
|
-
<button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top:
|
|
379
|
-
<div class="recording-status" id="recordingStatus"></div>
|
|
352
|
+
|
|
353
|
+
<button class="record-btn" id="recordBtn" style="padding: 8px; font-size: 11px;">Start Recording</button>
|
|
354
|
+
<button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">Manual Snapshot</button>
|
|
355
|
+
<div class="recording-status" id="recordingStatus" style="font-size: 10px;"></div>
|
|
380
356
|
<div class="countdown-display" id="countdownDisplay" style="display: none; text-align: center; margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 4px;">
|
|
381
357
|
<div style="font-size: 12px; color: #666; margin-bottom: 5px;">Next snapshot in:</div>
|
|
382
358
|
<div class="countdown-timer" style="font-size: 24px; font-weight: bold; color: #f44336; font-family: monospace;" id="countdownTimer">0</div>
|
|
383
359
|
</div>
|
|
384
360
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
361
|
+
<div class="recordings-list" id="recordingsList" style="margin-top: 10px; display: none;">
|
|
362
|
+
<h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Recordings:</h4>
|
|
363
|
+
<div id="recordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<!-- End Right Column: Screen Recording -->
|
|
367
|
+
|
|
368
|
+
</div>
|
|
369
|
+
<!-- End 2-column layout grid -->
|
|
370
|
+
|
|
371
|
+
<!-- Fixed Footer with Poll, Site, and Click Controls -->
|
|
372
|
+
<div style="position: fixed; bottom: 0; left: 0; right: 0; background: #f5f5f5; border-top: 2px solid #ddd; padding: 8px 12px; display: flex; align-items: center; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); z-index: 1000;">
|
|
373
|
+
|
|
374
|
+
<!-- Poll Control -->
|
|
375
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding-right: 12px; border-right: 1px solid #ccc;">
|
|
376
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
377
|
+
<strong style="font-size: 11px; color: #333;">Poll:</strong>
|
|
378
|
+
<span class="info-icon" style="font-size: 11px; cursor: help;" title="Automatically check server connection every 3 seconds">ℹ️</span>
|
|
379
|
+
</div>
|
|
380
|
+
<label style="display: flex; align-items: center; cursor: pointer; font-size: 10px;">
|
|
381
|
+
<input type="checkbox" id="pollContinuouslyCheckbox" checked style="margin-right: 4px; cursor: pointer;">
|
|
382
|
+
<span>Auto-check (3s)</span>
|
|
383
|
+
</label>
|
|
384
|
+
<button id="retryConnectionBtn" style="display: none; padding: 4px 8px; font-size: 9px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
|
385
|
+
Retry
|
|
386
|
+
</button>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<!-- Site Control -->
|
|
390
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 0 12px; border-right: 1px solid #ccc;">
|
|
391
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
392
|
+
<strong style="font-size: 11px; color: #333;">Site:</strong>
|
|
393
|
+
<span class="info-icon" style="font-size: 11px; cursor: help;" title="Control which sites can use this extension. Manage whitelist/blacklist.">ℹ️</span>
|
|
394
|
+
<a href="/options.html" target="_blank" style="font-size: 9px; color: #2196F3; text-decoration: none; margin-left: auto;">Settings</a>
|
|
395
|
+
</div>
|
|
396
|
+
<div id="siteStatus" style="font-size: 9px;">
|
|
397
|
+
<span id="siteStatusIcon">⏳</span> <span id="siteStatusText">Checking...</span>
|
|
398
|
+
</div>
|
|
399
|
+
<div style="display: flex; gap: 4px;">
|
|
400
|
+
<button id="toggleSiteBtn" class="site-toggle-btn" style="flex: 1; padding: 4px 6px; font-size: 9px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer;" disabled>
|
|
401
|
+
Loading...
|
|
402
|
+
</button>
|
|
403
|
+
<button id="addSiteBtn" class="site-toggle-btn" style="flex: 1; padding: 4px 6px; font-size: 9px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer;" disabled>
|
|
404
|
+
Add Site
|
|
405
|
+
</button>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<!-- Click Control -->
|
|
410
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding-left: 12px;">
|
|
411
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
412
|
+
<strong style="font-size: 11px; color: #333;">Click:</strong>
|
|
413
|
+
<span class="info-icon" style="font-size: 11px; cursor: help;" title="Enhanced capture: Records detailed element information (HTML, handlers, state) when recording clicks. May impact performance.">ℹ️</span>
|
|
414
|
+
</div>
|
|
415
|
+
<label style="font-size: 10px; display: flex; align-items: center; cursor: pointer;">
|
|
416
|
+
<input type="checkbox" id="enhancedCaptureCheckbox" style="margin-right: 4px;">
|
|
417
|
+
<span>Enhanced capture</span>
|
|
418
|
+
</label>
|
|
388
419
|
</div>
|
|
389
420
|
|
|
421
|
+
</div>
|
|
422
|
+
|
|
390
423
|
<!--
|
|
391
424
|
SNAPSHOT FEATURE DISABLED (2025-10-01)
|
|
392
425
|
|
|
@@ -466,13 +499,16 @@
|
|
|
466
499
|
<style>
|
|
467
500
|
.recording-item {
|
|
468
501
|
background: #f5f5f5;
|
|
469
|
-
padding:
|
|
470
|
-
margin-bottom:
|
|
471
|
-
border-radius:
|
|
472
|
-
font-size:
|
|
502
|
+
padding: 6px;
|
|
503
|
+
margin-bottom: 6px;
|
|
504
|
+
border-radius: 3px;
|
|
505
|
+
font-size: 10px;
|
|
473
506
|
display: flex;
|
|
474
507
|
flex-direction: column;
|
|
475
|
-
gap:
|
|
508
|
+
gap: 4px;
|
|
509
|
+
max-width: 100%;
|
|
510
|
+
overflow: hidden;
|
|
511
|
+
word-break: break-word;
|
|
476
512
|
}
|
|
477
513
|
|
|
478
514
|
.recording-info {
|
|
@@ -496,17 +532,18 @@
|
|
|
496
532
|
|
|
497
533
|
.recording-buttons {
|
|
498
534
|
display: flex;
|
|
499
|
-
gap:
|
|
535
|
+
gap: 3px;
|
|
500
536
|
flex-wrap: wrap;
|
|
537
|
+
max-width: 100%;
|
|
501
538
|
}
|
|
502
539
|
|
|
503
540
|
.copy-id-btn, .copy-prompt-btn, .view-btn, .edit-btn, .delete-btn {
|
|
504
|
-
padding: 4px
|
|
541
|
+
padding: 3px 4px;
|
|
505
542
|
background: #fff;
|
|
506
543
|
border: 1px solid #ddd;
|
|
507
|
-
border-radius:
|
|
544
|
+
border-radius: 2px;
|
|
508
545
|
cursor: pointer;
|
|
509
|
-
font-size:
|
|
546
|
+
font-size: 8px;
|
|
510
547
|
transition: all 0.2s;
|
|
511
548
|
flex: 1;
|
|
512
549
|
min-width: 0;
|