cdp-tunnel 3.5.0 → 3.6.0

package/extension-new/cdp/handler/special.js

@@ -20,6 +20,15 @@ var SpecialHandler = (function() {
     return (wm && wm.config && wm.config.tag) || null;
   }
 
+  // 从 state 读取 key 名称（用作分组名），doGroup 等分组操作调用
+  function _getGroupName(clientId, context) {
+    var state = context ? context._state : null;
+    if (state && clientId && state.getGroupNameForClient) {
+      return state.getGroupNameForClient(clientId);
+    }
+    return null;
+  }
+
   function muteTabIfNeeded(tabId) {
     Config.getAutoMute(function(enabled) {
       if (!enabled) return;
@@ -297,7 +306,7 @@ var SpecialHandler = (function() {
         return;
       }
     }
-    var baseName = CDPUtils.getGroupBaseName(groupClientId, _getConnectionTag(context), context ? context.mode : null);
+    var baseName = CDPUtils.getGroupBaseName(groupClientId, _getConnectionTag(context), context ? context.mode : null, _getGroupName(groupClientId, context));
 
     Logger.info('[TabGroup] Grouping tab immediately for:', baseName);
     doGroup(tabId, groupClientId, baseName, 0, callback, context);
@@ -465,7 +474,8 @@ var SpecialHandler = (function() {
     chrome.tabs.query({ groupId: groupId }, function(tabs) {
       if (chrome.runtime.lastError || !tabs) return;
 
-      var baseName = CDPUtils.getGroupBaseName(clientId, connectionTag, mode);
+      var groupName = (state && state.getGroupNameForClient) ? state.getGroupNameForClient(clientId) : null;
+      var baseName = CDPUtils.getGroupBaseName(clientId, connectionTag, mode, groupName);
       var newName = baseName + ' (' + tabs.length + ')';
 
       if (chrome.runtime.lastError || tabs.length === 0) return;

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

@@ -308,6 +308,15 @@ ConnectionState.prototype.getTagForClient = function(clientId) {
   return this.clientIdToTag.get(clientId) || null;
 };
 
+ConnectionState.prototype.setGroupNameForClient = function(clientId, groupName) {
+  if (!this.clientIdToGroupName) this.clientIdToGroupName = new Map();
+  if (clientId && groupName) this.clientIdToGroupName.set(clientId, groupName);
+};
+
+ConnectionState.prototype.getGroupNameForClient = function(clientId) {
+  return (this.clientIdToGroupName && this.clientIdToGroupName.get(clientId)) || null;
+};
+
 ConnectionState.prototype.addCDPClient = function(clientId, info) {
   var exists = false;
   for (var i = 0; i < this.cdpClients.length; i++) {

package/extension-new/core/websocket.js

@@ -244,7 +244,12 @@ var WebSocketConnection = (function() {
         if (message.__connectionTag) {
           self.state.setTagForClient(message.clientId, message.__connectionTag);
         }
-        self._createGroupForClient(message.clientId, message.__mode);
+        // 存 groupName，供 doGroup 等后续分组操作使用
+        if (message.__groupName) {
+          self.state.setGroupNameForClient(message.clientId, message.__groupName);
+        }
+        // __groupName 来自 API Key 名称，用作 Chrome 分组名（一眼看出是谁的浏览器）
+        self._createGroupForClient(message.clientId, message.__mode, message.__groupName);
         self._broadcastStateUpdate();
         break;
 
@@ -555,7 +560,7 @@ var WebSocketConnection = (function() {
     });
   };
 
-  WebSocketConnection.prototype._createGroupForClient = function(clientId, mode) {
+  WebSocketConnection.prototype._createGroupForClient = function(clientId, mode, groupName) {
     var self = this;
     if (!clientId || !chrome.tabGroups) return;
     if (mode === 'takeover') {
@@ -581,7 +586,7 @@ var WebSocketConnection = (function() {
     self.state.setGroupCreationPromise(clientId, readyPromise);
 
     var tag = (self.state.getTagForClient ? self.state.getTagForClient(clientId) : null) || (self.config ? self.config.tag : null);
-    var baseName = CDPUtils.getGroupBaseName(clientId, tag, mode);
+    var baseName = CDPUtils.getGroupBaseName(clientId, tag, mode, groupName);
     chrome.tabs.query({ currentWindow: true }, function(tabs) {
       if (!tabs || tabs.length === 0) {
         Logger.warn('[WS:' + self.connectionId + '] No tabs found for group creation');

package/extension-new/manifest.json

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

package/extension-new/utils/config.js

@@ -1,5 +1,5 @@
 var Config = {
-  WS_URL: 'ws://localhost:43226/plugin',
+  WS_URL: 'ws://localhost:14576/plugin',
   RECONNECT_DELAY: 3000,
   DEBUGGER_VERSION: '1.3',
   HEARTBEAT_INTERVAL: 25000,

package/extension-new/utils/helpers.js

@@ -42,8 +42,14 @@ var CDPUtils = (function() {
     return 0;
   }
 
-  function buildGroupName(clientId, connectionTag, mode) {
+  function buildGroupName(clientId, connectionTag, mode, groupName) {
     if (!clientId) return 'CDP';
+    // 如果传了 groupName（来自 API Key 的名称），直接用它作为分组名
+    // Chrome 分组显示为 "CDP-张三的浏览器"，一眼看出是谁的浏览器
+    if (groupName) {
+      var prefixG = (mode === 'takeover') ? 'TAKE-' : 'CDP-';
+      return prefixG + groupName;
+    }
     var hash = 0;
     for (var i = 0; i < clientId.length; i++) {
       var chr = clientId.charCodeAt(i);
@@ -56,8 +62,8 @@ var CDPUtils = (function() {
     return prefix + tag + suffix;
   }
 
-  function getGroupBaseName(clientId, connectionTag, mode) {
-    return buildGroupName(clientId, connectionTag, mode);
+  function getGroupBaseName(clientId, connectionTag, mode, groupName) {
+    return buildGroupName(clientId, connectionTag, mode, groupName);
   }
 
   function findGroupByName(allGroups, baseName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "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",

package/server/admin-console.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CDP Tunnel 管理控制台</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0f2f5; color: #1f2937; }
+.header { background: #1a1a2e; color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
+.header h1 { font-size: 18px; }
+.header .token-area { display: flex; gap: 8px; align-items: center; }
+.header input { background: #16213e; border: 1px solid #0f3460; color: white; padding: 6px 10px; border-radius: 4px; width: 200px; font-size: 13px; }
+.header button { background: #0f3460; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
+.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
+.section { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.section h2 { font-size: 16px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; padding: 8px 10px; background: #f9fafb; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
+td { padding: 10px; border-bottom: 1px solid #f3f4f6; }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
+.badge-online { background: #d1fae5; color: #065f46; }
+.badge-offline { background: #fee2e2; color: #991b1b; }
+.btn { padding: 4px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
+.btn-primary { background: #3b82f6; color: white; }
+.btn-danger { background: #ef4444; color: white; }
+.btn-copy { background: #e5e7eb; color: #374151; }
+.btn:hover { opacity: 0.85; }
+.mono { font-family: 'Monaco', 'Courier New', monospace; font-size: 12px; }
+.muted { color: #9ca3af; }
+.empty { text-align: center; padding: 30px; color: #9ca3af; }
+.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 100; }
+.modal-overlay.show { display: flex; }
+.modal { background: white; padding: 24px; border-radius: 8px; max-width: 500px; width: 90%; }
+.modal h3 { margin-bottom: 16px; }
+.modal input, .modal textarea { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; margin-bottom: 12px; font-family: 'Monaco', monospace; font-size: 13px; }
+.modal textarea { height: 80px; resize: vertical; }
+.cdp-result { background: #1a1a2e; color: #4ade80; padding: 12px; border-radius: 4px; font-family: 'Monaco', monospace; font-size: 12px; max-height: 300px; overflow: auto; margin-top: 12px; white-space: pre-wrap; word-break: break-all; }
+.screenshot-preview { max-width: 100%; border: 1px solid #e5e7eb; border-radius: 4px; margin-top: 12px; }
+.toast { position: fixed; bottom: 20px; right: 20px; background: #1a1a2e; color: white; padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: none; z-index: 200; }
+.toast.show { display: block; }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>🎯 CDP Tunnel 管理控制台</h1>
+  <div class="token-area">
+    <input type="password" id="tokenInput" placeholder="Admin Token（可选）">
+    <button onclick="saveToken()">保存</button>
+    <button onclick="refreshAll()">🔄 刷新</button>
+  </div>
+</div>
+
+<div class="container">
+
+  <!-- 在线浏览器 -->
+  <div class="section">
+    <h2>📱 在线浏览器 <span id="browserCount" class="muted"></span></h2>
+    <div class="actions" style="margin-bottom:12px;">
+      <button class="btn btn-primary" onclick="showCreateBrowserModal()" style="font-weight:600;">➕ 创建浏览器（新分组）</button>
+    </div>
+    <div id="browsersTable"><div class="empty">加载中...</div></div>
+  </div>
+
+  <!-- API Key 管理 -->
+  <div class="section">
+    <h2>🔑 API Key 管理</h2>
+    <div class="actions">
+      <button class="btn btn-primary" onclick="showCreateKeyModal()">➕ 创建 Key</button>
+    </div>
+    <div id="keysTable"><div class="empty">加载中...</div></div>
+  </div>
+
+  <!-- CDP 快捷操作 -->
+  <div class="section">
+    <h2>⚡ CDP 快捷操作 <span id="selectedBrowser" class="muted" style="font-size:13px;font-weight:normal;"></span></h2>
+    <div id="cdpActions" style="display:none;">
+      <!-- 快捷操作 -->
+      <div style="margin-bottom:12px; padding:10px; background:#f9fafb; border-radius:6px;">
+        <div style="font-size:12px; color:#6b7280; margin-bottom:8px;">⚡ 快捷操作（点一下直接执行）</div>
+        <div class="actions">
+          <button class="btn btn-copy" onclick="quickOpen('https://www.baidu.com')">🔍 打开百度</button>
+          <button class="btn btn-copy" onclick="quickOpen('https://www.example.com')">📰 打开 Example</button>
+          <button class="btn btn-copy" onclick="quickInfo('url')">📋 看 URL</button>
+          <button class="btn btn-copy" onclick="quickInfo('title')">📊 看 Title</button>
+          <button class="btn btn-copy" onclick="quickRefresh()">🔄 刷新页面</button>
+          <button class="btn btn-copy" onclick="cdpScreenshot()">📸 截图</button>
+          <button class="btn" style="background:#f59e0b;color:white;font-weight:600;" onclick="runDemo()">🎬 一键演示</button>
+        </div>
+      </div>
+      <!-- 高级操作 -->
+      <div style="margin-bottom:12px; padding:10px; background:#f0f9ff; border-radius:6px;">
+        <div style="font-size:12px; color:#6b7280; margin-bottom:8px;">🔧 Tab 管理</div>
+        <div class="actions">
+          <button class="btn btn-primary" onclick="cdpListTabs()">📋 Tab 列表</button>
+          <button class="btn btn-primary" onclick="cdpNewTab()">🆕 新建标签</button>
+          <button class="btn" style="background:#dc2626;color:white;" onclick="cdpCloseBrowser()">🔌 关闭浏览器</button>
+        </div>
+        <div id="tabList" style="margin-top:10px;"></div>
+      </div>
+      <div class="actions">
+        <button class="btn btn-primary" onclick="cdpEvaluate()">📝 执行 JS</button>
+        <button class="btn btn-primary" onclick="cdpScreenshot()">📸 截图</button>
+      </div>
+      <div id="cdpResult"></div>
+    </div>
+    <div id="cdpEmpty" class="empty">👆 先在上方浏览器列表点"选择"按钮</div>
+  </div>
+
+</div>
+
+<!-- 创建浏览器弹窗 -->
+<div class="modal-overlay" id="createBrowserModal">
+  <div class="modal" style="max-width:600px;">
+    <h3>🆕 创建浏览器（新分组）</h3>
+    <p class="muted" style="font-size:13px; margin-bottom:12px;">创建后会生成一个专用地址。把这个地址填到用户 Chrome 扩展的配置页，扩展连上后这里就会显示为在线浏览器。</p>
+    <input type="text" id="browserName" placeholder="浏览器名称（如：张三的电脑）" style="margin-bottom:12px;">
+    <div id="browserCreateResult" style="display:none; margin-bottom:12px; padding:12px; background:#f0f9ff; border-radius:6px;"></div>
+    <div style="display:flex; gap:8px; justify-content:flex-end;">
+      <button class="btn" style="background:#e5e7eb;" onclick="closeModal('createBrowserModal')">关闭</button>
+      <button class="btn btn-primary" id="createBrowserBtn" onclick="createBrowser()">创建</button>
+    </div>
+  </div>
+</div>
+
+<!-- 创建 Key 弹窗 -->
+<div class="modal-overlay" id="createKeyModal">
+  <div class="modal">
+    <h3>创建 API Key</h3>
+    <input type="text" id="keyName" placeholder="名称（如：我的浏览器）">
+    <div style="display:flex; gap:8px; justify-content:flex-end;">
+      <button class="btn" style="background:#e5e7eb;" onclick="closeModal('createKeyModal')">取消</button>
+      <button class="btn btn-primary" onclick="createKey()">创建</button>
+    </div>
+  </div>
+</div>
+
+<!-- 执行 JS 弹窗 -->
+<div class="modal-overlay" id="evaluateModal">
+  <div class="modal">
+    <h3>执行 JavaScript</h3>
+    <textarea id="jsExpression" placeholder="document.title"></textarea>
+    <div style="display:flex; gap:8px; justify-content:flex-end;">
+      <button class="btn" style="background:#e5e7eb;" onclick="closeModal('evaluateModal')">取消</button>
+      <button class="btn btn-primary" onclick="runEvaluate()">执行</button>
+    </div>
+  </div>
+</div>
+
+<!-- 新建标签弹窗 -->
+<div class="modal-overlay" id="newtabModal">
+  <div class="modal">
+    <h3>新建标签页</h3>
+    <input type="text" id="newtabUrl" placeholder="https://example.com">
+    <div style="display:flex; gap:8px; justify-content:flex-end;">
+      <button class="btn" style="background:#e5e7eb;" onclick="closeModal('newtabModal')">取消</button>
+      <button class="btn btn-primary" onclick="runNewTab()">创建</button>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+let TOKEN = localStorage.getItem('admin_token') || '';
+
+// ===== 初始化 =====
+window.onload = () => {
+  document.getElementById('tokenInput').value = TOKEN;
+  refreshAll();
+  // 自动刷新浏览器列表（5秒）
+  setInterval(loadBrowsers, 5000);
+};
+
+function saveToken() {
+  TOKEN = document.getElementById('tokenInput').value;
+  localStorage.setItem('admin_token', TOKEN);
+  toast('Token 已保存');
+  refreshAll();
+}
+
+function api(path, method = 'GET', body = null) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (TOKEN) headers['Authorization'] = 'Bearer ' + TOKEN;
+  return fetch('/admin/api/' + path, { method, headers, body: body ? JSON.stringify(body) : null })
+    .then(r => r.json().then(d => ({ ok: r.ok, status: r.status, data: d })));
+}
+
+// ===== 浏览器列表 =====
+async function loadBrowsers() {
+  try {
+    const { ok, data } = await api('browsers');
+    if (!ok) { document.getElementById('browsersTable').innerHTML = '<div class="empty">' + (data.error || '加载失败') + '</div>'; return; }
+    document.getElementById('browserCount').textContent = `(${data.length} 个)`;
+    if (!data.length) { document.getElementById('browsersTable').innerHTML = '<div class="empty">没有浏览器连接</div>'; return; }
+    let html = '<table><tr><th>状态</th><th>名称</th><th>UA</th><th>扩展版本</th><th>连接时间</th><th>操作</th></tr>';
+    data.forEach(b => {
+      const time = b.connectedAt ? new Date(b.connectedAt).toLocaleTimeString() : '-';
+      const ua = (b.userAgent || '').slice(0, 40) || b.browserName || '-';
+      const selected = SELECTED_PLUGIN === b.pluginId ? ' style="background:#eff6ff;"' : '';
+      html += `<tr${selected}>
+        <td><span class="badge badge-online">在线</span></td>
+        <td>${b.pluginName || '-'}</td>
+        <td class="mono" title="${b.userAgent}">${ua}</td>
+        <td><span class="badge badge-online">${b.extVersion}</span></td>
+        <td class="muted">${time}</td>
+        <td>
+          <button class="btn ${SELECTED_PLUGIN === b.pluginId ? 'btn-primary' : 'btn-copy'}" onclick="selectBrowser('${b.pluginId}','${b.pluginName || 'Browser'}')">
+            ${SELECTED_PLUGIN === b.pluginId ? '✓ 已选中' : '选择'}
+          </button>
+        </td>
+      </tr>`;
+    });
+    document.getElementById('browsersTable').innerHTML = html + '</table>';
+  } catch (e) { document.getElementById('browsersTable').innerHTML = '<div class="empty">加载失败: ' + e.message + '</div>'; }
+}
+
+let SELECTED_PLUGIN = null;
+function selectBrowser(pluginId, name) {
+  SELECTED_PLUGIN = pluginId;
+  document.getElementById('selectedBrowser').textContent = '已选: ' + name;
+  document.getElementById('cdpActions').style.display = 'block';
+  loadBrowsers(); // 刷新高亮
+  toast('已选择浏览器：' + name);
+}
+
+// ===== Key 管理 =====
+async function loadKeys() {
+  try {
+    const { ok, data } = await api('keys');
+    if (!ok) { document.getElementById('keysTable').innerHTML = '<div class="empty">' + (data.error || '加载失败') + '</div>'; return; }
+    if (!data.length) { document.getElementById('keysTable').innerHTML = '<div class="empty">没有 key，点上方按钮创建</div>'; return; }
+    let html = '<table><tr><th>名称</th><th>状态</th><th>Key ID</th><th>最后使用</th><th>创建时间</th><th>操作</th></tr>';
+    data.forEach(k => {
+      const last = k.last_used_at ? new Date(k.last_used_at).toLocaleString() : '从未';
+      const created = k.created_at ? new Date(k.created_at).toLocaleDateString() : '-';
+      html += `<tr>
+        <td>${k.name}</td>
+        <td>${k.active ? '<span class="badge badge-online">有效</span>' : '<span class="badge badge-offline">已吊销</span>'}</td>
+        <td class="mono muted">${k.id}</td>
+        <td class="muted">${last}</td>
+        <td class="muted">${created}</td>
+        <td>${k.active ? '<button class="btn btn-danger" onclick="revokeKey(\'' + k.id + '\')">吊销</button>' : ''}</td>
+      </tr>`;
+    });
+    document.getElementById('keysTable').innerHTML = html + '</table>';
+  } catch (e) { document.getElementById('keysTable').innerHTML = '<div class="empty">加载失败: ' + e.message + '</div>'; }
+}
+
+function showCreateKeyModal() { document.getElementById('keyName').value = ''; document.getElementById('createKeyModal').classList.add('show'); }
+
+// ===== 创建浏览器（= 创建 key + 生成完整地址）=====
+function showCreateBrowserModal() {
+  document.getElementById('browserName').value = '';
+  document.getElementById('browserCreateResult').style.display = 'none';
+  document.getElementById('createBrowserBtn').style.display = '';
+  document.getElementById('createBrowserModal').classList.add('show');
+}
+
+async function createBrowser() {
+  const name = document.getElementById('browserName').value || ('browser-' + Date.now().toString(36));
+  const { ok, data } = await api('keys', 'POST', { name });
+  if (!ok) { toast('创建失败: ' + (data.error || ''), true); return; }
+
+  // 用当前域名生成完整地址（用户直接复制给扩展配置页）
+  const host = location.host;  // cdp.shanbox.19930810.xyz:8443
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+  const pluginUrl = `${proto}://${host}/plugin?key=${data.key}`;
+  const clientUrl = `${proto}://${host}/client?key=${data.key}`;
+
+  document.getElementById('createBrowserBtn').style.display = 'none';
+  const result = document.getElementById('browserCreateResult');
+  result.style.display = 'block';
+  result.innerHTML = `
+    <div style="font-weight:600; margin-bottom:8px;">✅ 浏览器 "${name}" 创建成功！</div>
+    <div style="margin-bottom:10px;">
+      <div style="font-size:12px; color:#6b7280; margin-bottom:4px;">📋 扩展配置地址（填到用户 Chrome 扩展配置页）:</div>
+      <div class="mono" style="background:white; padding:8px; border-radius:4px; border:1px solid #e5e7eb; word-break:break-all;">${pluginUrl}</div>
+      <button class="btn btn-copy" style="margin-top:4px;" onclick="copyText('${pluginUrl}')">📋 复制扩展地址</button>
+    </div>
+    <div>
+      <div style="font-size:12px; color:#6b7280; margin-bottom:4px;">🔌 CDP 客户端地址（给 Playwright/Puppeteer 用）:</div>
+      <div class="mono" style="background:white; padding:8px; border-radius:4px; border:1px solid #e5e7eb; word-break:break-all;">${clientUrl}</div>
+      <button class="btn btn-copy" style="margin-top:4px;" onclick="copyText('${clientUrl}')">📋 复制客户端地址</button>
+    </div>
+    <div class="muted" style="font-size:12px; margin-top:8px;">💡 用户填好扩展地址后，Chrome 里会自动出现 "${name}" 分组。扩展连上后上方"在线浏览器"列表会显示它。</div>
+  `;
+  loadKeys();  // 刷新 key 列表
+}
+
+async function createKey() {
+  const name = document.getElementById('keyName').value || ('browser-' + Date.now().toString(36));
+  const { ok, data } = await api('keys', 'POST', { name });
+  closeModal('createKeyModal');
+  if (!ok) { toast('创建失败: ' + (data.error || ''), true); return; }
+  // 显示完整的 key 和连接地址
+  let html = `<div style="margin-bottom:12px;">✅ Key 创建成功！</div>`;
+  html += `<div style="margin-bottom:8px;"><strong>Key:</strong><br><span class="mono">${data.key}</span> <button class="btn btn-copy" onclick="copyText('${data.key}')">📋</button></div>`;
+  html += `<div style="margin-bottom:8px;"><strong>扩展连接地址（填进扩展配置页）:</strong><br><span class="mono">${data.pluginUrl}</span> <button class="btn btn-copy" onclick="copyText('${data.pluginUrl}')">📋</button></div>`;
+  html += `<div><strong>CDP 客户端地址:</strong><br><span class="mono">${data.clientUrl}</span> <button class="btn btn-copy" onclick="copyText('${data.clientUrl}')">📋</button></div>`;
+  html += `<div style="margin-top:12px;text-align:right;"><button class="btn btn-primary" onclick="document.getElementById('cdpResult').innerHTML=''; loadKeys();">知道了</button></div>`;
+  document.getElementById('cdpResult').innerHTML = html;
+  loadKeys();
+}
+
+async function revokeKey(id) {
+  if (!confirm('确定吊销这个 key？已吊销的 key 无法恢复。')) return;
+  const { ok } = await api('keys/' + id, 'DELETE');
+  toast(ok ? '已吊销' : '吊销失败', !ok);
+  loadKeys();
+}
+
+// ===== CDP 操作 =====
+function cdpEvaluate() { if (!checkSelected()) return; document.getElementById('evaluateModal').classList.add('show'); }
+function cdpScreenshot() { if (!checkSelected()) return; runCdp('screenshot'); }
+function cdpNewTab() { if (!checkSelected()) return; document.getElementById('newtabModal').classList.add('show'); }
+
+function checkSelected() {
+  if (!SELECTED_PLUGIN) { toast('请先在上方选择一个浏览器', true); return false; }
+  return true;
+}
+
+async function runEvaluate() {
+  const expr = document.getElementById('jsExpression').value || 'document.title';
+  closeModal('evaluateModal');
+  runCdp('evaluate', { expression: expr });
+}
+
+async function runNewTab() {
+  const url = document.getElementById('newtabUrl').value || 'about:blank';
+  closeModal('newtabModal');
+  runCdp('newtab', { url });
+}
+
+async function runCdp(action, extra = {}) {
+  document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">执行中... (' + action + ')</div>';
+  const { ok, data } = await api('cdp/' + action, 'POST', { pluginId: SELECTED_PLUGIN, action, ...extra });
+  if (!ok) { document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">❌ ' + (data.error || '失败') + '</div>'; return; }
+  if (data.error) { document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">❌ ' + data.error + '</div>'; return; }
+  if (data.screenshot) {
+    document.getElementById('cdpResult').innerHTML = '<img class="screenshot-preview" src="data:image/png;base64,' + data.screenshot + '">';
+  } else if (data.result !== undefined) {
+    const display = typeof data.result === 'object' ? JSON.stringify(data.result, null, 2) : String(data.result);
+    document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">✅ ' + display + '</div>';
+  } else if (data.targetId) {
+    document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">✅ 已创建标签页: ' + data.targetId + '</div>';
+    loadBrowsers(); // 刷新 target 数
+  }
+}
+
+// ===== Tab 管理 =====
+async function cdpListTabs() {
+  if (!checkSelected()) return;
+  document.getElementById('tabList').innerHTML = '<div class="muted" style="font-size:13px;">⏳ 加载中...</div>';
+  const { data } = await api('cdp/listtabs', 'POST', { pluginId: SELECTED_PLUGIN, action: 'listtabs' });
+  if (data.error) { document.getElementById('tabList').innerHTML = '<div class="muted">❌ ' + data.error + '</div>'; return; }
+  const tabs = data.tabs || [];
+  if (!tabs.length) { document.getElementById('tabList').innerHTML = '<div class="muted">没有标签页</div>'; return; }
+  let html = '<table style="font-size:12px;"><tr><th>标题</th><th>URL</th><th>操作</th></tr>';
+  tabs.forEach(t => {
+    const title = (t.title || '(无标题)').slice(0, 30);
+    const url = (t.url || '').slice(0, 40);
+    html += `<tr>
+      <td>${title}</td>
+      <td class="mono muted">${url}</td>
+      <td>
+        <button class="btn btn-copy" onclick="cdpSwitchTab('${t.targetId}')" title="切换到此标签">切换</button>
+        <button class="btn btn-danger" onclick="cdpCloseTab('${t.targetId}')" title="关闭此标签">关闭</button>
+      </td>
+    </tr>`;
+  });
+  document.getElementById('tabList').innerHTML = html + '</table>';
+}
+
+async function cdpCloseTab(targetId) {
+  if (!confirm('确定关闭这个标签页？')) return;
+  const { data } = await api('cdp/closetab', 'POST', { pluginId: SELECTED_PLUGIN, action: 'closetab', targetId });
+  toast(data.closed ? '已关闭' : '关闭失败: ' + (data.error || ''), !data.closed);
+  cdpListTabs();  // 刷新列表
+}
+
+async function cdpSwitchTab(targetId) {
+  const { data } = await api('cdp/switchtab', 'POST', { pluginId: SELECTED_PLUGIN, action: 'switchtab', targetId });
+  toast(data.switched ? '已切换' : '切换失败: ' + (data.error || ''), !data.switched);
+}
+
+async function cdpCloseBrowser() {
+  if (!confirm('⚠️ 确定关闭整个浏览器？这将断开扩展连接，所有标签页都会关闭。')) return;
+  if (!checkSelected()) return;
+  const { data } = await api('cdp/closebrowser', 'POST', { pluginId: SELECTED_PLUGIN, action: 'closebrowser' });
+  toast(data.closed ? '浏览器已关闭' : '关闭失败: ' + (data.error || ''), !data.closed);
+  setTimeout(() => refreshAll(), 2000);
+}
+
+// ===== 快捷操作 =====
+async function quickOpen(url) {
+  if (!checkSelected()) return;
+  showResult('⏳ 正在打开 ' + url + ' ...');
+  // 用 navigate 方式（先拿到 page 的 sessionId，再 Page.navigate）
+  const { ok, data } = await api('cdp/evaluate', 'POST', {
+    pluginId: SELECTED_PLUGIN, action: 'evaluate',
+    expression: `window.location.href = '${url}'`
+  });
+  if (data.error) { showResult('❌ ' + data.error); return; }
+  showResult('✅ 已打开 ' + url + '，等待加载...');
+  setTimeout(() => cdpScreenshot(), 3000);  // 3 秒后自动截图
+}
+
+async function quickInfo(field) {
+  if (!checkSelected()) return;
+  const expr = field === 'url' ? 'window.location.href' : 'document.title';
+  const { data } = await api('cdp/evaluate', 'POST', { pluginId: SELECTED_PLUGIN, action: 'evaluate', expression: expr });
+  if (data.error) { showResult('❌ ' + data.error); return; }
+  showResult('📋 ' + (field === 'url' ? 'URL' : 'Title') + ': ' + data.result);
+}
+
+async function quickRefresh() {
+  if (!checkSelected()) return;
+  const { data } = await api('cdp/evaluate', 'POST', { pluginId: SELECTED_PLUGIN, action: 'evaluate', expression: 'window.location.reload(); "refreshing"' });
+  showResult(data.error ? '❌ ' + data.error : '🔄 页面刷新中...');
+  setTimeout(() => cdpScreenshot(), 3000);
+}
+
+// ===== 一键演示循环 =====
+async function runDemo() {
+  if (!checkSelected()) return;
+  const steps = [
+    { label: '🎬 开始演示', fn: () => showResult('🎬 演示开始！即将打开百度搜索"天气"\n\n') },
+    { label: '🔍 打开百度', fn: () => quickOpenSilent('https://www.baidu.com') },
+    { label: '⌨️ 输入"天气"', fn: () => demoEval('document.querySelector("#kw").value = "天气"; document.querySelector("#kw").dispatchEvent(new Event("input")); "已输入"') },
+    { label: '🔘 点击搜索', fn: () => demoEval('document.querySelector("#su").click(); "已点击搜索"') },
+    { label: '⏳ 等待结果加载', fn: () => sleep(3000) },
+    { label: '📋 搜索结果标题', fn: () => demoEval('document.title') },
+    { label: '📸 截图', fn: () => demoScreenshot() },
+    { label: '✅ 演示完成', fn: () => showResult(prevResult + '\n\n✅ 演示完成！这就是远程控制浏览器的完整链路。') },
+  ];
+  let prevResult = '';
+  showResult('🎬 演示开始...\n');
+  for (const step of steps) {
+    appendResult('\n' + step.label + '...');
+    try {
+      const r = await step.fn();
+      if (r) { prevResult = r; appendResult(' → ' + r); }
+    } catch (e) { appendResult(' ❌ ' + e.message); }
+  }
+}
+
+async function quickOpenSilent(url) {
+  await api('cdp/evaluate', 'POST', { pluginId: SELECTED_PLUGIN, action: 'evaluate', expression: `window.location.href='${url}'` });
+  await sleep(2000);
+  return '已加载';
+}
+async function demoEval(expr) {
+  const { data } = await api('cdp/evaluate', 'POST', { pluginId: SELECTED_PLUGIN, action: 'evaluate', expression: expr });
+  return data.error ? ('失败:' + data.error) : data.result;
+}
+async function demoScreenshot() {
+  const { data } = await api('cdp/screenshot', 'POST', { pluginId: SELECTED_PLUGIN, action: 'screenshot' });
+  if (data.screenshot) {
+    document.getElementById('cdpResult').innerHTML += '<br><img class="screenshot-preview" src="data:image/png;base64,' + data.screenshot + '">';
+    return '已截图';
+  }
+  return '截图失败';
+}
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+function showResult(text) { document.getElementById('cdpResult').innerHTML = '<div class="cdp-result">' + text + '</div>'; }
+function appendResult(text) {
+  const el = document.getElementById('cdpResult');
+  const current = el.querySelector('.cdp-result');
+  if (current) current.textContent += text;
+}
+function refreshAll() { loadBrowsers(); loadKeys(); }
+function closeModal(id) { document.getElementById(id).classList.remove('show'); }
+function copyText(text) { navigator.clipboard.writeText(text).then(() => toast('已复制')); }
+function toast(msg, isError) { const t = document.getElementById('toast'); t.textContent = msg; t.style.background = isError ? '#ef4444' : '#1a1a2e'; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2000); }
+</script>
+</body>
+</html>

package/server/modules/port-pool.js

@@ -24,7 +24,9 @@ class PortPoolManager {
     this.idCounter = 0; // 全局唯一 id 计数器  // 现有 proxy 的引用（拿 plugin 连接）
     this.createServers = [];      // [http.Server] 每个 create 端口一个
     this.createWss = [];          // [WebSocket.Server] 每个 create 端口一个
-    this.portSessions = [];       // [PortSession] 每个 create 端口一个
+    this.portSessions = [];       // [PortSession] 每个 create 端口一个（端口池端口用）
+    this.keySessions = new Map(); // apiKey → PortSession（主端口按 key 隔离，一 key 一 session）
+    this._keyToPortIndex = new Map();  // apiKey → portIndex（key 到端口池端口的映射）
     this.takeoverServer = null;
     this.targetToPort = new Map();   // targetId → portIndex（事件路由用）
     this.sessionToPort = new Map();  // CDP sessionId → portIndex
@@ -75,6 +77,34 @@ class PortPoolManager {
     console.log(`[CREATE PORT ${portIndex}] Main port ${port} (reuses main server)`);
   }
 
+  /**
+   * 按 key 获取/分配独立的端口池端口 session（一 key 一 session，完全隔离）
+   * 主端口(9221)的 /client 连接按 key 路由到端口池端口(9231+)的 session。
+   * 复用端口池端口的全部隔离逻辑（targetIds/事件路由/分组），不动 handlePluginMessage。
+   *
+   * @returns PortSession 或 null（无可用端口时）
+   */
+  _getKeySession(apiKey) {
+    if (!this._keyToPortIndex) this._keyToPortIndex = new Map();
+    // 已分配过 → 直接返回
+    if (this._keyToPortIndex.has(apiKey)) {
+      return this.portSessions[this._keyToPortIndex.get(apiKey)];
+    }
+    // 找一个未分配的端口池端口（portIndex >= 1）
+    const usedIndexes = new Set(this._keyToPortIndex.values());
+    for (let i = 1; i < this.portSessions.length; i++) {
+      if (this.portSessions[i] && !usedIndexes.has(i)) {
+        this._keyToPortIndex.set(apiKey, i);
+        this.portSessions[i].apiKey = apiKey;  // 标记这个 session 属于哪个 key
+        console.log(`[KEY SESSION] key=${apiKey.slice(0, 16)}... → portIndex=${i} (port ${this.portSessions[i].port})`);
+        return this.portSessions[i];
+      }
+    }
+    // 端口池满（所有端口都已分配）→ 复用主端口 session（降级，不隔离）
+    console.warn(`[KEY SESSION] port pool exhausted, key=${apiKey.slice(0, 16)}... falling back to shared main session`);
+    return null;
+  }
+
   _startCreatePort(portIndex, port) {
     const session = new PortPoolManager.PortSession(portIndex, port);
     this.portSessions[portIndex] = session;
@@ -196,8 +226,6 @@ class PortPoolManager {
    * Client WebSocket 连接处理
    */
   _handleClientConnect(ws, req, session) {
-    session.clients.add(ws);
-
     // 鉴权：从 URL 提取 key，找到对应的 plugin（一 key 一浏览器）
     let apiKey = null;
     try {
@@ -216,6 +244,19 @@ class PortPoolManager {
 
     ws.apiKey = apiKey;  // 记录到 ws，后续命令转发时带上
 
+    // 主端口（portIndex === 0）：按 key 路由到独立的端口池端口 session
+    // 每个 key 分配一个端口池端口（portSessions[1..N]），实现完全隔离
+    //   - targetIds 独立（listtabs 只看自己的）
+    //   - 事件路由用现有 targetToPort（按 portIndex，不动 handlePluginMessage）
+    //   - 分组名按 key（阶段1已实现）
+    // 无 key 或端口池满时，fallback 到主端口共享 session（兼容）
+    if (session.portIndex === 0 && apiKey) {
+      const keySession = this._getKeySession(apiKey);
+      if (keySession) session = keySession;
+    }
+
+    session.clients.add(ws);
+
     const pluginWs = this.mainProxy.getPluginConnection(apiKey);
     if (!pluginWs) {
       ws.close(1011, apiKey ? 'No browser connected for this key' : 'No extension connected');
@@ -239,12 +280,15 @@ class PortPoolManager {
 
     // 通知扩展有 client 连接（带端口号作为分组标识）
     // clientId 固定为 pool_{port}，让扩展为每个端口建一个独立分组
+    // __groupName 带 key 名称，让扩展用 key 名称命名 Chrome 分组（一眼看出是谁的浏览器）
     const poolClientId = `pool_${session.port}`;
+    pluginWs._lastPoolClientId = poolClientId;
     pluginWs.send(JSON.stringify({
       type: 'client-connected',
       clientId: poolClientId,
       __mode: 'create',
-      __connectionTag: String(session.port)
+      __connectionTag: String(session.port),
+      __groupName: pluginWs.apiKeyName || null
     }));
 
     // 合成输入命令需要 ensureVisible（和 forward.js 的逻辑一致）

package/server/proxy-server.js

@@ -24,8 +24,10 @@ let portPool = null;
 const { logCDP, logEvent, clearLog, logStatus, logConnectionEvent, flushAllLogs, logDisconnect } = require('./modules/logger');
 
 let validateApiKey = null;
+let saasAuth = null;  // 完整 SaaS auth 模块（createApiKey/listApiKeys/revokeApiKey）
 try {
-    validateApiKey = require('./saas/auth').validateApiKey;
+    saasAuth = require('./saas/auth');
+    validateApiKey = saasAuth.validateApiKey;
     var HAS_SAAS = true;
 } catch (e) {
     var HAS_SAAS = false;
@@ -318,6 +320,250 @@ function resolvePluginFromUrl(url) {
     return pluginConnections.values().next().value || null;
 }
 
+// ===== 管理控制台 API =====
+// 鉴权：ADMIN_TOKEN 环境变量（Bearer token 或 query ?token=）
+// 未设 ADMIN_TOKEN 时只允许 localhost（开发友好）
+function checkAdminAuth(req, url) {
+    const token = process.env.ADMIN_TOKEN;
+    if (!token) {
+        // 未设 token：只允许 localhost
+        const ip = req.socket.remoteAddress;
+        return ip === '127.0.0.1' || ip === '::1' || ip === '::ffff:127.0.0.1';
+    }
+    // 设了 token：校验 Bearer 或 query
+    const authHeader = req.headers.authorization || '';
+    const bearer = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : null;
+    const queryToken = url.searchParams.get('token');
+    return bearer === token || queryToken === token;
+}
+
+function adminJson(res, code, data) {
+    res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8' });
+    res.end(JSON.stringify(data));
+}
+
+async function readBody(req) {
+    return new Promise(resolve => {
+        let d = ''; req.on('data', c => d += c);
+        req.on('end', () => { try { resolve(JSON.parse(d)); } catch { resolve({}); } });
+    });
+}
+
+async function handleAdminApi(req, res, url) {
+    const path = url.pathname.replace('/admin/api/', '');
+    const method = req.method;
+
+    if (!checkAdminAuth(req, url)) {
+        return adminJson(res, 401, { error: 'Unauthorized. Set ADMIN_TOKEN env or access from localhost.' });
+    }
+
+    try {
+        // 浏览器列表
+        if (path === 'browsers' && method === 'GET') {
+            const browsers = [];
+            for (const pluginWs of pluginConnections) {
+                if (pluginWs.readyState !== WebSocket.OPEN) continue;
+                const ns = getNamespace(pluginWs);
+                browsers.push({
+                    pluginId: pluginWs.pluginId,
+                    pluginName: pluginWs.pluginName || 'My Browser',
+                    userId: pluginWs.userId || null,
+                    apiKeyId: pluginWs.apiKeyId || null,
+                    browserName: ns.cachedBrowserVersion?.Browser || 'Unknown',
+                    userAgent: ns.cachedBrowserVersion?.['User-Agent'] || '',
+                    targets: ns.cachedTargets?.length || 0,
+                    connected: true,
+                    connectedAt: pluginWs.connectedAt,
+                    extVersion: pluginWs.extVersion || 'unknown'
+                });
+            }
+            return adminJson(res, 200, browsers);
+        }
+
+        // key 管理（需要 SaaS）
+        if (path === 'keys' && method === 'GET') {
+            if (!saasAuth) return adminJson(res, 503, { error: 'SaaS not available' });
+            return adminJson(res, 200, saasAuth.listApiKeys('builtin-admin'));
+        }
+        if (path === 'keys' && method === 'POST') {
+            if (!saasAuth) return adminJson(res, 503, { error: 'SaaS not available' });
+            const body = await readBody(req);
+            const name = body.name || ('browser-' + Date.now().toString(36));
+            const result = saasAuth.createApiKey('builtin-admin', name);
+            const port = PORT;
+            return adminJson(res, 200, {
+                ...result,
+                pluginUrl: `ws://localhost:${port}/plugin?key=${result.key}`,
+                clientUrl: `ws://localhost:${port}/client?key=${result.key}`
+            });
+        }
+        if (path.startsWith('keys/') && method === 'DELETE') {
+            if (!saasAuth) return adminJson(res, 503, { error: 'SaaS not available' });
+            const keyId = path.split('/')[1];
+            const result = saasAuth.revokeApiKey(keyId, 'builtin-admin');
+            return adminJson(res, result.changes > 0 ? 200 : 404, { ok: result.changes > 0, changes: result.changes });
+        }
+
+        // CDP 快捷操作（通过 pluginId 直接连已在线浏览器）
+        if (path.startsWith('cdp/') && method === 'POST') {
+            const body = await readBody(req);
+            if (!body.pluginId) return adminJson(res, 400, { error: 'Missing pluginId' });
+            const result = await execCdpViaPlugin(body.pluginId, body);
+            return adminJson(res, result.error ? 500 : 200, result);
+        }
+
+        return adminJson(res, 404, { error: 'Not found: ' + path });
+    } catch (e) {
+        return adminJson(res, 500, { error: e.message });
+    }
+}
+
+// 通过 pluginId 走端口池 /client 路径执行 CDP 命令（复用完整分组/session 路由逻辑）
+async function execCdpViaPlugin(pluginId, params) {
+    const action = params.action || 'evaluate';
+    // 找到 pluginId 对应的 plugin 连接
+    let pluginWs = null;
+    for (const ws of pluginConnections) {
+        if (ws.readyState === WebSocket.OPEN && ws.pluginId === pluginId) { pluginWs = ws; break; }
+    }
+    if (!pluginWs) return { error: 'Browser not found or offline' };
+
+    // closebrowser 特殊处理：不走 /client（会被 Browser.close 断开），
+    // 直接用 pluginWs 发 client-disconnected + closeTarget
+    if (action === 'closebrowser') {
+        // 从 apiKey 找到对应的 key session 的端口，拿到正确的 clientId
+        let clientId = `pool_${PORT}`;  // fallback
+        if (pluginWs.apiKey && portPool && portPool._keyToPortIndex) {
+            const portIdx = portPool._keyToPortIndex.get(pluginWs.apiKey);
+            if (portIdx !== undefined && portPool.portSessions[portIdx]) {
+                clientId = `pool_${portPool.portSessions[portIdx].port}`;
+            }
+        }
+        // 发 client-disconnected 让扩展关分组 + 关 tab
+        try {
+            pluginWs.send(JSON.stringify({ type: 'client-disconnected', clientId }));
+        } catch (e) {}
+        // 清理 key session（让下次连接重新分配）
+        if (pluginWs.apiKey && portPool) {
+            portPool.keySessions.delete(pluginWs.apiKey);
+            if (portPool._keyToPortIndex) portPool._keyToPortIndex.delete(pluginWs.apiKey);
+        }
+        return { closed: true };
+    }
+
+    const apiKey = pluginWs.apiKey;
+    if (!apiKey) return { error: 'Browser has no API key (not connected via /plugin?key=)' };
+
+    // 内部连 /client?key=xxx，走端口池完整路径（建组 + session 路由 + 分组）
+    const port = PORT;
+    return new Promise((resolve) => {
+        const ws = new WebSocket(`ws://127.0.0.1:${port}/client?key=${apiKey}`);
+        const pending = new Map(); let id = 1; let sessionId = null;
+        const timeout = setTimeout(() => { try { ws.close(); } catch {}; resolve({ error: 'Timeout' }); }, 15000);
+
+        function cdp(method, p = {}, sid) {
+            return new Promise((res, rej) => {
+                const i = id++; pending.set(i, { resolve: res, reject: rej });
+                const o = { id: i, method, params: p };
+                if (sid) o.sessionId = sid; else if (sessionId) o.sessionId = sessionId;
+                ws.send(JSON.stringify(o));
+                setTimeout(() => { if (pending.has(i)) { pending.delete(i); rej(new Error('CDP timeout: ' + method)); } }, 12000);
+            });
+        }
+
+        function finish(result) { clearTimeout(timeout); try { ws.close(); } catch {}; resolve(result); }
+
+        ws.on('message', async (data) => {
+            const m = JSON.parse(data.toString());
+            if (m.id && pending.has(m.id)) {
+                const { resolve: r, reject: rj } = pending.get(m.id); pending.delete(m.id);
+                m.error ? rj(new Error(JSON.stringify(m.error))) : r(m.result);
+                return;
+            }
+            // attachedToTarget 事件 → 记 sessionId
+            if (m.method === 'Target.attachedToTarget' && m.params?.sessionId && !sessionId) {
+                sessionId = m.params.sessionId;
+                try {
+                    if (action === 'evaluate') {
+                        await cdp('Runtime.enable', {}, sessionId);
+                        const ev = await cdp('Runtime.evaluate', { expression: params.expression || 'document.title', returnByValue: true }, sessionId);
+                        finish({ result: ev.result.value });
+                    } else if (action === 'screenshot') {
+                        await cdp('Page.enable', {}, sessionId);
+                        const shot = await cdp('Page.captureScreenshot', { format: 'png' }, sessionId);
+                        finish({ screenshot: shot.data });
+                    }
+                } catch (e) { finish({ error: e.message }); }
+            }
+        });
+
+        ws.on('open', async () => {
+            try {
+                // listtabs：走 /client 路径，getTargets 被端口池按 key 自动过滤
+                if (action === 'listtabs') {
+                    await cdp('Target.setAutoAttach', { autoAttach: true, waitForDebuggerOnStart: false, flatten: true });
+                    const tg = await cdp('Target.getTargets');
+                    const tabs = (tg?.targetInfos || [])
+                        .filter(t => t.type === 'page')
+                        .map(t => ({ targetId: t.targetId, url: t.url, title: t.title || '', attached: t.attached }));
+                    finish({ tabs });
+                }
+                // closetab：关闭指定 targetId
+                else if (action === 'closetab') {
+                    await cdp('Target.setAutoAttach', { autoAttach: true, waitForDebuggerOnStart: false, flatten: true });
+                    await cdp('Target.closeTarget', { targetId: params.targetId });
+                    finish({ closed: true, targetId: params.targetId });
+                }
+                // switchtab：切换到指定 targetId（bringToFront）
+                else if (action === 'switchtab') {
+                    await cdp('Target.setAutoAttach', { autoAttach: true, waitForDebuggerOnStart: false, flatten: true });
+                    const at = await cdp('Target.attachToTarget', { targetId: params.targetId, flatten: true });
+                    if (at.sessionId) {
+                        await cdp('Page.enable', {}, at.sessionId);
+                        await cdp('Page.bringToFront', {}, at.sessionId);
+                    }
+                    finish({ switched: true, targetId: params.targetId });
+                }
+                else if (action === 'newtab') {
+                    await cdp('Target.setAutoAttach', { autoAttach: true, waitForDebuggerOnStart: false, flatten: true });
+                    const created = await cdp('Target.createTarget', { url: params.url || 'about:blank' });
+                    finish({ targetId: created.targetId });
+                } else {
+                    // evaluate/screenshot：直接 getTargets + attach（不等 setAutoAttach 事件，避免超时）
+                    await cdp('Target.setAutoAttach', { autoAttach: true, waitForDebuggerOnStart: false, flatten: true });
+                    const tg = await cdp('Target.getTargets');
+                    let page = (tg.targetInfos || []).find(t => t.type === 'page');
+                    if (!page) {
+                        const created = await cdp('Target.createTarget', { url: 'about:blank' });
+                        page = { targetId: created.targetId };
+                    }
+                    // attach 后等 attachedToTarget 事件触发 evaluate/screenshot
+                    // 如果事件没来，1 秒后用手动方式（attach 响应里的 sessionId）
+                    const at = await cdp('Target.attachToTarget', { targetId: page.targetId, flatten: true });
+                    // 如果事件路径没处理，手动执行
+                    setTimeout(async () => {
+                        if (sessionId || !at.sessionId) return;
+                        sessionId = at.sessionId;
+                        try {
+                            if (action === 'evaluate') {
+                                await cdp('Runtime.enable', {}, sessionId);
+                                const ev = await cdp('Runtime.evaluate', { expression: params.expression || 'document.title', returnByValue: true }, sessionId);
+                                finish({ result: ev.result.value });
+                            } else if (action === 'screenshot') {
+                                await cdp('Page.enable', {}, sessionId);
+                                const shot = await cdp('Page.captureScreenshot', { format: 'png' }, sessionId);
+                                finish({ screenshot: shot.data });
+                            }
+                        } catch (e) { finish({ error: e.message }); }
+                    }, 1000);
+                }
+            } catch (e) { finish({ error: e.message }); }
+        });
+
+        ws.on('error', e => { clearTimeout(timeout); resolve({ error: e.message }); });
+    });
+}
+
 async function handleHttpRequest(req, res) {
     const url = new URL(req.url, `http://localhost:${PORT}`);
 
@@ -333,6 +579,21 @@ async function handleHttpRequest(req, res) {
         return;
     }
 
+    // 管理控制台：/admin 返回页面，/admin/api/* 返回 JSON
+    if (url.pathname === '/admin' || url.pathname === '/admin/') {
+        try {
+            const html = fs.readFileSync(path.join(__dirname, 'admin-console.html'), 'utf8');
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(html);
+        } catch (e) {
+            res.writeHead(500); res.end('Admin console not found: ' + e.message);
+        }
+        return;
+    }
+    if (url.pathname.startsWith('/admin/api/')) {
+        return handleAdminApi(req, res, url);
+    }
+
     if (url.pathname === '/json/browsers' || url.pathname === '/json/browsers/') {
         const browsers = [];
         for (const pluginWs of pluginConnections) {
@@ -756,6 +1017,7 @@ function handlePluginConnection(ws, clientInfo, request) {
                 ws.userId = keyInfo.userId;
                 ws.apiKeyId = keyInfo.keyId;
                 ws.apiKey = apiKey;  // 记录 key 字符串，供 client 连接时反查 plugin
+                ws.apiKeyName = keyInfo.keyName;  // key 名称，用作 Chrome 分组名
                 logConnectionEvent('PLUGIN_AUTHED', `userId=${keyInfo.userId} keyName=${keyInfo.keyName}`);
             } else {
                 logConnectionEvent('PLUGIN_AUTH_FAIL', 'Invalid API key');