@dynamicu/chromedebug-mcp 2.7.2 → 2.7.4
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 +18 -0
- package/README.md +226 -16
- package/chrome-extension/background.js +547 -56
- package/chrome-extension/browser-recording-manager.js +34 -0
- package/chrome-extension/content.js +438 -32
- package/chrome-extension/firebase-config.public-sw.js +1 -1
- package/chrome-extension/firebase-config.public.js +1 -1
- package/chrome-extension/frame-capture.js +31 -10
- package/chrome-extension/image-processor.js +193 -0
- package/chrome-extension/manifest.free.json +1 -1
- package/chrome-extension/popup.html +82 -4
- package/chrome-extension/popup.js +1106 -38
- package/chrome-extension/pro/frame-editor.html +259 -6
- package/chrome-extension/pro/frame-editor.js +959 -10
- package/chrome-extension/pro/video-exporter.js +917 -0
- package/chrome-extension/pro/video-player.js +545 -0
- package/dist/chromedebug-extension-free.zip +0 -0
- package/package.json +1 -1
- package/scripts/postinstall.js +1 -1
- package/scripts/webpack.config.free.cjs +6 -0
- package/scripts/webpack.config.pro.cjs +6 -0
- package/src/chrome-controller.js +6 -6
- package/src/database.js +157 -39
- package/src/http-server.js +55 -11
- package/src/validation/schemas.js +11 -1
|
@@ -375,6 +375,7 @@
|
|
|
375
375
|
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
|
376
376
|
}
|
|
377
377
|
</style>
|
|
378
|
+
<link rel="stylesheet" href="video-player.css">
|
|
378
379
|
</head>
|
|
379
380
|
<body>
|
|
380
381
|
<div class="header">
|
|
@@ -395,24 +396,272 @@
|
|
|
395
396
|
<button class="btn btn-secondary" id="copyPromptBtn">Copy Prompt</button>
|
|
396
397
|
</div>
|
|
397
398
|
</div>
|
|
398
|
-
|
|
399
|
+
|
|
399
400
|
<div class="content">
|
|
400
401
|
<div id="loadingContainer" class="loading">
|
|
401
402
|
Loading frames...
|
|
402
403
|
</div>
|
|
403
|
-
|
|
404
|
+
|
|
404
405
|
<div id="errorContainer" class="error" style="display: none;">
|
|
405
406
|
</div>
|
|
406
|
-
|
|
407
|
+
|
|
407
408
|
<div id="emptyContainer" class="empty-state" style="display: none;">
|
|
408
409
|
<h2>No Recording Selected</h2>
|
|
409
410
|
<p>Please select a recording from the extension popup to edit.</p>
|
|
410
411
|
</div>
|
|
411
|
-
|
|
412
|
-
|
|
412
|
+
|
|
413
|
+
<!-- Tab Navigation -->
|
|
414
|
+
<div class="editor-tabs" id="editorTabs" style="display: none;">
|
|
415
|
+
<button class="tab-btn active" data-tab="frames">Frames</button>
|
|
416
|
+
<button class="tab-btn" data-tab="player">Video Player</button>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<!-- Frames Tab -->
|
|
420
|
+
<div id="framesTab" class="tab-content active">
|
|
421
|
+
<div class="frames-container" id="framesContainer" style="display: none;">
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<!-- Video Player Tab -->
|
|
426
|
+
<div id="playerTab" class="tab-content">
|
|
427
|
+
<div class="video-player-container">
|
|
428
|
+
<div class="video-main-area">
|
|
429
|
+
<div class="video-canvas-wrapper" id="videoCanvasWrapper">
|
|
430
|
+
<!-- Canvas inserted by VideoPlayer -->
|
|
431
|
+
<div class="video-loading" id="videoLoading">Loading...</div>
|
|
432
|
+
</div>
|
|
433
|
+
|
|
434
|
+
<!-- Log Panel -->
|
|
435
|
+
<div class="video-log-panel" id="videoLogPanel" style="display: none;">
|
|
436
|
+
<div class="log-panel-header">
|
|
437
|
+
<span class="log-panel-title">Console Logs</span>
|
|
438
|
+
<button class="log-panel-close" id="logPanelClose" title="Close (L)">×</button>
|
|
439
|
+
</div>
|
|
440
|
+
<div class="log-panel-content" id="logPanelContent">
|
|
441
|
+
<!-- Logs inserted dynamically -->
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<div class="video-controls">
|
|
447
|
+
<button id="playPauseBtn" title="Play/Pause (Space)">▶</button>
|
|
448
|
+
<button id="prevFrameBtn" title="Previous Frame (←)">⏮</button>
|
|
449
|
+
<button id="nextFrameBtn" title="Next Frame (→)">⏭</button>
|
|
450
|
+
|
|
451
|
+
<div class="seek-bar-container">
|
|
452
|
+
<input type="range" class="seek-bar" id="seekBar" min="0" max="100" value="0">
|
|
453
|
+
<span class="time-display" id="timeDisplay">0:00 / 0:00</span>
|
|
454
|
+
</div>
|
|
455
|
+
|
|
456
|
+
<select class="speed-select" id="speedSelect">
|
|
457
|
+
<option value="0.25">0.25x</option>
|
|
458
|
+
<option value="0.5">0.5x</option>
|
|
459
|
+
<option value="1" selected>1x</option>
|
|
460
|
+
<option value="2">2x</option>
|
|
461
|
+
<option value="4">4x</option>
|
|
462
|
+
</select>
|
|
463
|
+
|
|
464
|
+
<button id="exportVideoBtn" class="export-btn" title="Export as MP4 (E)">Export MP4</button>
|
|
465
|
+
|
|
466
|
+
<span class="frame-counter" id="frameCounter">Frame 0 / 0</span>
|
|
467
|
+
</div>
|
|
468
|
+
|
|
469
|
+
<div class="video-options">
|
|
470
|
+
<label>
|
|
471
|
+
<input type="checkbox" id="showLogsToggle" checked>
|
|
472
|
+
Show Logs (L)
|
|
473
|
+
</label>
|
|
474
|
+
<select id="logPositionSelect">
|
|
475
|
+
<option value="bottom" selected>Bottom</option>
|
|
476
|
+
<option value="right">Right</option>
|
|
477
|
+
<option value="overlay">Overlay</option>
|
|
478
|
+
</select>
|
|
479
|
+
|
|
480
|
+
<label>
|
|
481
|
+
<input type="checkbox" id="showCursorToggle" checked>
|
|
482
|
+
Show Cursor
|
|
483
|
+
</label>
|
|
484
|
+
|
|
485
|
+
<label>
|
|
486
|
+
<input type="checkbox" id="showClicksToggle" checked>
|
|
487
|
+
Show Clicks
|
|
488
|
+
</label>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<!-- Frame Thumbnail Strip -->
|
|
492
|
+
<div class="frame-strip-container">
|
|
493
|
+
<div class="frame-strip-header">
|
|
494
|
+
<span class="frame-strip-title">Frames</span>
|
|
495
|
+
<span class="frame-strip-count" id="frameStripCount">0 frames</span>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="frame-strip" id="frameStrip">
|
|
498
|
+
<!-- Frame thumbnails inserted dynamically -->
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
413
502
|
</div>
|
|
414
503
|
</div>
|
|
415
|
-
|
|
504
|
+
|
|
505
|
+
<!-- Export Modal -->
|
|
506
|
+
<div id="exportModal" class="export-modal" style="display: none;">
|
|
507
|
+
<div class="export-modal-content">
|
|
508
|
+
<div class="export-modal-header">
|
|
509
|
+
<h3>Export Video</h3>
|
|
510
|
+
<button class="export-modal-close" id="closeExportModal">×</button>
|
|
511
|
+
</div>
|
|
512
|
+
|
|
513
|
+
<div class="export-modal-body">
|
|
514
|
+
<!-- Basic Settings -->
|
|
515
|
+
<div class="export-section">
|
|
516
|
+
<div class="export-section-title">Basic Settings</div>
|
|
517
|
+
|
|
518
|
+
<div class="export-option">
|
|
519
|
+
<label>Quality:</label>
|
|
520
|
+
<select id="exportQuality">
|
|
521
|
+
<option value="low">Low (1 Mbps) - Smaller file</option>
|
|
522
|
+
<option value="medium" selected>Medium (3 Mbps) - Balanced</option>
|
|
523
|
+
<option value="high">High (5 Mbps) - Best quality</option>
|
|
524
|
+
</select>
|
|
525
|
+
</div>
|
|
526
|
+
|
|
527
|
+
<div class="export-option">
|
|
528
|
+
<label>Frame Rate:</label>
|
|
529
|
+
<select id="exportFps">
|
|
530
|
+
<option value="5">5 FPS</option>
|
|
531
|
+
<option value="10" selected>10 FPS</option>
|
|
532
|
+
<option value="15">15 FPS</option>
|
|
533
|
+
<option value="24">24 FPS</option>
|
|
534
|
+
<option value="30">30 FPS</option>
|
|
535
|
+
</select>
|
|
536
|
+
</div>
|
|
537
|
+
|
|
538
|
+
<div class="export-option">
|
|
539
|
+
<label>Style Preset:</label>
|
|
540
|
+
<select id="exportStylePreset">
|
|
541
|
+
<option value="minimal">Minimal - Clean, simple overlays</option>
|
|
542
|
+
<option value="detailed" selected>Detailed - Frame info + timestamps</option>
|
|
543
|
+
<option value="debug">Debug - Full technical details</option>
|
|
544
|
+
</select>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
|
|
548
|
+
<!-- Overlays -->
|
|
549
|
+
<div class="export-section">
|
|
550
|
+
<div class="export-section-title">Overlays</div>
|
|
551
|
+
|
|
552
|
+
<div class="export-option">
|
|
553
|
+
<label>Include in video:</label>
|
|
554
|
+
<div class="export-checkboxes">
|
|
555
|
+
<label><input type="checkbox" id="exportIncludeLogs" checked> Console Logs</label>
|
|
556
|
+
<label><input type="checkbox" id="exportIncludeClicks" checked> Click Indicators</label>
|
|
557
|
+
<label><input type="checkbox" id="exportIncludeCursor" checked> Mouse Cursor</label>
|
|
558
|
+
</div>
|
|
559
|
+
</div>
|
|
560
|
+
|
|
561
|
+
<div class="export-option">
|
|
562
|
+
<label>Log Position:</label>
|
|
563
|
+
<select id="exportLogPosition">
|
|
564
|
+
<option value="bottom" selected>Bottom</option>
|
|
565
|
+
<option value="top">Top</option>
|
|
566
|
+
</select>
|
|
567
|
+
</div>
|
|
568
|
+
|
|
569
|
+
<div class="export-option">
|
|
570
|
+
<label>Log Filter:</label>
|
|
571
|
+
<select id="exportLogFilter">
|
|
572
|
+
<option value="all">All Logs</option>
|
|
573
|
+
<option value="errors" selected>Errors Only</option>
|
|
574
|
+
<option value="warnings">Errors & Warnings</option>
|
|
575
|
+
<option value="info">Errors, Warnings & Info</option>
|
|
576
|
+
</select>
|
|
577
|
+
<div class="export-hint">Filter which logs appear in the video (reduces noise)</div>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
|
|
581
|
+
<!-- Intro/Outro -->
|
|
582
|
+
<div class="export-section">
|
|
583
|
+
<div class="export-section-title">Intro/Outro (Optional)</div>
|
|
584
|
+
|
|
585
|
+
<div class="export-option">
|
|
586
|
+
<label>Intro Title:</label>
|
|
587
|
+
<input type="text" id="exportIntroText" placeholder="e.g., Bug Report Demo" class="export-input">
|
|
588
|
+
<div class="export-hint">Shown at the start of the video</div>
|
|
589
|
+
</div>
|
|
590
|
+
|
|
591
|
+
<div class="export-option">
|
|
592
|
+
<label>Outro Text:</label>
|
|
593
|
+
<input type="text" id="exportOutroText" placeholder="e.g., Thank you for watching" class="export-input">
|
|
594
|
+
<div class="export-hint">Shown at the end of the video</div>
|
|
595
|
+
</div>
|
|
596
|
+
|
|
597
|
+
<div class="export-option export-inline">
|
|
598
|
+
<div>
|
|
599
|
+
<label>Intro Duration:</label>
|
|
600
|
+
<select id="exportIntroDuration">
|
|
601
|
+
<option value="1">1 sec</option>
|
|
602
|
+
<option value="2" selected>2 sec</option>
|
|
603
|
+
<option value="3">3 sec</option>
|
|
604
|
+
<option value="5">5 sec</option>
|
|
605
|
+
</select>
|
|
606
|
+
</div>
|
|
607
|
+
<div>
|
|
608
|
+
<label>Outro Duration:</label>
|
|
609
|
+
<select id="exportOutroDuration">
|
|
610
|
+
<option value="1">1 sec</option>
|
|
611
|
+
<option value="2" selected>2 sec</option>
|
|
612
|
+
<option value="3">3 sec</option>
|
|
613
|
+
<option value="5">5 sec</option>
|
|
614
|
+
</select>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
|
|
619
|
+
<!-- Watermark -->
|
|
620
|
+
<div class="export-section">
|
|
621
|
+
<div class="export-section-title">Watermark (Optional)</div>
|
|
622
|
+
|
|
623
|
+
<div class="export-option">
|
|
624
|
+
<label>Watermark Text:</label>
|
|
625
|
+
<input type="text" id="exportWatermarkText" placeholder="e.g., Company Name" class="export-input">
|
|
626
|
+
</div>
|
|
627
|
+
|
|
628
|
+
<div class="export-option export-inline">
|
|
629
|
+
<div>
|
|
630
|
+
<label>Position:</label>
|
|
631
|
+
<select id="exportWatermarkPosition">
|
|
632
|
+
<option value="bottom-right" selected>Bottom Right</option>
|
|
633
|
+
<option value="bottom-left">Bottom Left</option>
|
|
634
|
+
<option value="top-right">Top Right</option>
|
|
635
|
+
<option value="top-left">Top Left</option>
|
|
636
|
+
</select>
|
|
637
|
+
</div>
|
|
638
|
+
<div>
|
|
639
|
+
<label>Opacity:</label>
|
|
640
|
+
<select id="exportWatermarkOpacity">
|
|
641
|
+
<option value="0.3">30%</option>
|
|
642
|
+
<option value="0.5" selected>50%</option>
|
|
643
|
+
<option value="0.7">70%</option>
|
|
644
|
+
<option value="1">100%</option>
|
|
645
|
+
</select>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
</div>
|
|
650
|
+
|
|
651
|
+
<div class="export-progress" id="exportProgress" style="display: none;">
|
|
652
|
+
<div class="progress-bar-container">
|
|
653
|
+
<div class="progress-bar" id="exportProgressBar"></div>
|
|
654
|
+
</div>
|
|
655
|
+
<span class="progress-text" id="exportProgressText">0%</span>
|
|
656
|
+
</div>
|
|
657
|
+
|
|
658
|
+
<div class="export-modal-footer">
|
|
659
|
+
<button id="cancelExportBtn" class="btn-secondary">Cancel</button>
|
|
660
|
+
<button id="startExportBtn" class="btn-primary">Export MP4</button>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
|
|
416
665
|
<!-- Modal for enlarged frame view -->
|
|
417
666
|
<div class="modal-overlay" id="frameModal">
|
|
418
667
|
<div class="modal-content">
|
|
@@ -427,7 +676,11 @@
|
|
|
427
676
|
</div>
|
|
428
677
|
|
|
429
678
|
<script src="../extension-config.js"></script>
|
|
679
|
+
<script src="../image-processor.js"></script>
|
|
430
680
|
<script src="jszip.min.js"></script>
|
|
681
|
+
<script src="lib/mp4-muxer.min.js"></script>
|
|
682
|
+
<script src="video-exporter.js"></script>
|
|
683
|
+
<script src="video-player.js"></script>
|
|
431
684
|
<script src="frame-editor.js"></script>
|
|
432
685
|
</body>
|
|
433
686
|
</html>
|