cdp-tunnel 1.0.0

package/extension-new/config-page.js

@@ -0,0 +1,318 @@
+(function() {
+  var state = {
+    connected: false,
+    serverAddress: 'ws://localhost:9221/plugin',
+    cdpClients: [],
+    attachedPages: [],
+    logs: [],
+    startTime: Date.now(),
+    cdpCommandCount: 0
+  };
+
+  var elements = {
+    statusBadge: document.getElementById('statusBadge'),
+    statusText: document.getElementById('statusText'),
+    activeConnections: document.getElementById('activeConnections'),
+    controlledPages: document.getElementById('controlledPages'),
+    cdpCommands: document.getElementById('cdpCommands'),
+    uptime: document.getElementById('uptime'),
+    clientCount: document.getElementById('clientCount'),
+    pageCount: document.getElementById('pageCount'),
+    clientList: document.getElementById('clientList'),
+    pageList: document.getElementById('pageList'),
+    activityLog: document.getElementById('activityLog'),
+    serverAddress: document.getElementById('serverAddress'),
+    connectBtn: document.getElementById('connectBtn'),
+    refreshBtn: document.getElementById('refreshBtn'),
+    toast: document.getElementById('toast')
+  };
+
+  function showToast(message, type) {
+    type = type || 'success';
+    var icon = type === 'success' ? '✓' : type === 'error' ? '✕' : 'ℹ';
+    elements.toast.querySelector('.icon').textContent = icon;
+    elements.toast.querySelector('.message').textContent = message;
+    elements.toast.className = 'toast show ' + type;
+    setTimeout(function() {
+      elements.toast.className = 'toast';
+    }, 2000);
+  }
+
+  function updateStatus(connected) {
+    state.connected = connected;
+    if (connected) {
+      elements.statusBadge.classList.remove('disconnected');
+      elements.statusText.textContent = '已连接';
+    } else {
+      elements.statusBadge.classList.add('disconnected');
+      elements.statusText.textContent = '未连接';
+    }
+  }
+
+  function updateStats() {
+    elements.activeConnections.textContent = state.cdpClients.length;
+    elements.controlledPages.textContent = state.attachedPages.length;
+    elements.cdpCommands.textContent = state.cdpCommandCount;
+    
+    var elapsed = Math.floor((Date.now() - state.startTime) / 1000);
+    if (elapsed < 60) {
+      elements.uptime.textContent = elapsed + 's';
+    } else if (elapsed < 3600) {
+      elements.uptime.textContent = Math.floor(elapsed / 60) + 'm';
+    } else {
+      elements.uptime.textContent = Math.floor(elapsed / 3600) + 'h ' + Math.floor((elapsed % 3600) / 60) + 'm';
+    }
+    
+    elements.clientCount.textContent = state.cdpClients.length + ' 个';
+    elements.pageCount.textContent = state.attachedPages.length + ' 个';
+  }
+
+  function renderClients() {
+    if (state.cdpClients.length === 0) {
+      elements.clientList.innerHTML = 
+        '<div class="empty-state">' +
+          '<div class="icon">🔌</div>' +
+          '<div class="title">暂无客户端</div>' +
+          '<div class="desc">等待 Playwright/Puppeteer 连接...</div>' +
+        '</div>';
+      return;
+    }
+
+    var html = '';
+    state.cdpClients.forEach(function(client) {
+      var clientId = client.id || '';
+      var shortId = clientId.length > 25 ? clientId.substring(0, 25) + '...' : clientId;
+      var connectedAt = client.connectedAt ? new Date(client.connectedAt).toLocaleTimeString() : 'N/A';
+      
+      html += 
+        '<div class="connection-item active">' +
+          '<div class="status-indicator online"></div>' +
+          '<div class="connection-info">' +
+            '<div class="connection-header">' +
+              '<span class="connection-name" title="' + clientId + '">' + shortId + '</span>' +
+              '<span class="connection-tag playwright">CDP</span>' +
+            '</div>' +
+            '<div class="connection-details">' +
+              '<span>🔗 Playwright/Puppeteer</span>' +
+              '<span>⏰ ' + connectedAt + '</span>' +
+            '</div>' +
+          '</div>' +
+        '</div>';
+    });
+    elements.clientList.innerHTML = html;
+  }
+
+  function renderPages() {
+    if (state.attachedPages.length === 0) {
+      elements.pageList.innerHTML = 
+        '<div class="empty-state">' +
+          '<div class="icon">📄</div>' +
+          '<div class="title">暂无页面</div>' +
+          '<div class="desc">客户端创建页面后会显示在这里</div>' +
+        '</div>';
+      return;
+    }
+
+    var html = '';
+    state.attachedPages.forEach(function(page) {
+      var pageUrl = page.url || '';
+      var displayUrl = pageUrl.length > 35 ? pageUrl.substring(0, 35) + '...' : pageUrl;
+      var pageTitle = page.title || 'Untitled';
+      
+      html += 
+        '<div class="connection-item active">' +
+          '<div class="status-indicator online"></div>' +
+          '<div class="connection-info">' +
+            '<div class="connection-header">' +
+              '<span class="connection-name" title="' + pageTitle + '">' + pageTitle + '</span>' +
+              '<span class="connection-tag cdp">Tab #' + page.tabId + '</span>' +
+            '</div>' +
+            '<div class="connection-details">' +
+              '<span title="' + pageUrl + '">' + displayUrl + '</span>' +
+            '</div>' +
+          '</div>' +
+          '<div class="connection-actions">' +
+            '<button class="action-btn" title="切换到此标签页" data-tabid="' + page.tabId + '">👁️</button>' +
+          '</div>' +
+        '</div>';
+    });
+    elements.pageList.innerHTML = html;
+  }
+
+  function renderLogs() {
+    if (state.logs.length === 0) {
+      elements.activityLog.innerHTML = 
+        '<div class="empty-state">' +
+          '<div class="icon">📋</div>' +
+          '<div class="title">暂无日志</div>' +
+          '<div class="desc">活动将显示在这里</div>' +
+        '</div>';
+      return;
+    }
+
+    var html = '';
+    state.logs.slice(0, 20).forEach(function(log) {
+      html += 
+        '<div class="log-item">' +
+          '<div class="log-icon ' + log.type + '">' + log.icon + '</div>' +
+          '<div class="log-content">' +
+            '<div class="log-message">' + log.message + '</div>' +
+            '<div class="log-time">' + log.time + '</div>' +
+          '</div>' +
+        '</div>';
+    });
+    elements.activityLog.innerHTML = html;
+  }
+
+  function addLog(type, message) {
+    var icons = {
+      connect: '✓',
+      disconnect: '✕',
+      action: '⚡',
+      page: '📄'
+    };
+    
+    state.logs.unshift({
+      type: type,
+      icon: icons[type] || '•',
+      message: message,
+      time: new Date().toLocaleTimeString()
+    });
+    
+    renderLogs();
+  }
+
+  function fetchState() {
+    return new Promise(function(resolve) {
+      try {
+        if (typeof chrome !== 'undefined' && chrome.runtime) {
+          chrome.runtime.sendMessage({ type: 'getState' }, function(response) {
+            if (response) {
+              state.connected = response.connected || false;
+              state.serverAddress = response.serverAddress || state.serverAddress;
+              state.cdpClients = response.cdpClients || [];
+              state.attachedPages = response.attachedPages || [];
+              elements.serverAddress.value = state.serverAddress;
+              updateStatus(state.connected);
+              updateStats();
+              renderClients();
+              renderPages();
+              resolve(true);
+              return;
+            }
+            resolve(false);
+          });
+          return;
+        }
+      } catch (e) {
+        console.error('[Config] Failed to fetch state:', e);
+      }
+      
+      updateStatus(false);
+      updateStats();
+      renderClients();
+      renderPages();
+      resolve(false);
+    });
+  }
+
+  function saveAndConnect() {
+    var address = elements.serverAddress.value.trim();
+    
+    if (!address) {
+      showToast('请输入服务器地址', 'error');
+      return;
+    }
+    
+    state.serverAddress = address;
+    
+    if (typeof chrome !== 'undefined' && chrome.storage) {
+      chrome.storage.local.set({ wsAddress: address });
+    }
+    
+    if (typeof chrome !== 'undefined' && chrome.runtime) {
+      try {
+        chrome.runtime.sendMessage({ 
+          type: 'connect',
+          serverAddress: address 
+        });
+        showToast('正在连接...');
+      } catch (e) {
+        showToast('连接请求发送失败', 'error');
+      }
+    } else {
+      showToast('请在扩展环境中使用', 'error');
+    }
+  }
+
+  function refresh() {
+    fetchState();
+    showToast('已刷新');
+  }
+
+  function init() {
+    if (typeof chrome !== 'undefined' && chrome.storage) {
+      chrome.storage.local.get('wsAddress', function(result) {
+        if (result.wsAddress) {
+          state.serverAddress = result.wsAddress;
+          elements.serverAddress.value = result.wsAddress;
+        }
+      });
+    }
+    
+    fetchState();
+    
+    setInterval(fetchState, 5000);
+    setInterval(updateStats, 1000);
+  }
+
+  elements.connectBtn.addEventListener('click', saveAndConnect);
+  elements.refreshBtn.addEventListener('click', refresh);
+  
+  elements.pageList.addEventListener('click', function(e) {
+    var btn = e.target.closest('.action-btn');
+    if (btn) {
+      var tabId = parseInt(btn.dataset.tabid);
+      if (tabId) {
+        chrome.tabs.update(tabId, { active: true });
+        chrome.tabs.get(tabId, function(tab) {
+          if (tab && tab.windowId) {
+            chrome.windows.update(tab.windowId, { focused: true });
+          }
+        });
+      }
+    }
+  });
+
+  if (typeof chrome !== 'undefined' && chrome.runtime) {
+    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+      if (message.type === 'stateUpdate') {
+        var wasConnected = state.connected;
+        state.connected = message.connected;
+        state.cdpClients = message.cdpClients || [];
+        state.attachedPages = message.attachedPages || [];
+        updateStatus(state.connected);
+        updateStats();
+        renderClients();
+        renderPages();
+        
+        if (state.connected && !wasConnected) {
+          addLog('connect', '已连接到服务器');
+        } else if (!state.connected && wasConnected) {
+          addLog('disconnect', '已断开连接');
+        }
+        
+        if (state.cdpClients.length > 0) {
+          addLog('connect', state.cdpClients.length + ' 个 CDP 客户端在线');
+        }
+        if (state.attachedPages.length > 0) {
+          addLog('page', state.attachedPages.length + ' 个页面受控');
+        }
+      } else if (message.type === 'log') {
+        addLog(message.logType, message.message);
+      }
+    });
+  }
+
+  init();
+})();

