@dynamicu/chromedebug-mcp 2.6.6 → 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/activation-manager.js +18 -4
- package/chrome-extension/background.js +1044 -552
- package/chrome-extension/browser-recording-manager.js +256 -0
- 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 +617 -215
- package/chrome-extension/data-buffer.js +206 -17
- package/chrome-extension/extension-config.js +1 -1
- package/chrome-extension/frame-capture.js +52 -15
- package/chrome-extension/license-helper.js +26 -0
- package/chrome-extension/manifest.free.json +3 -6
- package/chrome-extension/options.js +1 -1
- package/chrome-extension/popup.html +315 -181
- package/chrome-extension/popup.js +673 -526
- 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/config/chromedebug-config.json +101 -0
- package/dist/chromedebug-extension-free.zip +0 -0
- package/package.json +3 -1
- package/scripts/package-pro-extension.js +1 -1
- package/scripts/webpack.config.free.cjs +11 -8
- package/scripts/webpack.config.pro.cjs +5 -0
- package/src/chrome-controller.js +7 -7
- package/src/cli.js +2 -2
- package/src/database.js +61 -9
- package/src/http-server.js +3 -2
- 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 +36 -6
- 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 {
|
|
@@ -110,7 +112,29 @@
|
|
|
110
112
|
50% { transform: scale(1.1); }
|
|
111
113
|
100% { transform: scale(1); }
|
|
112
114
|
}
|
|
113
|
-
|
|
115
|
+
|
|
116
|
+
@keyframes slideInRight {
|
|
117
|
+
from {
|
|
118
|
+
transform: translateX(100%);
|
|
119
|
+
opacity: 0;
|
|
120
|
+
}
|
|
121
|
+
to {
|
|
122
|
+
transform: translateX(0);
|
|
123
|
+
opacity: 1;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes slideOutRight {
|
|
128
|
+
from {
|
|
129
|
+
transform: translateX(0);
|
|
130
|
+
opacity: 1;
|
|
131
|
+
}
|
|
132
|
+
to {
|
|
133
|
+
transform: translateX(100%);
|
|
134
|
+
opacity: 0;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
114
138
|
.countdown-timer {
|
|
115
139
|
animation: countdown 1s ease-in-out;
|
|
116
140
|
}
|
|
@@ -131,104 +155,78 @@
|
|
|
131
155
|
</head>
|
|
132
156
|
<body>
|
|
133
157
|
<div style="position: absolute; top: 5px; right: 5px; font-size: 10px; color: #999; font-family: monospace;">v2.1.2</div>
|
|
134
|
-
<h2>Chrome Debug Assistant</h2>
|
|
135
|
-
|
|
136
|
-
<!-- License Section -->
|
|
137
|
-
<div id="license-section" style="padding: 10px; border-bottom: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; margin-bottom: 15px;">
|
|
138
|
-
<h3 style="margin: 0 0 10px 0; font-size: 14px; color: #333;">License Status</h3>
|
|
139
158
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
</
|
|
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>
|
|
166
|
+
</div>
|
|
167
|
+
<a href="https://github.com/dynamicupgrade/ChromeDebug" target="_blank" style="font-size: 10px; color: #2196F3; text-decoration: none;">📚 Documentation</a>
|
|
148
168
|
</div>
|
|
169
|
+
<div style="flex: 0 0 auto; width: 200px;"></div>
|
|
170
|
+
</div>
|
|
149
171
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
Pro License Active - Unlimited recordings
|
|
154
|
-
</p>
|
|
155
|
-
</div>
|
|
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>
|
|
156
175
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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>
|
|
165
185
|
|
|
166
|
-
|
|
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>
|
|
167
192
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
|
|
177
|
-
<!-- Activations will be loaded here dynamically -->
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</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>
|
|
181
201
|
|
|
182
|
-
|
|
183
|
-
<span class="server-status disconnected" id="serverStatus"></span>
|
|
184
|
-
<span id="statusText">Checking server...</span>
|
|
185
|
-
</div>
|
|
186
|
-
|
|
187
|
-
<div class="instructions">
|
|
188
|
-
<strong>Chrome Debug Assistant:</strong>
|
|
189
|
-
<p>Use the recording features below to capture screen recordings, workflow recordings, or debug data for your applications.</p>
|
|
190
|
-
</div>
|
|
191
|
-
|
|
192
|
-
<div class="site-restriction-section" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0;">
|
|
193
|
-
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
194
|
-
<strong style="font-size: 14px; color: #333;">Current Site Status:</strong>
|
|
195
|
-
<a href="/options.html" target="_blank" style="font-size: 12px;">Settings</a>
|
|
196
|
-
</div>
|
|
197
|
-
<div id="siteStatus" style="font-size: 13px; margin-bottom: 8px;">
|
|
198
|
-
<span id="siteStatusIcon">⏳</span> <span id="siteStatusText">Checking...</span>
|
|
199
|
-
</div>
|
|
200
|
-
<div style="display: flex; gap: 5px;">
|
|
201
|
-
<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>
|
|
202
|
-
Loading...
|
|
203
|
-
</button>
|
|
204
|
-
<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>
|
|
205
|
-
Add Site
|
|
206
|
-
</button>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
202
|
+
<div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
|
|
209
203
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
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>
|
|
222
216
|
</div>
|
|
223
217
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
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>
|
|
232
230
|
|
|
233
231
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
234
232
|
<!--
|
|
@@ -238,65 +236,70 @@
|
|
|
238
236
|
</div>
|
|
239
237
|
-->
|
|
240
238
|
|
|
241
|
-
<!--
|
|
242
|
-
<div
|
|
243
|
-
<
|
|
244
|
-
<
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
<
|
|
252
|
-
<
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
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>
|
|
264
272
|
</div>
|
|
265
|
-
</
|
|
266
|
-
</div>
|
|
267
|
-
|
|
268
|
-
<div style="margin-bottom: 10px;">
|
|
269
|
-
<label style="font-size: 13px; display: flex; align-items: center; cursor: pointer;">
|
|
270
|
-
<input type="checkbox" id="includeLogsCheckbox" style="margin-right: 8px;">
|
|
271
|
-
Include console logs and errors in export
|
|
272
|
-
</label>
|
|
273
|
+
</details>
|
|
273
274
|
</div>
|
|
274
|
-
<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;">
|
|
275
276
|
Start Workflow Recording
|
|
276
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>
|
|
277
278
|
</button>
|
|
278
|
-
<button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top:
|
|
279
|
-
<div class="recording-status" id="workflowRecordingStatus"></div>
|
|
280
|
-
|
|
281
|
-
<div class="recordings-list" id="workflowRecordingsList" style="margin-top: 15px; display: none;">
|
|
282
|
-
<h4 style="margin: 0 0 10px 0; font-size: 14px;">Saved Workflow Recordings:</h4>
|
|
283
|
-
<div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px;"></div>
|
|
284
|
-
</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>
|
|
285
281
|
|
|
286
|
-
<div class="
|
|
287
|
-
<h4 style="margin: 0 0
|
|
288
|
-
<div id="
|
|
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>
|
|
289
285
|
</div>
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
<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>
|
|
296
291
|
</div>
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
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>
|
|
300
303
|
|
|
301
304
|
<!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
|
|
302
305
|
<!--
|
|
@@ -307,52 +310,109 @@
|
|
|
307
310
|
-->
|
|
308
311
|
|
|
309
312
|
<!-- Recording Settings -->
|
|
310
|
-
<div class="recording-settings" style="background: #f9f9f9; padding:
|
|
313
|
+
<div class="recording-settings" style="background: #f9f9f9; padding: 6px; border-radius: 3px; margin-bottom: 6px;">
|
|
311
314
|
<details>
|
|
312
|
-
<summary style="cursor: pointer; font-size:
|
|
313
|
-
<div style="margin-top:
|
|
314
|
-
<div style="margin-bottom:
|
|
315
|
-
<label for="frameRate" style="font-size:
|
|
316
|
-
<select id="frameRate" style="width: 100%; padding:
|
|
317
|
-
<option value="0.5">0.5s
|
|
318
|
-
<option value="1" selected>1s
|
|
319
|
-
<option value="2">2s
|
|
320
|
-
<option value="3">3s
|
|
321
|
-
<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>
|
|
322
325
|
</select>
|
|
323
326
|
</div>
|
|
324
|
-
<div style="margin-bottom:
|
|
325
|
-
<label for="imageQuality" style="font-size:
|
|
326
|
-
<select id="imageQuality" style="width: 100%; padding:
|
|
327
|
-
<option value="10">10
|
|
328
|
-
<option value="20">20
|
|
329
|
-
<option value="30" selected>30
|
|
330
|
-
<option value="50">50
|
|
331
|
-
<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>
|
|
332
335
|
</select>
|
|
333
336
|
</div>
|
|
334
|
-
<div style="margin-bottom:
|
|
335
|
-
<label style="font-size:
|
|
336
|
-
<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
|
|
337
340
|
</label>
|
|
338
341
|
</div>
|
|
339
342
|
</div>
|
|
340
343
|
</details>
|
|
341
344
|
</div>
|
|
342
|
-
|
|
343
|
-
<button class="record-btn" id="recordBtn">Start Recording</button>
|
|
344
|
-
<button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top:
|
|
345
|
-
<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>
|
|
346
349
|
<div class="countdown-display" id="countdownDisplay" style="display: none; text-align: center; margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 4px;">
|
|
347
350
|
<div style="font-size: 12px; color: #666; margin-bottom: 5px;">Next snapshot in:</div>
|
|
348
351
|
<div class="countdown-timer" style="font-size: 24px; font-weight: bold; color: #f44336; font-family: monospace;" id="countdownTimer">0</div>
|
|
349
352
|
</div>
|
|
350
353
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
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>
|
|
354
380
|
</div>
|
|
355
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>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
</div>
|
|
415
|
+
|
|
356
416
|
<!--
|
|
357
417
|
SNAPSHOT FEATURE DISABLED (2025-10-01)
|
|
358
418
|
|
|
@@ -395,17 +455,53 @@
|
|
|
395
455
|
</div>
|
|
396
456
|
-->
|
|
397
457
|
</div>
|
|
398
|
-
|
|
458
|
+
|
|
459
|
+
<!-- Browser-Only Mode Banner (shown when no server detected) -->
|
|
460
|
+
<div id="browserOnlyBanner" style="display: none; margin-top: 20px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px;">
|
|
461
|
+
<div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 8px;">
|
|
462
|
+
⚠️ Browser-Only Mode
|
|
463
|
+
</div>
|
|
464
|
+
<div style="font-size: 12px; color: #856404; margin-bottom: 10px;">
|
|
465
|
+
No Chrome Debug server detected. Recordings are stored locally in your browser and may be lost when clearing browsing data.
|
|
466
|
+
</div>
|
|
467
|
+
<div style="font-size: 11px; color: #856404; margin-bottom: 10px;">
|
|
468
|
+
<strong>Storage Available:</strong> <span id="quotaUsage">Checking...</span>
|
|
469
|
+
</div>
|
|
470
|
+
<div style="margin-top: 10px;">
|
|
471
|
+
<button id="exportRecordingBtn" style="padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; width: 100%; margin-bottom: 5px; display: none;">
|
|
472
|
+
💾 Export Recording
|
|
473
|
+
</button>
|
|
474
|
+
<a href="https://chrome-debug.com/upgrade" target="_blank" style="display: block; padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; text-align: center; font-size: 12px; text-decoration: none;">
|
|
475
|
+
🚀 Get Full Version with Server
|
|
476
|
+
</a>
|
|
477
|
+
</div>
|
|
478
|
+
</div>
|
|
479
|
+
|
|
480
|
+
<!-- Storage Quota Meter (shown in browser-only mode) -->
|
|
481
|
+
<div id="quotaMeter" style="display: none; margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0;">
|
|
482
|
+
<div style="font-size: 13px; font-weight: 500; margin-bottom: 8px;">Browser Storage</div>
|
|
483
|
+
<div style="width: 100%; background: #e0e0e0; border-radius: 8px; height: 20px; overflow: hidden;">
|
|
484
|
+
<div id="quotaBar" style="height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s, background 0.3s;"></div>
|
|
485
|
+
</div>
|
|
486
|
+
<div style="font-size: 11px; color: #666; margin-top: 5px; display: flex; justify-content: space-between;">
|
|
487
|
+
<span id="quotaText">0% used</span>
|
|
488
|
+
<span id="quotaAvailable">0 MB available</span>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
399
492
|
<style>
|
|
400
493
|
.recording-item {
|
|
401
494
|
background: #f5f5f5;
|
|
402
|
-
padding:
|
|
403
|
-
margin-bottom:
|
|
404
|
-
border-radius:
|
|
405
|
-
font-size:
|
|
495
|
+
padding: 6px;
|
|
496
|
+
margin-bottom: 6px;
|
|
497
|
+
border-radius: 3px;
|
|
498
|
+
font-size: 10px;
|
|
406
499
|
display: flex;
|
|
407
500
|
flex-direction: column;
|
|
408
|
-
gap:
|
|
501
|
+
gap: 4px;
|
|
502
|
+
max-width: 100%;
|
|
503
|
+
overflow: hidden;
|
|
504
|
+
word-break: break-word;
|
|
409
505
|
}
|
|
410
506
|
|
|
411
507
|
.recording-info {
|
|
@@ -429,17 +525,18 @@
|
|
|
429
525
|
|
|
430
526
|
.recording-buttons {
|
|
431
527
|
display: flex;
|
|
432
|
-
gap:
|
|
528
|
+
gap: 3px;
|
|
433
529
|
flex-wrap: wrap;
|
|
530
|
+
max-width: 100%;
|
|
434
531
|
}
|
|
435
532
|
|
|
436
533
|
.copy-id-btn, .copy-prompt-btn, .view-btn, .edit-btn, .delete-btn {
|
|
437
|
-
padding: 4px
|
|
534
|
+
padding: 3px 4px;
|
|
438
535
|
background: #fff;
|
|
439
536
|
border: 1px solid #ddd;
|
|
440
|
-
border-radius:
|
|
537
|
+
border-radius: 2px;
|
|
441
538
|
cursor: pointer;
|
|
442
|
-
font-size:
|
|
539
|
+
font-size: 8px;
|
|
443
540
|
transition: all 0.2s;
|
|
444
541
|
flex: 1;
|
|
445
542
|
min-width: 0;
|
|
@@ -538,6 +635,43 @@
|
|
|
538
635
|
border-color: #f44336 !important;
|
|
539
636
|
color: #c62828;
|
|
540
637
|
}
|
|
638
|
+
|
|
639
|
+
/* Loading overlay for recording sections */
|
|
640
|
+
.recording-section-overlay {
|
|
641
|
+
position: absolute;
|
|
642
|
+
top: 0;
|
|
643
|
+
left: 0;
|
|
644
|
+
right: 0;
|
|
645
|
+
bottom: 0;
|
|
646
|
+
background: rgba(255, 255, 255, 0.95);
|
|
647
|
+
display: flex;
|
|
648
|
+
flex-direction: column;
|
|
649
|
+
align-items: center;
|
|
650
|
+
justify-content: center;
|
|
651
|
+
z-index: 1000;
|
|
652
|
+
border-radius: 8px;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.recording-section-overlay .spinner {
|
|
656
|
+
width: 40px;
|
|
657
|
+
height: 40px;
|
|
658
|
+
border: 4px solid #f3f3f3;
|
|
659
|
+
border-top: 4px solid #3498db;
|
|
660
|
+
border-radius: 50%;
|
|
661
|
+
animation: spin 1s linear infinite;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
@keyframes spin {
|
|
665
|
+
0% { transform: rotate(0deg); }
|
|
666
|
+
100% { transform: rotate(360deg); }
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
.recording-section-overlay .loading-text {
|
|
670
|
+
margin-top: 16px;
|
|
671
|
+
color: #333;
|
|
672
|
+
font-size: 14px;
|
|
673
|
+
font-weight: 500;
|
|
674
|
+
}
|
|
541
675
|
</style>
|
|
542
676
|
|
|
543
677
|
<script src="disable-react-devtools.js"></script>
|