@dynamicu/chromedebug-mcp 2.6.7 → 2.7.0
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 +1 -1
- package/README.md +1 -1
- package/chrome-extension/background.js +611 -505
- package/chrome-extension/browser-recording-manager.js +1 -1
- package/chrome-extension/chrome-debug-logger.js +168 -0
- package/chrome-extension/console-interception-library.js +430 -0
- package/chrome-extension/content.css +16 -16
- package/chrome-extension/content.js +458 -126
- package/chrome-extension/extension-config.js +1 -1
- package/chrome-extension/license-helper.js +26 -0
- package/chrome-extension/manifest.free.json +0 -3
- package/chrome-extension/options.js +1 -1
- package/chrome-extension/popup.html +221 -191
- package/chrome-extension/popup.js +88 -379
- package/chrome-extension/pro/enhanced-capture.js +406 -0
- package/chrome-extension/pro/frame-editor.html +410 -0
- package/chrome-extension/pro/frame-editor.js +1496 -0
- package/chrome-extension/pro/function-tracker.js +843 -0
- package/chrome-extension/pro/jszip.min.js +13 -0
- 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 +2 -2
- 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
|
@@ -12,12 +12,27 @@ const LicenseHelper = {
|
|
|
12
12
|
instanceIdKey: 'chromedebug_instance_id',
|
|
13
13
|
userIdKey: 'chromedebug_user_id',
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Check if this is the PRO version by checking the manifest
|
|
17
|
+
* @returns {boolean} True if PRO version
|
|
18
|
+
*/
|
|
19
|
+
isProVersion() {
|
|
20
|
+
const manifest = chrome.runtime.getManifest();
|
|
21
|
+
return manifest.name.includes('PRO');
|
|
22
|
+
},
|
|
23
|
+
|
|
15
24
|
/**
|
|
16
25
|
* Check if user can start a recording (license + usage limit check)
|
|
17
26
|
* @returns {Promise<{allowed: boolean, message?: string, tier?: string}>}
|
|
18
27
|
*/
|
|
19
28
|
async checkLicenseBeforeRecording() {
|
|
20
29
|
try {
|
|
30
|
+
// PRO version: always allow, no restrictions
|
|
31
|
+
if (this.isProVersion()) {
|
|
32
|
+
console.log('[License] PRO version - bypassing all license checks');
|
|
33
|
+
return {allowed: true, tier: 'pro', proVersion: true};
|
|
34
|
+
}
|
|
35
|
+
|
|
21
36
|
// Get userId
|
|
22
37
|
const stored = await chrome.storage.local.get(this.userIdKey);
|
|
23
38
|
let userId = stored[this.userIdKey];
|
|
@@ -70,6 +85,12 @@ const LicenseHelper = {
|
|
|
70
85
|
*/
|
|
71
86
|
async trackUsageAfterRecording(userId) {
|
|
72
87
|
try {
|
|
88
|
+
// PRO version: skip all usage tracking
|
|
89
|
+
if (this.isProVersion()) {
|
|
90
|
+
console.log('[License] PRO version - skipping usage tracking');
|
|
91
|
+
return {success: true, tier: 'pro', proVersion: true, skipped: true};
|
|
92
|
+
}
|
|
93
|
+
|
|
73
94
|
if (!userId) {
|
|
74
95
|
const stored = await chrome.storage.local.get(this.userIdKey);
|
|
75
96
|
userId = stored[this.userIdKey];
|
|
@@ -155,6 +176,11 @@ const LicenseHelper = {
|
|
|
155
176
|
* @returns {Promise<{valid: boolean, tier?: string}>}
|
|
156
177
|
*/
|
|
157
178
|
async getCachedLicenseStatus() {
|
|
179
|
+
// PRO version: always return pro tier
|
|
180
|
+
if (this.isProVersion()) {
|
|
181
|
+
return {valid: true, tier: 'pro', proVersion: true};
|
|
182
|
+
}
|
|
183
|
+
|
|
158
184
|
const result = await chrome.storage.local.get(this.cacheKey);
|
|
159
185
|
const cached = result[this.cacheKey];
|
|
160
186
|
|
|
@@ -217,7 +217,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
217
217
|
|
|
218
218
|
const a = document.createElement('a');
|
|
219
219
|
a.href = url;
|
|
220
|
-
a.download = 'chrome-
|
|
220
|
+
a.download = 'chrome-debug-site-settings.json';
|
|
221
221
|
a.click();
|
|
222
222
|
|
|
223
223
|
URL.revokeObjectURL(url);
|
|
@@ -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 {
|
|
@@ -153,116 +155,78 @@
|
|
|
153
155
|
</head>
|
|
154
156
|
<body>
|
|
155
157
|
<div style="position: absolute; top: 5px; right: 5px; font-size: 10px; color: #999; font-family: monospace;">v2.1.2</div>
|
|
156
|
-
<h2>Chrome Debug Assistant</h2>
|
|
157
|
-
|
|
158
|
-
<!-- License Section -->
|
|
159
|
-
<div id="license-section" style="padding: 10px; border-bottom: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; margin-bottom: 15px;">
|
|
160
|
-
<h3 style="margin: 0 0 10px 0; font-size: 14px; color: #333;">License Status</h3>
|
|
161
|
-
|
|
162
|
-
<!-- Free Tier Display -->
|
|
163
|
-
<div id="free-tier-status" style="display: none;">
|
|
164
|
-
<p style="font-size: 13px; margin: 5px 0; color: #666;">
|
|
165
|
-
Free Plan: <span id="usage-count" style="font-weight: bold;">0</span>/<span id="usage-limit" style="font-weight: bold;">5</span> recordings today
|
|
166
|
-
</p>
|
|
167
|
-
<button id="upgrade-btn" style="background: #ff6b6b; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; width: 100%; margin-top: 5px;">
|
|
168
|
-
Upgrade to Pro - $7.99/month
|
|
169
|
-
</button>
|
|
170
|
-
</div>
|
|
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
158
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<div
|
|
192
|
-
<div style="font-size:
|
|
193
|
-
|
|
194
|
-
|
|
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 -->
|
|
159
|
+
<!-- Header with Title and Server Status -->
|
|
160
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0;">
|
|
161
|
+
<h2 style="margin: 0; flex: 0 0 auto;">Chrome Debug Assistant</h2>
|
|
162
|
+
<div style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 15px;">
|
|
163
|
+
<div style="font-size: 10px;">
|
|
164
|
+
<span class="server-status disconnected" id="serverStatus"></span>
|
|
165
|
+
<span id="statusText">Checking...</span>
|
|
200
166
|
</div>
|
|
167
|
+
<a href="https://github.com/dynamicupgrade/ChromeDebug" target="_blank" style="font-size: 10px; color: #2196F3; text-decoration: none;">📚 Documentation</a>
|
|
201
168
|
</div>
|
|
169
|
+
<div style="flex: 0 0 auto; width: 200px;"></div>
|
|
202
170
|
</div>
|
|
203
171
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
172
|
+
<!-- License Section (Outside Grid, Hidden for PRO) -->
|
|
173
|
+
<div id="license-section" style="padding: 8px; border: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; margin-bottom: 15px;">
|
|
174
|
+
<h3 style="margin: 0 0 6px 0; font-size: 12px; color: #333;">License Status</h3>
|
|
175
|
+
|
|
176
|
+
<!-- Free Tier Display -->
|
|
177
|
+
<div id="free-tier-status" style="display: none;">
|
|
178
|
+
<p style="font-size: 10px; margin: 3px 0; color: #666;">
|
|
179
|
+
<span id="usage-count" style="font-weight: bold;">0</span>/<span id="usage-limit" style="font-weight: bold;">5</span> today
|
|
180
|
+
</p>
|
|
181
|
+
<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;">
|
|
182
|
+
Upgrade Pro
|
|
183
|
+
</button>
|
|
184
|
+
</div>
|
|
208
185
|
|
|
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>
|
|
186
|
+
<!-- Pro Tier Display -->
|
|
187
|
+
<div id="pro-tier-status" style="display: none;">
|
|
188
|
+
<p style="font-size: 10px; margin: 3px 0; color: #4caf50; font-weight: 500;">
|
|
189
|
+
Pro Active
|
|
190
|
+
</p>
|
|
191
|
+
</div>
|
|
220
192
|
|
|
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>
|
|
193
|
+
<!-- License Activation -->
|
|
194
|
+
<div id="license-activation" style="margin-top: 6px;">
|
|
195
|
+
<input type="text" id="license-key-input" placeholder="License key"
|
|
196
|
+
style="width: 100%; padding: 4px; font-size: 10px; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 4px; box-sizing: border-box;">
|
|
197
|
+
<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%;">
|
|
198
|
+
Activate
|
|
199
|
+
</button>
|
|
200
|
+
</div>
|
|
243
201
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
202
|
+
<div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
|
|
203
|
+
|
|
204
|
+
<!-- Inline Activation Manager (shown when activation limit reached) -->
|
|
205
|
+
<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;">
|
|
206
|
+
<div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 10px;">
|
|
207
|
+
⚠️ Activation Limit Reached
|
|
208
|
+
</div>
|
|
209
|
+
<div style="font-size: 12px; color: #856404; margin-bottom: 12px;">
|
|
210
|
+
Please deactivate an existing activation to continue
|
|
211
|
+
</div>
|
|
212
|
+
<div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
|
|
213
|
+
<!-- Activations will be loaded here dynamically -->
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
256
216
|
</div>
|
|
257
217
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
218
|
+
<!-- 2-Column Layout for Recordings -->
|
|
219
|
+
<div style="display: grid; grid-template-columns: 50% 50%; gap: 6px; box-sizing: border-box; overflow: hidden; max-width: 100%; margin-bottom: 60px;">
|
|
220
|
+
|
|
221
|
+
<!-- LEFT COLUMN: Workflow Recording -->
|
|
222
|
+
<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%;">
|
|
223
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px 0;">
|
|
224
|
+
<h3 style="margin: 0; font-size: 12px;">Workflow Recording</h3>
|
|
225
|
+
<a href="#" id="viewWorkflowRecordings" style="font-size: 9px; color: #2196F3; text-decoration: none;">View Past</a>
|
|
226
|
+
</div>
|
|
227
|
+
<p style="font-size: 10px; color: #666; margin: 0 0 6px 0;">
|
|
228
|
+
Record user interactions to create replayable workflows
|
|
229
|
+
</p>
|
|
266
230
|
|
|
267
231
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
268
232
|
<!--
|
|
@@ -272,65 +236,70 @@
|
|
|
272
236
|
</div>
|
|
273
237
|
-->
|
|
274
238
|
|
|
275
|
-
<!--
|
|
276
|
-
<div
|
|
277
|
-
<
|
|
278
|
-
<
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
<
|
|
286
|
-
<
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
239
|
+
<!-- Recording Settings -->
|
|
240
|
+
<div class="recording-settings" style="background: #f9f9f9; padding: 6px; border-radius: 3px; margin-bottom: 6px;">
|
|
241
|
+
<details>
|
|
242
|
+
<summary style="cursor: pointer; font-size: 10px; font-weight: bold; color: #333;">Recording Settings</summary>
|
|
243
|
+
<div style="margin-top: 4px;">
|
|
244
|
+
<label style="font-size: 9px; display: flex; align-items: center; cursor: pointer; margin-bottom: 4px;">
|
|
245
|
+
<input type="checkbox" id="enableScreenshotsCheckbox" checked style="margin-right: 4px;">
|
|
246
|
+
Screenshots
|
|
247
|
+
</label>
|
|
248
|
+
|
|
249
|
+
<div id="screenshotSettings" style="display: none; margin-left: 12px;">
|
|
250
|
+
<div style="margin-bottom: 3px;">
|
|
251
|
+
<label style="font-size: 8px;">Format: </label>
|
|
252
|
+
<select id="screenshotFormat" style="font-size: 8px; padding: 1px;">
|
|
253
|
+
<option value="jpeg">JPEG</option>
|
|
254
|
+
<option value="png">PNG</option>
|
|
255
|
+
</select>
|
|
256
|
+
</div>
|
|
257
|
+
<div style="margin-bottom: 3px;">
|
|
258
|
+
<label style="font-size: 8px;">Quality: </label>
|
|
259
|
+
<input type="range" id="screenshotQuality" min="10" max="100" value="30" style="width: 50px;">
|
|
260
|
+
<span id="qualityValue" style="font-size: 8px;">30</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div>
|
|
263
|
+
<label style="font-size: 8px;">Max Width: </label>
|
|
264
|
+
<input type="number" id="screenshotMaxWidth" placeholder="800" style="width: 40px; font-size: 8px; padding: 1px;">
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
<label style="font-size: 9px; display: flex; align-items: center; cursor: pointer; margin-top: 4px;">
|
|
269
|
+
<input type="checkbox" id="includeLogsCheckbox" style="margin-right: 4px;">
|
|
270
|
+
Logs
|
|
271
|
+
</label>
|
|
298
272
|
</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>
|
|
273
|
+
</details>
|
|
307
274
|
</div>
|
|
308
|
-
<button class="record-btn" id="workflowRecordBtn" style="background: #9c27b0; position: relative;">
|
|
275
|
+
<button class="record-btn" id="workflowRecordBtn" style="background: #9c27b0; position: relative; padding: 8px; font-size: 11px;">
|
|
309
276
|
Start Workflow Recording
|
|
310
277
|
<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
278
|
</button>
|
|
312
|
-
<button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top:
|
|
313
|
-
<div class="recording-status" id="workflowRecordingStatus"></div>
|
|
279
|
+
<button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">📍 Save Point</button>
|
|
280
|
+
<div class="recording-status" id="workflowRecordingStatus" style="font-size: 10px;"></div>
|
|
314
281
|
|
|
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:
|
|
282
|
+
<div class="recordings-list" id="workflowRecordingsList" style="margin-top: 10px; display: none;">
|
|
283
|
+
<h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Workflow Recordings:</h4>
|
|
284
|
+
<div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
|
|
318
285
|
</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>
|
|
286
|
+
|
|
287
|
+
<div class="restore-points-list" id="restorePointsList" style="margin-top: 10px; display: none;">
|
|
288
|
+
<h4 style="margin: 0 0 6px 0; font-size: 10px;">Restore Points:</h4>
|
|
289
|
+
<div id="restorePointsContainer"></div>
|
|
290
|
+
</div>
|
|
330
291
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
292
|
+
<!-- End Workflow Recording Section -->
|
|
293
|
+
|
|
294
|
+
<!-- RIGHT COLUMN: Screen Recording -->
|
|
295
|
+
<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%;">
|
|
296
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px 0;">
|
|
297
|
+
<h3 style="margin: 0; font-size: 12px;">Screen Recording</h3>
|
|
298
|
+
<a href="#" id="viewScreenRecordings" style="font-size: 9px; color: #2196F3; text-decoration: none;">View Past</a>
|
|
299
|
+
</div>
|
|
300
|
+
<p style="font-size: 10px; color: #666; margin: 0 0 6px 0;">
|
|
301
|
+
Record your screen with console logs to help explain issues
|
|
302
|
+
</p>
|
|
334
303
|
|
|
335
304
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
336
305
|
<!--
|
|
@@ -341,52 +310,109 @@
|
|
|
341
310
|
-->
|
|
342
311
|
|
|
343
312
|
<!-- Recording Settings -->
|
|
344
|
-
<div class="recording-settings" style="background: #f9f9f9; padding:
|
|
313
|
+
<div class="recording-settings" style="background: #f9f9f9; padding: 6px; border-radius: 3px; margin-bottom: 6px;">
|
|
345
314
|
<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
|
|
315
|
+
<summary style="cursor: pointer; font-size: 10px; font-weight: bold; color: #333;">Recording Settings</summary>
|
|
316
|
+
<div style="margin-top: 4px;">
|
|
317
|
+
<div style="margin-bottom: 4px;">
|
|
318
|
+
<label for="frameRate" style="font-size: 9px; color: #666; display: block;">Frame Rate:</label>
|
|
319
|
+
<select id="frameRate" style="width: 100%; padding: 2px; font-size: 9px;">
|
|
320
|
+
<option value="0.5">0.5s</option>
|
|
321
|
+
<option value="1" selected>1s</option>
|
|
322
|
+
<option value="2">2s</option>
|
|
323
|
+
<option value="3">3s</option>
|
|
324
|
+
<option value="5">5s</option>
|
|
356
325
|
</select>
|
|
357
326
|
</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
|
|
327
|
+
<div style="margin-bottom: 4px;">
|
|
328
|
+
<label for="imageQuality" style="font-size: 9px; color: #666; display: block;">Quality:</label>
|
|
329
|
+
<select id="imageQuality" style="width: 100%; padding: 2px; font-size: 9px;">
|
|
330
|
+
<option value="10">10%</option>
|
|
331
|
+
<option value="20">20%</option>
|
|
332
|
+
<option value="30" selected>30%</option>
|
|
333
|
+
<option value="50">50%</option>
|
|
334
|
+
<option value="70">70%</option>
|
|
366
335
|
</select>
|
|
367
336
|
</div>
|
|
368
|
-
<div style="margin-bottom:
|
|
369
|
-
<label style="font-size:
|
|
370
|
-
<input type="checkbox" id="frameFlash"> Flash
|
|
337
|
+
<div style="margin-bottom: 4px;">
|
|
338
|
+
<label style="font-size: 9px; color: #666; display: block;">
|
|
339
|
+
<input type="checkbox" id="frameFlash"> Flash
|
|
371
340
|
</label>
|
|
372
341
|
</div>
|
|
373
342
|
</div>
|
|
374
343
|
</details>
|
|
375
344
|
</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>
|
|
345
|
+
|
|
346
|
+
<button class="record-btn" id="recordBtn" style="padding: 8px; font-size: 11px;">Start Recording</button>
|
|
347
|
+
<button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">Manual Snapshot</button>
|
|
348
|
+
<div class="recording-status" id="recordingStatus" style="font-size: 10px;"></div>
|
|
380
349
|
<div class="countdown-display" id="countdownDisplay" style="display: none; text-align: center; margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 4px;">
|
|
381
350
|
<div style="font-size: 12px; color: #666; margin-bottom: 5px;">Next snapshot in:</div>
|
|
382
351
|
<div class="countdown-timer" style="font-size: 24px; font-weight: bold; color: #f44336; font-family: monospace;" id="countdownTimer">0</div>
|
|
383
352
|
</div>
|
|
384
353
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
354
|
+
<div class="recordings-list" id="recordingsList" style="margin-top: 10px; display: none;">
|
|
355
|
+
<h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Recordings:</h4>
|
|
356
|
+
<div id="recordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
<!-- End Right Column: Screen Recording -->
|
|
360
|
+
|
|
361
|
+
</div>
|
|
362
|
+
<!-- End 2-column layout grid -->
|
|
363
|
+
|
|
364
|
+
<!-- Fixed Footer with Poll, Site, and Click Controls -->
|
|
365
|
+
<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;">
|
|
366
|
+
|
|
367
|
+
<!-- Poll Control -->
|
|
368
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding-right: 12px; border-right: 1px solid #ccc;">
|
|
369
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
370
|
+
<strong style="font-size: 11px; color: #333;">Poll:</strong>
|
|
371
|
+
<span class="info-icon" style="font-size: 11px; cursor: help;" title="Automatically check server connection every 3 seconds">ℹ️</span>
|
|
372
|
+
</div>
|
|
373
|
+
<label style="display: flex; align-items: center; cursor: pointer; font-size: 10px;">
|
|
374
|
+
<input type="checkbox" id="pollContinuouslyCheckbox" checked style="margin-right: 4px; cursor: pointer;">
|
|
375
|
+
<span>Auto-check (3s)</span>
|
|
376
|
+
</label>
|
|
377
|
+
<button id="retryConnectionBtn" style="display: none; padding: 4px 8px; font-size: 9px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">
|
|
378
|
+
Retry
|
|
379
|
+
</button>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<!-- Site Control -->
|
|
383
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 0 12px; border-right: 1px solid #ccc;">
|
|
384
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
385
|
+
<strong style="font-size: 11px; color: #333;">Site:</strong>
|
|
386
|
+
<span class="info-icon" style="font-size: 11px; cursor: help;" title="Control which sites can use this extension. Manage whitelist/blacklist.">ℹ️</span>
|
|
387
|
+
<a href="/options.html" target="_blank" style="font-size: 9px; color: #2196F3; text-decoration: none; margin-left: auto;">Settings</a>
|
|
388
|
+
</div>
|
|
389
|
+
<div id="siteStatus" style="font-size: 9px;">
|
|
390
|
+
<span id="siteStatusIcon">⏳</span> <span id="siteStatusText">Checking...</span>
|
|
391
|
+
</div>
|
|
392
|
+
<div style="display: flex; gap: 4px;">
|
|
393
|
+
<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>
|
|
394
|
+
Loading...
|
|
395
|
+
</button>
|
|
396
|
+
<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>
|
|
397
|
+
Add Site
|
|
398
|
+
</button>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
<!-- Click Control -->
|
|
403
|
+
<div style="flex: 1; display: flex; flex-direction: column; gap: 3px; padding-left: 12px;">
|
|
404
|
+
<div style="display: flex; align-items: center; gap: 4px;">
|
|
405
|
+
<strong style="font-size: 11px; color: #333;">Click:</strong>
|
|
406
|
+
<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>
|
|
407
|
+
</div>
|
|
408
|
+
<label style="font-size: 10px; display: flex; align-items: center; cursor: pointer;">
|
|
409
|
+
<input type="checkbox" id="enhancedCaptureCheckbox" style="margin-right: 4px;">
|
|
410
|
+
<span>Enhanced capture</span>
|
|
411
|
+
</label>
|
|
388
412
|
</div>
|
|
389
413
|
|
|
414
|
+
</div>
|
|
415
|
+
|
|
390
416
|
<!--
|
|
391
417
|
SNAPSHOT FEATURE DISABLED (2025-10-01)
|
|
392
418
|
|
|
@@ -466,13 +492,16 @@
|
|
|
466
492
|
<style>
|
|
467
493
|
.recording-item {
|
|
468
494
|
background: #f5f5f5;
|
|
469
|
-
padding:
|
|
470
|
-
margin-bottom:
|
|
471
|
-
border-radius:
|
|
472
|
-
font-size:
|
|
495
|
+
padding: 6px;
|
|
496
|
+
margin-bottom: 6px;
|
|
497
|
+
border-radius: 3px;
|
|
498
|
+
font-size: 10px;
|
|
473
499
|
display: flex;
|
|
474
500
|
flex-direction: column;
|
|
475
|
-
gap:
|
|
501
|
+
gap: 4px;
|
|
502
|
+
max-width: 100%;
|
|
503
|
+
overflow: hidden;
|
|
504
|
+
word-break: break-word;
|
|
476
505
|
}
|
|
477
506
|
|
|
478
507
|
.recording-info {
|
|
@@ -496,17 +525,18 @@
|
|
|
496
525
|
|
|
497
526
|
.recording-buttons {
|
|
498
527
|
display: flex;
|
|
499
|
-
gap:
|
|
528
|
+
gap: 3px;
|
|
500
529
|
flex-wrap: wrap;
|
|
530
|
+
max-width: 100%;
|
|
501
531
|
}
|
|
502
532
|
|
|
503
533
|
.copy-id-btn, .copy-prompt-btn, .view-btn, .edit-btn, .delete-btn {
|
|
504
|
-
padding: 4px
|
|
534
|
+
padding: 3px 4px;
|
|
505
535
|
background: #fff;
|
|
506
536
|
border: 1px solid #ddd;
|
|
507
|
-
border-radius:
|
|
537
|
+
border-radius: 2px;
|
|
508
538
|
cursor: pointer;
|
|
509
|
-
font-size:
|
|
539
|
+
font-size: 8px;
|
|
510
540
|
transition: all 0.2s;
|
|
511
541
|
flex: 1;
|
|
512
542
|
min-width: 0;
|