package/extension-new/core/debugger.js

@@ -0,0 +1,310 @@
+var DebuggerManager = (function() {
+  var INTERNAL_URL_BLOCK_SCRIPT = `
+(function() {
+  if (window.__internalUrlBlockInjected) return;
+  window.__internalUrlBlockInjected = true;
+  
+  var blockedProtocols = ['bitbrowser:', 'chrome:', 'edge:', 'chrome-extension:'];
+  
+  function isInternalUrl(url) {
+    if (!url) return false;
+    for (var i = 0; i < blockedProtocols.length; i++) {
+      if (url.startsWith(blockedProtocols[i])) {
+        return true;
+      }
+    }
+    return false;
+  }
+  
+  // 拦截 iframe 创建
+  var originalCreateElement = document.createElement;
+  document.createElement = function(tagName) {
+    var element = originalCreateElement.call(document, tagName);
+    if (tagName.toLowerCase() === 'iframe') {
+      var originalSetAttribute = element.setAttribute;
+      element.setAttribute = function(name, value) {
+        if (name.toLowerCase() === 'src' && isInternalUrl(value)) {
+          console.warn('[CDP-BLOCK] Blocked iframe src:', value);
+          return;
+        }
+        return originalSetAttribute.call(this, name, value);
+      };
+      
+      Object.defineProperty(element, 'src', {
+        set: function(value) {
+          if (isInternalUrl(value)) {
+            console.warn('[CDP-BLOCK] Blocked iframe src via property:', value);
+            return;
+          }
+          originalSetAttribute.call(this, 'src', value);
+        },
+        get: function() {
+          return element.getAttribute('src');
+        }
+      });
+    }
+    return element;
+  };
+  
+  // 拦截 window.open
+  var originalWindowOpen = window.open;
+  window.open = function(url) {
+    if (isInternalUrl(url)) {
+      console.warn('[CDP-BLOCK] Blocked window.open:', url);
+      return null;
+    }
+    return originalWindowOpen.apply(this, arguments);
+  };
+  
+  // 拦截 location 修改
+  var locationDescriptor = Object.getOwnPropertyDescriptor(window, 'location');
+  Object.defineProperty(window, 'location', {
+    set: function(value) {
+      if (isInternalUrl(String(value))) {
+        console.warn('[CDP-BLOCK] Blocked location change:', value);
+        return;
+      }
+      locationDescriptor.set.call(window, value);
+    },
+    get: function() {
+      return locationDescriptor.get.call(window);
+    }
+  });
+  
+  console.log('[CDP-BLOCK] Internal URL block script injected');
+})();
+`;
+
+  function attach(tabId) {
+    if (tabId == null) {
+      return Promise.resolve(false);
+    }
+
+    return ensureTabExists(tabId).then(function(exists) {
+      if (!exists) {
+        Logger.warn('[Debugger] Tab', tabId, 'does not exist');
+        State.persist(null, false);
+        return false;
+      }
+
+      return getActualAttachState(tabId).then(function(isAttached) {
+        if (isAttached) {
+          Logger.info('[Debugger] Tab', tabId, 'already attached, detaching first...');
+          return chrome.debugger.detach({ tabId: tabId }).catch(function() {}).then(function() {
+            return doAttach(tabId);
+          });
+        }
+        return doAttach(tabId);
+      });
+    });
+  }
+
+  function doAttach(tabId) {
+    return chrome.debugger.attach({ tabId: tabId }, Config.DEBUGGER_VERSION)
+      .then(function() {
+        Logger.info('[Debugger] Attached to tab', tabId);
+        State.addAttachedTab(tabId);
+        State.setCurrentTabId(tabId);
+        State.persist(tabId, true);
+        AutomationBadge.inject(tabId);
+        
+        // 注入内部URL拦截脚本
+        return injectInternalUrlBlocker(tabId);
+      })
+      .then(function() {
+        return true;
+      })
+      .catch(function(error) {
+        Logger.error('[Debugger] Failed to attach to tab', tabId, ':', error.message);
+        return false;
+      });
+  }
+
+  function injectInternalUrlBlocker(tabId) {
+    return chrome.debugger.sendCommand(
+      { tabId: tabId },
+      'Runtime.evaluate',
+      { 
+        expression: INTERNAL_URL_BLOCK_SCRIPT,
+        runImmediately: true
+      }
+    ).then(function(result) {
+      if (result.exceptionDetails) {
+        Logger.warn('[Debugger] Failed to inject internal URL blocker:', result.exceptionDetails);
+      } else {
+        Logger.info('[Debugger] Internal URL blocker injected');
+      }
+    }).catch(function(e) {
+      Logger.warn('[Debugger] Failed to inject internal URL blocker:', e.message);
+    });
+  }
+
+  function detach(tabId) {
+    if (tabId == null) {
+      return Promise.resolve();
+    }
+
+    Logger.info('[Debugger] Attempting to detach from tab', tabId);
+
+    return chrome.debugger.detach({ tabId: tabId })
+      .then(function() {
+        Logger.info('[Debugger] Detached from tab', tabId);
+        State.removeAttachedTab(tabId);
+        AutomationBadge.remove(tabId);
+        Screencast.stopPolling(tabId);
+        if (State.getCurrentTabId() === tabId) {
+          State.persist(null, false);
+        }
+      })
+      .catch(function(error) {
+        Logger.error('[Debugger] Failed to detach from tab', tabId, ':', error.message);
+        State.removeAttachedTab(tabId);
+        AutomationBadge.remove(tabId);
+      });
+  }
+
+  function isAttached(tabId) {
+    return getActualAttachState(tabId);
+  }
+
+  function getActualAttachState(tabId) {
+    return chrome.debugger.getTargets().then(function(targets) {
+      var target = targets.find(function(t) {
+        return t.tabId === tabId;
+      });
+      return target ? target.attached : false;
+    });
+  }
+
+  function ensureTabExists(tabId) {
+    return new Promise(function(resolve) {
+      chrome.tabs.get(tabId, function(tab) {
+        resolve(!!(tab && tab.id));
+      });
+    }).catch(function() {
+      return false;
+    });
+  }
+
+  function handleDebuggerEvent(source, method, params) {
+    if (!State.isTabAttached(source.tabId)) {
+      return;
+    }
+
+    if (!State.hasConnectedClient()) {
+      return;
+    }
+
+    var sessionId = State.findSessionByTabId(source.tabId);
+    Logger.info('[Event] method=' + method + ' tabId=' + source.tabId + ' sessionId=' + (sessionId || 'null'));
+    
+    if (method === 'Runtime.executionContextCreated' && params && params.context) {
+      var context = params.context;
+      var isPlaywrightContext = context.name && context.name.indexOf('__playwright') === 0;
+      var isDefaultContext = context.auxData && context.auxData.isDefault;
+      
+      if (!isPlaywrightContext && !isDefaultContext) {
+        Logger.info('[Event] Filtering non-Playwright Runtime.executionContextCreated:', context.name);
+        return;
+      }
+      
+      // 在新的执行上下文中也注入拦截脚本
+      if (isDefaultContext) {
+        chrome.debugger.sendCommand(
+          { tabId: source.tabId },
+          'Runtime.evaluate',
+          { 
+            expression: INTERNAL_URL_BLOCK_SCRIPT,
+            contextId: context.id,
+            runImmediately: true
+          }
+        ).catch(function() {});
+      }
+    }
+    
+    if (method === 'Page.frameRequestedNavigation' && params) {
+      var url = params.url || '';
+      var reason = params.reason || '';
+      var disposition = params.disposition || '';
+      var frameId = params.frameId || '';
+      Logger.warn('[NAVIGATION] frameRequestedNavigation:');
+      Logger.warn('  URL:', url);
+      Logger.warn('  Reason:', reason);
+      Logger.warn('  Disposition:', disposition);
+      Logger.warn('  FrameId:', frameId);
+      
+      if (url.startsWith('chrome://') || 
+          url.startsWith('bitbrowser://') || 
+          url.startsWith('edge://') ||
+          url.startsWith('chrome-extension://')) {
+        Logger.error('[NAVIGATION] ⚠️ 检测到导航到内部页面，尝试阻止!');
+        Logger.error('[NAVIGATION] 目标URL:', url);
+        
+        // 尝试方法1: 停止页面加载
+        chrome.debugger.sendCommand(
+          { tabId: source.tabId },
+          'Page.stopLoading',
+          {}
+        ).then(function() {
+          Logger.info('[NAVIGATION] 已发送 Page.stopLoading 命令');
+        }).catch(function(e) {
+          Logger.error('[NAVIGATION] Page.stopLoading 失败:', e.message);
+        });
+        
+        // 尝试方法2: 获取当前页面URL并导航回去
+        chrome.tabs.get(source.tabId, function(tab) {
+          if (tab && tab.url && !tab.url.startsWith('bitbrowser://')) {
+            Logger.info('[NAVIGATION] 尝试导航回原页面:', tab.url);
+            setTimeout(function() {
+              chrome.debugger.sendCommand(
+                { tabId: source.tabId },
+                'Page.navigate',
+                { url: tab.url }
+              ).then(function() {
+                Logger.info('[NAVIGATION] 已导航回原页面');
+              }).catch(function(e) {
+                Logger.error('[NAVIGATION] Page.navigate 失败:', e.message);
+              });
+            }, 100);
+          }
+        });
+        
+        // 不转发这个导航事件给客户端
+        Logger.warn('[NAVIGATION] 阻止转发导航事件到客户端');
+        return;
+      }
+    }
+    
+    EventBuilder.send(method, params, sessionId);
+  }
+
+  function handleDetach(source, reason) {
+    Logger.info('[Debugger] Detached from tab', source.tabId, ', reason:', reason);
+    State.removeAttachedTab(source.tabId);
+    Screencast.stopPolling(source.tabId);
+    AutomationBadge.remove(source.tabId);
+
+    var sessionId = State.findSessionByTabId(source.tabId);
+    if (sessionId) {
+      var targetId = State.getTargetIdBySession(sessionId);
+      EventBuilder.send('Target.detachedFromTarget', {
+        sessionId: sessionId,
+        targetId: targetId
+      });
+      State.unmapSession(sessionId);
+    }
+
+    if (State.getCurrentTabId() === source.tabId) {
+      State.persist(null, false);
+    }
+  }
+
+  return {
+    attach: attach,
+    detach: detach,
+    isAttached: isAttached,
+    getActualAttachState: getActualAttachState,
+    handleDebuggerEvent: handleDebuggerEvent,
+    handleDetach: handleDetach
+  };
+})();