cdp-tunnel 1.0.0

package/extension-new/features/automation-badge.js

@@ -0,0 +1,113 @@
+var AutomationBadge = (function() {
+  var PREFIX = '[Automation] ';
+  var BADGE_CONTAINER_ID = '__cdp_automation_badge_container__';
+
+  var INJECT_STYLE_SCRIPT = function() {
+    if (document.getElementById('__cdp_automation_styles__')) return;
+    var style = document.createElement('style');
+    style.id = '__cdp_automation_styles__';
+    style.textContent = '\n      .__cdp_automation_badge__ {\n        position: fixed;\n        bottom: 10px;\n        right: 10px;\n        background: rgba(255, 152, 0, 0.95);\n        color: white;\n        padding: 6px 12px;\n        border-radius: 4px;\n        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n        font-size: 12px;\n        font-weight: 500;\n        z-index: 2147483647;\n        box-shadow: 0 2px 8px rgba(0,0,0,0.3);\n        pointer-events: none;\n        user-select: none;\n      }\n    ';
+    document.head.appendChild(style);
+  };
+
+  var INJECT_BADGE_SCRIPT = function() {
+    if (document.getElementById('__cdp_automation_badge_container__')) return;
+    var container = document.createElement('div');
+    container.id = '__cdp_automation_badge_container__';
+    var badge = document.createElement('div');
+    badge.className = '__cdp_automation_badge__';
+    badge.textContent = 'Automation';
+    container.appendChild(badge);
+    document.body.appendChild(container);
+  };
+
+  var REMOVE_BADGE_SCRIPT = function() {
+    var container = document.getElementById('__cdp_automation_badge_container__');
+    if (container) container.remove();
+  };
+
+  var UPDATE_TITLE_SCRIPT = function(prefix) {
+    if (!document.title.startsWith(prefix)) {
+      document.title = prefix + document.title.replace(new RegExp('^' + prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')), '');
+    }
+  };
+
+  var RESTORE_TITLE_SCRIPT = function(prefix) {
+    if (document.title.startsWith(prefix)) {
+      document.title = document.title.slice(prefix.length);
+    }
+  };
+
+  function inject(tabId) {
+    State.addAutomatedTab(tabId);
+
+    injectStyle(tabId);
+    injectBadge(tabId);
+    updateTitle(tabId);
+  }
+
+  function remove(tabId) {
+    State.removeAutomatedTab(tabId);
+
+    removeBadge(tabId);
+    restoreTitle(tabId);
+  }
+
+  function injectStyle(tabId) {
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: INJECT_STYLE_SCRIPT
+    }).catch(function() {});
+  }
+
+  function injectBadge(tabId) {
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: INJECT_BADGE_SCRIPT
+    }).catch(function() {});
+  }
+
+  function removeBadge(tabId) {
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: REMOVE_BADGE_SCRIPT
+    }).catch(function() {});
+  }
+
+  function updateTitle(tabId) {
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: UPDATE_TITLE_SCRIPT,
+      args: [PREFIX]
+    }).catch(function() {});
+  }
+
+  function restoreTitle(tabId) {
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: RESTORE_TITLE_SCRIPT,
+      args: [PREFIX]
+    }).catch(function() {});
+  }
+
+  function refreshAll() {
+    var automatedTabs = State.getAutomatedTabs();
+    automatedTabs.forEach(function(tabId) {
+      chrome.tabs.get(tabId, function(tab) {
+        if (tab && tab.id) {
+          inject(tabId);
+        } else {
+          State.removeAutomatedTab(tabId);
+        }
+      }).catch(function() {
+        State.removeAutomatedTab(tabId);
+      });
+    });
+  }
+
+  return {
+    inject: inject,
+    remove: remove,
+    refreshAll: refreshAll
+  };
+})();

package/extension-new/features/screencast.js

