cdp-tunnel 2.9.0 → 2.9.2

package/extension-new/background.js

@@ -338,6 +338,15 @@ importScripts('features/automation-badge.js');
     });
   });
 
+  function getCdpAddress(wsUrl, mode) {
+    var match = (wsUrl || '').match(/:\/\/([^\/]+):(\d+)/);
+    if (!match) return '';
+    var host = match[1];
+    var port = parseInt(match[2], 10);
+    if (mode === 'takeover') port += 1;
+    return 'http://' + host + ':' + port;
+  }
+
   chrome.runtime.onInstalled.addListener(function(details) {
     Logger.info('[Runtime] Extension installed/updated:', details.reason);
     State.persist(null, false);
@@ -466,14 +475,15 @@ importScripts('features/automation-badge.js');
               status = 'error';
             }
           }
-          return { id: conn.id, tag: conn.tag, url: conn.url, status: status, attachedCount: attachedCount };
+          var cdpAddress = getCdpAddress(conn.url, conn.mode || 'create');
+          return { id: conn.id, tag: conn.tag, url: conn.url, mode: conn.mode || 'create', status: status, attachedCount: attachedCount, cdpAddress: cdpAddress };
         });
         sendResponse({ connections: list });
       });
       return true;
     } else if (message.type === 'add-connection') {
-      Logger.info('[Runtime] Adding connection:', message.tag, message.url);
-      Config.addConnection({ tag: message.tag, url: message.url }, function(conn) {
+      Logger.info('[Runtime] Adding connection:', message.tag, message.url, 'mode:', message.mode);
+      Config.addConnection({ tag: message.tag, url: message.url, mode: message.mode || 'create' }, function(conn) {
         if (conn && conn.enabled) {
           ConnectionManager.addConnection(conn);
           var entry = ConnectionManager.getConnection(conn.id);

package/extension-new/config-page-preview.html

@@ -283,6 +283,37 @@
       font-family: 'Monaco', 'Menlo', monospace;
     }
 
+    .conn-config-cdp {
+      font-size: 11px;
+      color: #374151;
+      font-family: 'Monaco', 'Menlo', monospace;
+      margin-top: 2px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .conn-config-cdp .cdp-addr {
+      color: #2563eb;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .conn-config-cdp .btn-copy-cdp {
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0 4px;
+      opacity: 0.5;
+      transition: opacity 0.2s;
+      line-height: 1;
+    }
+
+    .conn-config-cdp .btn-copy-cdp:hover {
+      opacity: 1;
+    }
+
     .conn-config-item .btn-delete {
       padding: 4px 10px;
       border: none;
@@ -814,6 +845,10 @@
             <div class="add-conn-form">
               <input type="text" class="input-tag" id="newConnTag" placeholder="名称" value="local">
               <input type="text" class="input-url" id="newConnUrl" placeholder="ws://localhost:9221/plugin" value="ws://localhost:9221/plugin">
+              <select id="inputMode" style="padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none;transition:border-color 0.2s;flex-shrink:0;">
+                <option value="create">创建模式</option>
+                <option value="takeover">接管模式</option>
+              </select>
               <button class="btn btn-primary btn-sm" id="addConnBtn">添加连接</button>
             </div>
           </div>

package/extension-new/config-page.js

@@ -27,6 +27,7 @@
     newConnTag: document.getElementById('newConnTag'),
     newConnUrl: document.getElementById('newConnUrl'),
     addConnBtn: document.getElementById('addConnBtn'),
+    inputMode: document.getElementById('inputMode'),
     autoMuteToggle: document.getElementById('autoMuteToggle'),
     pluginIdDisplay: document.getElementById('pluginIdDisplay')
   };
@@ -94,13 +95,15 @@
     connections.forEach(function(conn) {
       var statusClass = getStatusClass(conn.id, conn.enabled);
       var isActive = conn.enabled && statusClass === 'connected';
+      var cdpAddr = getCdpAddress(conn.url, conn.mode);
       html +=
         '<div class="conn-config-item' + (isActive ? ' active' : '') + '" data-id="' + conn.id + '">' +
           '<input type="checkbox" class="conn-toggle" data-id="' + conn.id + '"' + (conn.enabled ? ' checked' : '') + ' title="启用/禁用">' +
           '<span class="status-dot ' + statusClass + '" title="' + statusClass + '"></span>' +
           '<div class="conn-config-info">' +
-            '<div class="conn-config-tag">' + escapeHtml(conn.tag) + '</div>' +
-            '<div class="conn-config-url" title="' + escapeAttr(conn.url) + '">' + escapeHtml(conn.url) + '</div>' +
+            '<div class="conn-config-tag">' + (conn.mode === 'takeover' ? '🔗 ' : '🆕 ') + escapeHtml(conn.tag) + '</div>' +
+            '<div class="conn-config-url" title="' + escapeAttr(conn.url) + '">WS:  ' + escapeHtml(conn.url) + '</div>' +
+            (cdpAddr ? '<div class="conn-config-cdp">CDP: <span class="cdp-addr" data-cdp="' + escapeAttr(cdpAddr) + '">' + escapeHtml(cdpAddr) + '</span> <button class="btn-copy-cdp" data-cdp="' + escapeAttr(cdpAddr) + '" title="复制 CDP 地址">📋</button></div>' : '') +
           '</div>' +
           '<button class="btn-delete" data-id="' + conn.id + '" title="删除">删除</button>' +
         '</div>';
@@ -296,6 +299,15 @@
     return (s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 
+  function getCdpAddress(wsUrl, mode) {
+    var match = (wsUrl || '').match(/:\/\/([^\/]+):(\d+)/);
+    if (!match) return '';
+    var host = match[1];
+    var port = parseInt(match[2], 10);
+    if (mode === 'takeover') port += 1;
+    return 'http://' + host + ':' + port;
+  }
+
   function init() {
     if (typeof chrome !== 'undefined' && chrome.storage) {
       chrome.storage.local.get(['autoMute'], function(result) {
@@ -333,6 +345,7 @@
   elements.addConnBtn.addEventListener('click', function() {
     var tag = elements.newConnTag.value.trim();
     var url = elements.newConnUrl.value.trim();
+    var mode = elements.inputMode.value || 'create';
 
     if (!tag) {
       showToast('请输入连接名称', 'error');
@@ -344,16 +357,18 @@
     }
 
     if (typeof chrome !== 'undefined' && chrome.runtime) {
-      chrome.runtime.sendMessage({ type: 'add-connection', tag: tag, url: url }, function() {
+      chrome.runtime.sendMessage({ type: 'add-connection', tag: tag, url: url, mode: mode }, function() {
         elements.newConnTag.value = '';
         elements.newConnUrl.value = '';
+        elements.inputMode.value = 'create';
         loadAndRenderConnections();
         showToast('连接已添加');
       });
     } else if (typeof Config !== 'undefined') {
-      Config.addConnection({ tag: tag, url: url }, function() {
+      Config.addConnection({ tag: tag, url: url, mode: mode }, function() {
         elements.newConnTag.value = '';
         elements.newConnUrl.value = '';
+        elements.inputMode.value = 'create';
         loadAndRenderConnections();
         showToast('连接已添加');
       });
@@ -361,6 +376,17 @@
   });
 
   elements.connConfigList.addEventListener('click', function(e) {
+    var copyBtn = e.target.closest('.btn-copy-cdp');
+    if (copyBtn) {
+      var addr = copyBtn.dataset.cdp;
+      if (addr) {
+        navigator.clipboard.writeText(addr).then(function() {
+          showToast('已复制: ' + addr);
+        });
+      }
+      return;
+    }
+
     var toggleEl = e.target.closest('.conn-toggle');
     if (toggleEl) {
       var connId = toggleEl.dataset.id;

package/extension-new/core/connection-manager.js

@@ -23,7 +23,7 @@ var ConnectionManager = (function() {
       return;
     }
 
-    var state = new ConnectionState(config.id);
+    var state = new ConnectionState(config.id, config.mode);
     var wsManager = new WebSocketConnection(config.id, state, config);
 
     _connections.set(config.id, {

package/extension-new/core/connection-state.js

@@ -1,5 +1,6 @@
-function ConnectionState(connectionId) {
+function ConnectionState(connectionId, mode) {
   this.connectionId = connectionId;
+  this.mode = mode || 'create';
   this.ws = null;
   this.reconnectTimer = null;
   this._hasConnectedClient = false;

package/extension-new/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "CDP Bridge",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "Chrome DevTools Protocol Bridge for Playwright/Puppeteer automation",
   "permissions": [
     "debugger",

package/extension-new/popup.html

@@ -23,6 +23,12 @@ body { width: 320px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
 .conn-tag { font-weight: 600; font-size: 13px; color: #e0e0e0; }
 .conn-url { color: #888; font-size: 11px; font-family: 'SF Mono', Menlo, monospace; word-break: break-all; margin-top: 3px; line-height: 1.4; }
 
+.conn-cdp { color: #4a9eff; font-size: 11px; font-family: 'SF Mono', Menlo, monospace; margin-top: 2px; display: flex; align-items: center; gap: 2px; }
+.conn-cdp-label { color: #888; }
+.conn-cdp-value { font-weight: 600; }
+.conn-cdp-copy { background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 2px; opacity: 0.5; transition: opacity 0.15s; }
+.conn-cdp-copy:hover { opacity: 1; }
+
 .empty-hint { text-align: center; padding: 16px 10px; color: #777; font-size: 12px; }
 
 .stats-row { display: flex; gap: 16px; padding: 8px 0; font-size: 12px; color: #aaa; }

package/extension-new/popup.js

@@ -14,6 +14,15 @@
     });
   }
 
+  function getCdpAddress(wsUrl, mode) {
+    var match = (wsUrl || '').match(/:\/\/([^\/]+):(\d+)/);
+    if (!match) return '';
+    var host = match[1];
+    var port = parseInt(match[2], 10);
+    if (mode === 'takeover') port += 1;
+    return 'http://' + host + ':' + port;
+  }
+
   function renderConnectionList(connections) {
     connectionList.innerHTML = '';
 
@@ -32,19 +41,53 @@
       var dot = document.createElement('span');
       dot.className = 'conn-dot ' + conn.status;
 
+      var modeIcon = conn.mode === 'takeover' ? '🔗 ' : '🆕 ';
+
       var tag = document.createElement('span');
       tag.className = 'conn-tag';
-      tag.textContent = conn.tag;
+      tag.textContent = modeIcon + conn.tag;
 
       header.appendChild(dot);
       header.appendChild(tag);
 
       var url = document.createElement('div');
       url.className = 'conn-url';
-      url.textContent = conn.url;
+      url.textContent = 'WS:  ' + conn.url;
 
       item.appendChild(header);
       item.appendChild(url);
+
+      var cdpAddr = conn.cdpAddress || getCdpAddress(conn.url, conn.mode);
+      if (cdpAddr) {
+        var cdpRow = document.createElement('div');
+        cdpRow.className = 'conn-cdp';
+
+        var cdpLabel = document.createElement('span');
+        cdpLabel.className = 'conn-cdp-label';
+        cdpLabel.textContent = 'CDP: ';
+
+        var cdpValue = document.createElement('span');
+        cdpValue.className = 'conn-cdp-value';
+        cdpValue.textContent = cdpAddr;
+
+        var copyBtn = document.createElement('button');
+        copyBtn.className = 'conn-cdp-copy';
+        copyBtn.textContent = '📋';
+        copyBtn.title = '复制';
+        copyBtn.addEventListener('click', function(ev) {
+          ev.stopPropagation();
+          navigator.clipboard.writeText(cdpAddr).then(function() {
+            copyBtn.textContent = '✓';
+            setTimeout(function() { copyBtn.textContent = '📋'; }, 1200);
+          });
+        });
+
+        cdpRow.appendChild(cdpLabel);
+        cdpRow.appendChild(cdpValue);
+        cdpRow.appendChild(copyBtn);
+        item.appendChild(cdpRow);
+      }
+
       connectionList.appendChild(item);
     });
   }

package/extension-new/utils/config.js

@@ -58,6 +58,7 @@ var Config = {
         id: 'conn_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6),
         tag: opts.tag || 'unnamed',
         url: opts.url || '',
+        mode: opts.mode || 'create',
         enabled: opts.enabled !== undefined ? opts.enabled : true
       };
       connections.push(conn);
@@ -91,6 +92,7 @@ var Config = {
         if (c.id === id) {
           if (updates.tag !== undefined) c.tag = updates.tag;
           if (updates.url !== undefined) c.url = updates.url;
+          if (updates.mode !== undefined) c.mode = updates.mode;
         }
       });
       Config.setConnections(connections, callback);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "Bridge Chrome's debugger API to WebSocket — control your existing browser with Playwright/Puppeteer via CDP",
   "main": "server/proxy-server.js",
   "bin": "./cli/index.js",