npm - @dynamicu/chromedebug-mcp - Versions diffs - 2.2.0 - Mend

@dynamicu/chromedebug-mcp 2.2.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.

Files changed (95) hide show

package/CLAUDE.md +344 -0
package/LICENSE +21 -0
package/README.md +250 -0
package/chrome-extension/README.md +41 -0
package/chrome-extension/background.js +3917 -0
package/chrome-extension/chrome-session-manager.js +706 -0
package/chrome-extension/content.css +181 -0
package/chrome-extension/content.js +3022 -0
package/chrome-extension/data-buffer.js +435 -0
package/chrome-extension/dom-tracker.js +411 -0
package/chrome-extension/extension-config.js +78 -0
package/chrome-extension/firebase-client.js +278 -0
package/chrome-extension/firebase-config.js +32 -0
package/chrome-extension/firebase-config.module.js +22 -0
package/chrome-extension/firebase-config.module.template.js +27 -0
package/chrome-extension/firebase-config.template.js +36 -0
package/chrome-extension/frame-capture.js +407 -0
package/chrome-extension/icon128.png +1 -0
package/chrome-extension/icon16.png +1 -0
package/chrome-extension/icon48.png +1 -0
package/chrome-extension/license-helper.js +181 -0
package/chrome-extension/logger.js +23 -0
package/chrome-extension/manifest.json +73 -0
package/chrome-extension/network-tracker.js +510 -0
package/chrome-extension/offscreen.html +10 -0
package/chrome-extension/options.html +203 -0
package/chrome-extension/options.js +282 -0
package/chrome-extension/pako.min.js +2 -0
package/chrome-extension/performance-monitor.js +533 -0
package/chrome-extension/pii-redactor.js +405 -0
package/chrome-extension/popup.html +532 -0
package/chrome-extension/popup.js +2446 -0
package/chrome-extension/upload-manager.js +323 -0
package/chrome-extension/web-vitals.iife.js +1 -0
package/config/api-keys.json +11 -0
package/config/chrome-pilot-config.json +45 -0
package/package.json +126 -0
package/scripts/cleanup-processes.js +109 -0
package/scripts/config-manager.js +280 -0
package/scripts/generate-extension-config.js +53 -0
package/scripts/setup-security.js +64 -0
package/src/capture/architecture.js +426 -0
package/src/capture/error-handling-tests.md +38 -0
package/src/capture/error-handling-types.ts +360 -0
package/src/capture/index.js +508 -0
package/src/capture/interfaces.js +625 -0
package/src/capture/memory-manager.js +713 -0
package/src/capture/types.js +342 -0
package/src/chrome-controller.js +2658 -0
package/src/cli.js +19 -0
package/src/config-loader.js +303 -0
package/src/database.js +2178 -0
package/src/firebase-license-manager.js +462 -0
package/src/firebase-privacy-guard.js +397 -0
package/src/http-server.js +1516 -0
package/src/index-direct.js +157 -0
package/src/index-modular.js +219 -0
package/src/index-monolithic-backup.js +2230 -0
package/src/index.js +305 -0
package/src/legacy/chrome-controller-old.js +1406 -0
package/src/legacy/index-express.js +625 -0
package/src/legacy/index-old.js +977 -0
package/src/legacy/routes.js +260 -0
package/src/legacy/shared-storage.js +101 -0
package/src/logger.js +10 -0
package/src/mcp/handlers/chrome-tool-handler.js +306 -0
package/src/mcp/handlers/element-tool-handler.js +51 -0
package/src/mcp/handlers/frame-tool-handler.js +957 -0
package/src/mcp/handlers/request-handler.js +104 -0
package/src/mcp/handlers/workflow-tool-handler.js +636 -0
package/src/mcp/server.js +68 -0
package/src/mcp/tools/index.js +701 -0
package/src/middleware/auth.js +371 -0
package/src/middleware/security.js +267 -0
package/src/port-discovery.js +258 -0
package/src/routes/admin.js +182 -0
package/src/services/browser-daemon.js +494 -0
package/src/services/chrome-service.js +375 -0
package/src/services/failover-manager.js +412 -0
package/src/services/git-safety-service.js +675 -0
package/src/services/heartbeat-manager.js +200 -0
package/src/services/http-client.js +195 -0
package/src/services/process-manager.js +318 -0
package/src/services/process-tracker.js +574 -0
package/src/services/profile-manager.js +449 -0
package/src/services/project-manager.js +415 -0
package/src/services/session-manager.js +497 -0
package/src/services/session-registry.js +491 -0
package/src/services/unified-session-manager.js +678 -0
package/src/shared-storage-old.js +267 -0
package/src/standalone-server.js +53 -0
package/src/utils/extension-path.js +145 -0
package/src/utils.js +187 -0
package/src/validation/log-transformer.js +125 -0
package/src/validation/schemas.js +391 -0