@@ -0,0 +1,221 @@
+var Screencast = (function() {
+  var CHANGE_DETECTOR_SCRIPT = (function() {
+    return function() {
+      if (window.__cdpChangeDetectorInjected) {
+        window.__cdpChangePaused = false;
+        if (typeof window.__cdpCheckAnimations === 'function') {
+          requestAnimationFrame(window.__cdpCheckAnimations);
+        }
+        return;
+      }
+      window.__cdpChangeDetectorInjected = true;
+      window.__cdpChangePaused = false;
+      window.__cdpChangeNotify = function() {
+        if (window.__cdpChangePaused) return;
+        if (window.__cdpChangeNotifyPending) return;
+        window.__cdpChangeNotifyPending = true;
+        requestAnimationFrame(function() {
+          window.__cdpChangeNotifyPending = false;
+          if (typeof __notifyChange === 'function') {
+            __notifyChange('change');
+          }
+        });
+      };
+      var observer = new MutationObserver(window.__cdpChangeNotify);
+      window.__cdpMutationObserver = observer;
+      observer.observe(document.documentElement, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true
+      });
+      var events = ['scroll', 'wheel', 'resize'];
+      window.__cdpEventNames = events;
+      for (var i = 0; i < events.length; i++) {
+        document.addEventListener(events[i], window.__cdpChangeNotify, true);
+      }
+      try {
+        var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        if (!mediaQuery.matches) {
+          var lastAnimTime = 0;
+          var checkAnimations = function() {
+            if (window.__cdpChangePaused || !window.__cdpChangeDetectorInjected) {
+              return;
+            }
+            var animations = document.getAnimations();
+            var now = Date.now();
+            if (animations.length > 0 && now - lastAnimTime > 100) {
+              lastAnimTime = now;
+              window.__cdpChangeNotify();
+            }
+            var videos = document.querySelectorAll('video');
+            for (var i = 0; i < videos.length; i++) {
+              var v = videos[i];
+              if (!v.paused && !v.ended) {
+                window.__cdpChangeNotify();
+                break;
+              }
+            }
+            var canvases = document.querySelectorAll('canvas');
+            if (canvases.length > 0) {
+              window.__cdpChangeNotify();
+            }
+            if (window.__cdpChangeDetectorInjected && !window.__cdpChangePaused) {
+              requestAnimationFrame(checkAnimations);
+            }
+          };
+          window.__cdpCheckAnimations = checkAnimations;
+          requestAnimationFrame(checkAnimations);
+        }
+      } catch (e) {}
+    };
+  })();
+
+  function startPolling(tabId, params, sessionId) {
+    stopPolling(tabId);
+
+    var session = {
+      tabId: tabId,
+      sessionId: sessionId,
+      format: (params && params.format) || 'jpeg',
+      quality: (params && params.quality !== undefined) ? params.quality : 80,
+      maxWidth: (params && params.maxWidth) || 1920,
+      maxHeight: (params && params.maxHeight) || 1080,
+      everyNthFrame: (params && params.everyNthFrame) || 1,
+      frameCount: 0,
+      pendingAck: false,
+      stopped: false,
+      lastFrameData: null,
+      frameId: 0
+    };
+
+    State.setScreencastSession(tabId, session);
+
+    return injectChangeDetector(tabId).then(function() {
+      captureAndSendFrame(session);
+    });
+  }
+
+  function stopPolling(tabId) {
+    var session = State.getScreencastSession(tabId);
+    if (session) {
+      session.stopped = true;
+      State.deleteScreencastSession(tabId);
+      disableChangeNotify(tabId);
+    }
+  }
+
+  function ackFrame(tabId, ackSessionId) {
+    var session = State.getScreencastSession(tabId);
+    if (session) {
+      session.pendingAck = false;
+      captureAndSendFrame(session);
+    }
+  }
+
+  function injectChangeDetector(tabId) {
+    return chrome.debugger.sendCommand({ tabId: tabId }, 'Runtime.enable')
+      .then(function() {
+        Logger.info('[Screencast] Runtime enabled');
+        return chrome.debugger.sendCommand(
+          { tabId: tabId },
+          'Runtime.addBinding',
+          { name: '__notifyChange' }
+        );
+      })
+      .then(function() {
+        Logger.info('[Screencast] Binding __notifyChange added');
+        var scriptStr = CHANGE_DETECTOR_SCRIPT.toString();
+        return chrome.debugger.sendCommand(
+          { tabId: tabId },
+          'Runtime.evaluate',
+          { expression: '(' + scriptStr + ')()' }
+        );
+      })
+      .then(function(result) {
+        if (result.exceptionDetails) {
+          Logger.warn('[Screencast] Failed to inject change detector:', result.exceptionDetails);
+          return false;
+        }
+        Logger.info('[Screencast] Change detector injected');
+        return true;
+      })
+      .catch(function(error) {
+        Logger.warn('[Screencast] Failed to inject change detector:', error.message);
+        return false;
+      });
+  }
+
+  function disableChangeNotify(tabId) {
+    return chrome.debugger.sendCommand(
+      { tabId: tabId },
+      'Runtime.evaluate',
+      { expression: 'window.__cdpChangePaused = true;' }
+    ).catch(function() {});
+  }
+
+  function captureAndSendFrame(session) {
+    if (session.stopped) return;
+
+    session.frameCount++;
+    if (session.frameCount % session.everyNthFrame !== 0) return;
+
+    chrome.debugger.sendCommand(
+      { tabId: session.tabId },
+      'Page.captureScreenshot',
+      {
+        format: session.format,
+        quality: session.quality,
+        maxWidth: session.maxWidth,
+        maxHeight: session.maxHeight
+      }
+    ).then(function(result) {
+      if (session.stopped || !result || !result.data) return;
+
+      var data = result.data;
+      if (session.lastFrameData === data) {
+        return;
+      }
+      session.lastFrameData = data;
+
+      session.frameId++;
+      var frameId = session.frameId;
+
+      EventBuilder.send('Page.screencastFrame', {
+        data: data,
+        sessionId: session.sessionId,
+        frameId: frameId,
+        metadata: {
+          deviceWidth: session.maxWidth,
+          deviceHeight: session.maxHeight,
+          pageScaleFactor: 1,
+          offsetTop: 0,
+          offsetBottom: 0,
+          scrollOffsetX: 0,
+          scrollOffsetY: 0,
+          timestamp: Date.now()
+        }
+      }, session.sessionId);
+
+      session.pendingAck = true;
+    }).catch(function(error) {
+      if (!session.stopped) {
+        Logger.warn('[Screencast] Screenshot failed:', error.message);
+      }
+    });
+  }
+
+  function onNotify(tabId) {
+    var session = State.getScreencastSession(tabId);
+    if (session && !session.pendingAck && !session.stopped) {
+      captureAndSendFrame(session);
+    }
+  }
+
+  return {
+    startPolling: startPolling,
+    stopPolling: stopPolling,
+    ackFrame: ackFrame,
+    onNotify: onNotify
+  };
+})();