package/chrome-extension/popup.html ADDED Viewed

@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      width: 300px;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+    }
+    a {
+      color: #2196F3;
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+    a:hover {
+      color: #1976D2;
+      text-decoration: underline;
+    }
+    h2 {
+      margin: 0 0 20px 0;
+      font-size: 18px;
+      color: #333;
+    }
+    .status {
+      background: #f0f0f0;
+      padding: 10px;
+      border-radius: 4px;
+      margin-bottom: 15px;
+      font-size: 14px;
+    }
+    .instructions {
+      font-size: 14px;
+      line-height: 1.6;
+      color: #666;
+    }
+    .instructions li {
+      margin-bottom: 8px;
+    }
+    .server-status {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+    .server-status.connected {
+      background: #4CAF50;
+    }
+    .server-status.disconnected {
+      background: #f44336;
+    }
+    .recording-section {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #e0e0e0;
+    }
+    .record-btn {
+      width: 100%;
+      padding: 10px;
+      background: #f44336;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      margin-top: 10px;
+    }
+    .record-btn:hover {
+      background: #d32f2f;
+    }
+    .record-btn.recording {
+      background: #ff5252;
+      animation: pulse 1.5s infinite;
+    }
+    .record-btn:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+    #manualSnapshotBtn:hover {
+      background: #45a049 !important;
+    }
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.7; }
+      100% { opacity: 1; }
+    }
+    @keyframes countdown {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    .countdown-timer {
+      animation: countdown 1s ease-in-out;
+    }
+    .recording-status {
+      font-size: 13px;
+      color: #666;
+      margin-top: 5px;
+      text-align: center;
+    }
+    .recording-timer {
+      font-family: monospace;
+      color: #f44336;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div style="position: absolute; top: 5px; right: 5px; font-size: 10px; color: #999; font-family: monospace;">v2.0.8</div>
+  <h2>Chrome Debug Assistant</h2>
+  <!-- License Section -->
+  <div id="license-section" style="padding: 10px; border-bottom: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; margin-bottom: 15px;">
+    <h3 style="margin: 0 0 10px 0; font-size: 14px; color: #333;">License Status</h3>
+    <!-- Free Tier Display -->
+    <div id="free-tier-status" style="display: none;">
+      <p style="font-size: 13px; margin: 5px 0; color: #666;">
+        Free Plan: <span id="usage-count" style="font-weight: bold;">0</span>/<span id="usage-limit" style="font-weight: bold;">5</span> recordings today
+      </p>
+      <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;">
+        Upgrade to Pro - $7.99/month
+      </button>
+    </div>
+    <!-- Pro Tier Display -->
+    <div id="pro-tier-status" style="display: none;">
+      <p style="font-size: 13px; margin: 5px 0; color: #4caf50; font-weight: 500;">
+        Pro License Active - Unlimited recordings
+      </p>
+    </div>
+    <!-- License Activation -->
+    <div id="license-activation" style="margin-top: 10px;">
+      <input type="text" id="license-key-input" placeholder="Enter license key"
+             style="width: 100%; padding: 6px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 5px; box-sizing: border-box;">
+      <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%;">
+        Activate License
+      </button>
+    </div>
+    <div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
+  </div>
+  <div class="status">
+    <span class="server-status disconnected" id="serverStatus"></span>
+    <span id="statusText">Checking server...</span>
+  </div>
+  <div class="instructions">
+    <strong>Chrome Debug Assistant:</strong>
+    <p>Use the recording features below to capture screen recordings, workflow recordings, or debug data for your applications.</p>
+  </div>
+  <div class="site-restriction-section" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+      <strong style="font-size: 14px; color: #333;">Current Site Status:</strong>
+      <a href="/options.html" target="_blank" style="font-size: 12px;">Settings</a>
+    </div>
+    <div id="siteStatus" style="font-size: 13px; margin-bottom: 8px;">
+      <span id="siteStatusIcon">⏳</span> <span id="siteStatusText">Checking...</span>
+    </div>
+    <div style="display: flex; gap: 5px;">
+      <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>
+        Loading...
+      </button>
+      <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>
+        Add Site
+      </button>
+    </div>
+  </div>
+  <div class="enhanced-capture-section" style="margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+      <strong style="font-size: 14px; color: #333;">Enhanced Click Capture:</strong>
+      <span class="info-icon" title="Captures detailed element information (HTML, handlers, state) when recording clicks. May impact performance.">ℹ️</span>
+    </div>
+    <label style="font-size: 13px; display: flex; align-items: center; cursor: pointer;">
+      <input type="checkbox" id="enhancedCaptureCheckbox" style="margin-right: 8px;">
+      Enable detailed click data capture
+    </label>
+    <div style="font-size: 11px; color: #666; margin-top: 5px;">
+      When enabled, captures element HTML, event handlers, component info, and performance metrics
+    </div>
+  </div>
+  <div class="recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0;">
+      <h3 style="margin: 0; font-size: 16px;">Workflow Recording</h3>
+      <a href="#" id="viewWorkflowRecordings" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Recordings</a>
+    </div>
+    <p style="font-size: 13px; color: #666; margin: 0 0 10px 0;">
+      Record user interactions to create replayable workflows
+    </p>
+    <!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
+    <!--
+    <div style="margin-bottom: 10px;">
+      <label style="font-size: 13px; display: block; margin-bottom: 5px;">Session Name (optional):</label>
+      <input type="text" id="sessionNameInput" placeholder="Enter a name for this workflow" style="width: 100%; padding: 5px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px;">
+    </div>
+    -->
+    <!-- Screenshot Settings -->
+    <div style="margin-bottom: 10px; border: 1px solid #e0e0e0; padding: 10px; border-radius: 4px;">
+      <label style="font-size: 13px; display: flex; align-items: center; cursor: pointer; margin-bottom: 8px;">
+        <input type="checkbox" id="enableScreenshotsCheckbox" checked style="margin-right: 8px;">
+        Capture screenshots for each action
+      </label>
+      <div id="screenshotSettings" style="display: none; margin-left: 20px;">
+        <div style="margin-bottom: 5px;">
+          <label style="font-size: 12px;">Format: </label>
+          <select id="screenshotFormat" style="font-size: 12px; padding: 2px;">
+            <option value="jpeg">JPEG</option>
+            <option value="png">PNG</option>
+          </select>
+        </div>
+        <div style="margin-bottom: 5px;">
+          <label style="font-size: 12px;">Quality: </label>
+          <input type="range" id="screenshotQuality" min="10" max="100" value="30" style="width: 100px;">
+          <span id="qualityValue" style="font-size: 12px;">30</span>
+        </div>
+        <div>
+          <label style="font-size: 12px;">Max Width: </label>
+          <input type="number" id="screenshotMaxWidth" placeholder="e.g. 800" style="width: 80px; font-size: 12px; padding: 2px;">
+        </div>
+      </div>
+    </div>
+    <div style="margin-bottom: 10px;">
+      <label style="font-size: 13px; display: flex; align-items: center; cursor: pointer;">
+        <input type="checkbox" id="includeLogsCheckbox" style="margin-right: 8px;">
+        Include console logs and errors in export
+      </label>
+    </div>
+    <button class="record-btn" id="workflowRecordBtn" style="background: #9c27b0; position: relative;">
+      Start Workflow Recording
+      <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>
+    </button>
+    <button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top: 5px;">📍 Save Restore Point</button>
+    <div class="recording-status" id="workflowRecordingStatus"></div>
+    <div class="recordings-list" id="workflowRecordingsList" style="margin-top: 15px; display: none;">
+      <h4 style="margin: 0 0 10px 0; font-size: 14px;">Saved Workflow Recordings:</h4>
+      <div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px;"></div>
+    </div>
+    <div class="restore-points-list" id="restorePointsList" style="margin-top: 15px; display: none;">
+      <h4 style="margin: 0 0 10px 0; font-size: 14px;">Restore Points:</h4>
+      <div id="restorePointsContainer"></div>
+    </div>
+  </div>
+  <div class="recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0;">
+      <h3 style="margin: 0; font-size: 16px;">Screen Recording</h3>
+      <a href="#" id="viewScreenRecordings" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Recordings</a>
+    </div>
+    <p style="font-size: 13px; color: #666; margin: 0 0 10px 0;">
+      Record your screen with console logs to help explain issues
+    </p>
+    <!-- Session Name Input - DISABLED FOR v2.0 RELEASE -->
+    <!--
+    <div style="margin-bottom: 10px;">
+      <label style="font-size: 13px; display: block; margin-bottom: 5px;">Session Name (optional):</label>
+      <input type="text" id="screenRecordingSessionNameInput" placeholder="Enter a name for this recording" style="width: 100%; padding: 5px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px;">
+    </div>
+    -->
+    <!-- Recording Settings -->
+    <div class="recording-settings" style="background: #f9f9f9; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
+      <details>
+        <summary style="cursor: pointer; font-size: 12px; font-weight: bold; color: #333;">Recording Settings</summary>
+        <div style="margin-top: 8px;">
+          <div style="margin-bottom: 8px;">
+            <label for="frameRate" style="font-size: 11px; color: #666; display: block;">Frame Rate (seconds between frames):</label>
+            <select id="frameRate" style="width: 100%; padding: 4px; font-size: 11px;">
+              <option value="0.5">0.5s (2 fps)</option>
+              <option value="1" selected>1s (1 fps)</option>
+              <option value="2">2s (0.5 fps)</option>
+              <option value="3">3s (0.33 fps)</option>
+              <option value="5">5s (0.2 fps)</option>
+            </select>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <label for="imageQuality" style="font-size: 11px; color: #666; display: block;">Image Quality (%):</label>
+            <select id="imageQuality" style="width: 100%; padding: 4px; font-size: 11px;">
+              <option value="10">10% (ultra small)</option>
+              <option value="20">20% (very small)</option>
+              <option value="30" selected>30% (balanced)</option>
+              <option value="50">50% (good)</option>
+              <option value="70">70% (high)</option>
+            </select>
+          </div>
+          <div style="margin-bottom: 8px;">
+            <label style="font-size: 11px; color: #666; display: block;">
+              <input type="checkbox" id="frameFlash"> Flash indicator when capturing frames
+            </label>
+          </div>
+        </div>
+      </details>
+    </div>
+    <button class="record-btn" id="recordBtn">Start Recording</button>
+    <button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top: 5px;">Take Manual Snapshot</button>
+    <div class="recording-status" id="recordingStatus"></div>
+    <div class="countdown-display" id="countdownDisplay" style="display: none; text-align: center; margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 4px;">
+      <div style="font-size: 12px; color: #666; margin-bottom: 5px;">Next snapshot in:</div>
+      <div class="countdown-timer" style="font-size: 24px; font-weight: bold; color: #f44336; font-family: monospace;" id="countdownTimer">0</div>
+    </div>
+    <div class="recordings-list" id="recordingsList" style="margin-top: 15px; display: none;">
+      <h4 style="margin: 0 0 10px 0; font-size: 14px;">Saved Recordings:</h4>
+      <div id="recordingsContainer" style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px;"></div>
+    </div>
+    <!--
+      SNAPSHOT FEATURE DISABLED (2025-10-01)
+      WHY DISABLED:
+      - Snapshots without console logs are just screenshots (users can do this natively)
+      - Console log capture requires always-on monitoring (privacy concern)
+      - Core value proposition (screenshot + searchable logs) cannot be achieved cleanly
+      TO RE-ENABLE:
+      - Solve console log persistence challenge (always-on monitoring with privacy controls)
+      - Implement proper log buffering system with user consent
+      - Add user controls for log retention and privacy
+      - Uncomment this section and related JavaScript functions in popup.js
+      RECOMMENDED ALTERNATIVE: Use screen recordings (captures screenshots + logs properly)
+      See: SNAPSHOT_FEATURE_DISABLED.md for full explanation
+    -->
+    <!-- Snapshot Section DISABLED
+    <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e0e0;">
+      <p style="font-size: 13px; color: #666; margin: 0 0 10px 0;">
+        Capture a single screenshot with console logs for quick debugging
+      </p>
+      <div style="margin-bottom: 10px;">
+        <label style="font-size: 13px; display: block; margin-bottom: 5px;">Note (optional):</label>
+        <input type="text" id="snapshotNoteInput" placeholder="Add a note to describe this snapshot" style="width: 100%; padding: 5px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px;">
+      </div>
+      <button class="record-btn" id="takeSnapshotBtn" style="background: #FF9800;">📸 Take Snapshot</button>
+      <div style="margin-top: 10px;">
+        <a href="#" id="viewSnapshotsLink" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Snapshots</a>
+      </div>
+      <div class="snapshots-list" id="snapshotsList" style="margin-top: 10px; display: none;">
+        <h4 style="margin: 0 0 10px 0; font-size: 14px;">Saved Snapshots:</h4>
+        <div id="snapshotsContainer" style="max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px;"></div>
+      </div>
+    </div>
+    -->
+  </div>
+  <style>
+    .recording-item {
+      background: #f5f5f5;
+      padding: 8px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .recording-info {
+      flex: 1;
+    }
+    .recording-id {
+      font-family: monospace;
+      background: #fff;
+      padding: 4px 8px;
+      border-radius: 3px;
+      border: 1px solid #ddd;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .recording-id-text {
+      font-size: 11px;
+    }
+    .recording-buttons {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+    .copy-id-btn, .copy-prompt-btn, .view-btn, .edit-btn, .delete-btn {
+      padding: 4px 8px;
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 10px;
+      transition: all 0.2s;
+      flex: 1;
+      min-width: 0;
+    }
+    .copy-id-btn:hover {
+      background: #e3f2fd;
+      border-color: #2196F3;
+    }
+    .copy-prompt-btn:hover {
+      background: #f3e5f5;
+      border-color: #9c27b0;
+    }
+    .view-btn:hover {
+      background: #fce4ec;
+      border-color: #e91e63;
+    }
+    .edit-btn:hover {
+      background: #e8f5e9;
+      border-color: #4caf50;
+    }
+    .delete-btn {
+      background: #f44336;
+      color: white;
+      border: none;
+    }
+    .delete-btn:hover {
+      background: #d32f2f;
+    }
+    .restore-point-item {
+      background: #e3f2fd;
+      padding: 8px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      border: 1px solid #90caf9;
+    }
+    .restore-point-info {
+      margin-bottom: 8px;
+    }
+    .restore-btn {
+      padding: 4px 8px;
+      background: #2196F3;
+      color: white;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 10px;
+      margin-right: 4px;
+    }
+    .restore-btn:hover {
+      background: #1976d2;
+    }
+    .info-icon {
+      display: inline-block;
+      margin-left: 4px;
+      color: #2196F3;
+      font-size: 11px;
+      cursor: help;
+      vertical-align: middle;
+      font-weight: bold;
+    }
+    .info-icon:hover {
+      color: #1976D2;
+    }
+    .site-toggle-btn:hover:not(:disabled) {
+      background: #f5f5f5;
+      border-color: #2196F3;
+    }
+    .site-toggle-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    .site-toggle-btn.allow {
+      background: #e8f5e9 !important;
+      border-color: #4caf50 !important;
+      color: #2e7d32;
+    }
+    .site-toggle-btn.block {
+      background: #ffebee !important;
+      border-color: #f44336 !important;
+      color: #c62828;
+    }
+  </style>
+  <script src="extension-config.js"></script>
+  <script type="module" src="popup.js"></script>
+</body>
+</html>