package/extension-new/manifest.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 3,
+  "name": "CDP Bridge",
+  "version": "2.0.0",
+  "description": "Chrome DevTools Protocol Bridge for Playwright/Puppeteer automation",
+  "permissions": [
+    "debugger",
+    "tabs",
+    "activeTab",
+    "scripting",
+    "storage",
+    "downloads"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "CDP Bridge",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["config-page-preview.html", "config-page.js"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

package/extension-new/popup.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      width: 300px;
+      padding: 15px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+    }
+    .status-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+    .status-dot.active {
+      background-color: #4CAF50;
+    }
+    .status-dot.inactive {
+      background-color: #9E9E9E;
+    }
+    .config-section {
+      margin-top: 15px;
+    }
+    .config-section label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: 500;
+    }
+    .config-section input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+    .config-section button {
+      margin-top: 10px;
+      padding: 8px 16px;
+      background-color: #2196F3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .config-section button:hover {
+      background-color: #1976D2;
+    }
+  </style>
+</head>
+<body>
+  <div class="status">
+    <div class="status-dot active" id="statusDot"></div>
+    <span id="statusText">已激活</span>
+  </div>
+  
+  <div class="config-section">
+    <label>WebSocket 地址</label>
+    <input type="text" id="wsAddress" placeholder="ws://localhost:9221/client">
+    <button id="saveBtn">保存</button>
+  </div>
+  
+  <script src="popup.js"></script>
+</body>
+</html>

package/extension-new/popup.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var statusDot = document.getElementById('statusDot');
+  var statusText = document.getElementById('statusText');
+  var wsAddressInput = document.getElementById('wsAddress');
+  var saveBtn = document.getElementById('saveBtn');
+
+  chrome.storage.local.get(['wsAddress'], function(result) {
+    if (result.wsAddress) {
+      wsAddressInput.value = result.wsAddress;
+    } else {
+      wsAddressInput.value = 'ws://localhost:9221/plugin';
+    }
+  });
+
+  saveBtn.addEventListener('click', function() {
+    var newAddress = wsAddressInput.value.trim();
+    if (newAddress) {
+      chrome.storage.local.set({ wsAddress: newAddress }, function() {
+        statusText.textContent = '已保存，正在重连...';
+        
+        chrome.runtime.sendMessage({ type: 'reconnect' }, function(response) {
+          if (response && response.success) {
+            statusText.textContent = '已激活';
+          } else {
+            statusText.textContent = '重连失败';
+          }
+        });
+      });
+    }
+  });
+
+  statusDot.classList.add('active');
+  statusText.textContent = '已激活';
+});

package/extension-new/utils/config.js

@@ -0,0 +1,20 @@
+var Config = {
+  WS_URL: 'ws://localhost:9221/plugin',
+  RECONNECT_DELAY: 3000,
+  DEBUGGER_VERSION: '1.3',
+  HEARTBEAT_INTERVAL: 25000,
+  SCREENCAST_NOTIFY_THROTTLE: 16,
+  BADGE_COLORS: {
+    ON: '#4CAF50',
+    ERR: '#F44336',
+    OFF: '#9E9E9E',
+    WAIT: '#FF9800'
+  },
+  DEFAULT_BROWSER_CONTEXT: 'default',
+  DEBUG: true,
+  getWsUrl: function(callback) {
+    chrome.storage.local.get(['wsAddress'], function(result) {
+      callback(result.wsAddress || Config.WS_URL);
+    });
+  }
+};