cdp-tunnel 1.0.3 → 1.0.5

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

@@ -137,7 +137,27 @@ var LocalHandler = (function() {
 
   function getTargetInfos() {
     return chrome.debugger.getTargets().then(function(targets) {
-      return targets.map(mapToTargetInfo).filter(Boolean);
+      // 为每个有 tabId 的 target 查询 openerTabId
+      const promises = targets.map(function(target) {
+        if (target.tabId) {
+          return new Promise(function(resolve) {
+            chrome.tabs.get(target.tabId, function(tab) {
+              if (tab && tab.openerTabId) {
+                const openerMatch = targets.find(function(t) {
+                  return String(t.tabId) === String(tab.openerTabId);
+                });
+                if (openerMatch) {
+                  target.openerId = openerMatch.id;
+                }
+              }
+              resolve(mapToTargetInfo(target));
+            });
+          });
+        } else {
+          return Promise.resolve(mapToTargetInfo(target));
+        }
+      });
+      return Promise.all(promises);
     });
   }
 
@@ -146,7 +166,28 @@ var LocalHandler = (function() {
       var match = targets.find(function(t) {
         return t.id === targetId || String(t.tabId) === String(targetId);
       });
-      return match ? mapToTargetInfo(match) : null;
+      if (!match) return null;
+      
+      // 获取 tab 信息以获取 openerTabId
+      var tabId = match.tabId;
+      if (tabId) {
+        return new Promise(function(resolve) {
+          chrome.tabs.get(tabId, function(tab) {
+            if (tab && tab.openerTabId) {
+              // 查找 opener 的 targetId
+              var openerMatch = targets.find(function(t) {
+                return String(t.tabId) === String(tab.openerTabId);
+              });
+              if (openerMatch) {
+                match.openerId = openerMatch.id;
+              }
+            }
+            resolve(mapToTargetInfo(match));
+          });
+        });
+      }
+      
+      return mapToTargetInfo(match);
     });
   }
 
@@ -194,7 +235,7 @@ var LocalHandler = (function() {
 
   function mapToTargetInfo(target) {
     if (!target) return null;
-    return {
+    var info = {
       targetId: target.id || String(target.tabId),
       type: target.type || 'page',
       title: target.title || '',
@@ -203,6 +244,11 @@ var LocalHandler = (function() {
       canAccessOpener: false,
       browserContextId: 'default'
     };
+    // 添加 openerId（如果有）
+    if (target.openerId) {
+      info.openerId = target.openerId;
+    }
+    return info;
   }
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Chrome Extension CDP Proxy - 通过 Chrome 扩展将 chrome.debugger API 暴露为 WebSocket 端点",
   "main": "server/proxy-server.js",
   "bin": "./cli/index.js",

package/server/proxy-server.js

@@ -50,6 +50,7 @@ const globalRequestIdMap = new Map();
 const targetIdToClientId = new Map();
 const pendingAttachedEvents = new Map();
 const browserContextToClientId = new Map();
+const clientIdToBrowserContext = new Map();
 let globalRequestIdCounter = 0;
 
 let cachedTargets = [];
@@ -309,6 +310,8 @@ function handlePluginConnection(ws, clientInfo) {
 
     // 消息转发: Plugin -> Client
     ws.on('message', (data) => {
+        console.log(`[PLUGIN MESSAGE] size=${data.length}`);
+        
         const messageSize = data.length;
         let messagePreview;
         let parsed;
@@ -331,69 +334,77 @@ function handlePluginConnection(ws, clientInfo) {
             return;
         }
         
-        // 记录所有 PLUGIN -> CLIENT 消息到日志文件
-        logCDP('PLUGIN -> CLIENT', data.toString().substring(0, CONFIG.LOG_MESSAGE_PREVIEW_LENGTH), parsed?.sessionId, ws.pluginType);
-        
         // 调试：打印所有收到的消息
         console.log(`[PLUGIN MSG] id=${parsed?.id} method=${parsed?.method || 'none'} type=${parsed?.type || 'none'} sessionId=${parsed?.sessionId?.substring(0,8) || 'none'}`);
 
+        // 记录所有 PLUGIN -> CLIENT 消息到日志文件
+        logCDP('PLUGIN -> CLIENT', data.toString().substring(0, CONFIG.LOG_MESSAGE_PREVIEW_LENGTH), parsed?.sessionId, ws.pluginType);
+
         // 处理 type: 'event' 消息（来自 background.js 的 screencast 等事件）
         if (parsed && parsed.type === 'event' && parsed.method) {
-            logCDP('DEBUG', `Converting type:event message: ${parsed.method}`, parsed?.sessionId);
+            // 对于 Target 事件，始终广播给所有客户端
+            const targetEvents = ['Target.targetCreated', 'Target.attachedToTarget', 'Target.targetDestroyed', 'Target.targetInfoChanged'];
+            if (targetEvents.includes(parsed.method)) {
+                const cdpMsg = {
+                    method: parsed.method,
+                    params: parsed.params,
+                    type: 'event'
+                };
+                if (parsed.sessionId) {
+                    cdpMsg.params.sessionId = parsed.sessionId;
+                    cdpMsg.sessionId = parsed.sessionId;
+                }
+
+                if (parsed.method === 'Target.targetCreated') {
+                    const targetId = parsed.params?.targetInfo?.targetId;
+                    const openerId = parsed.params?.targetInfo?.openerId;
+                    if (openerId && targetId) {
+                        const openerClientId = targetIdToClientId.get(openerId);
+                        if (openerClientId) {
+                            targetIdToClientId.set(targetId, openerClientId);
+                            console.log(`[TARGET CREATED with opener] targetId=${targetId.substring(0,8)} openerId=${openerId.substring(0,8)} -> clientId=${openerClientId}`);
+                        }
+                    }
+                }
+
+                rewriteBrowserContextId(cdpMsg);
+                const cdpData = JSON.stringify(cdpMsg);
+                logCDP('BROADCAST', `Broadcasting ${parsed.method}, full data: ${cdpData}`, parsed?.sessionId);
+                broadcastToClients(cdpData, null);
+                logCDP('BROADCAST', `Done broadcasting ${parsed.method}`, parsed?.sessionId);
+            }
             
-            // 处理 Target.attachedToTarget 事件，建立 sessionId -> clientId 映射
+            // 对于 Target.attachedToTarget 事件，建立 sessionId -> clientId 映射
             if (parsed.method === 'Target.attachedToTarget') {
                 const targetId = parsed.params?.targetInfo?.targetId;
                 const sessionId = parsed.params?.sessionId;
                 
-                console.log(`[ATTACHED EVENT (type:event)] targetId=${targetId} sessionId=${sessionId?.substring(0,8)}`);
-                
-                // 查找 targetId 对应的 clientId
-                const clientId = targetIdToClientId.get(targetId);
-                if (clientId && sessionId) {
-                    sessionToClientId.set(sessionId, clientId);
-                    console.log(`[SESSION MAPPED from event] sessionId=${sessionId.substring(0,8)} -> clientId=${clientId} (targetId=${targetId})`);
-                    targetIdToClientId.delete(targetId);
-                    
-                    // 转换为 CDP 格式并发送给对应的客户端
-                    const cdpMsg = {
-                        method: parsed.method,
-                        params: parsed.params
-                    };
-                    
-                    const clientWs = clientById.get(clientId);
-                    if (clientWs && clientWs.readyState === WebSocket.OPEN) {
-                        clientWs.send(JSON.stringify(cdpMsg));
-                        console.log(`[ATTACHED EVENT] Sent to client: ${clientId}`);
-                    }
-                    return;
-                } else if (targetId && sessionId) {
-                    // targetId 还没有映射，缓存事件等待 Target.createTarget 响应
-                    pendingAttachedEvents.set(targetId, { sessionId, parsed, data });
-                    console.log(`[ATTACHED EVENT] Cached for targetId=${targetId}, waiting for createTarget response`);
-                    return;
+                if (targetId && sessionId) {
+                    sessionToClientId.set(sessionId, targetId);
+                    console.log(`[SESSION MAPPED] sessionId=${sessionId.substring(0,8)} -> targetId=${targetId.substring(0,8)}`);
                 }
             }
             
-            const cdpMsg = {
-                method: parsed.method,
-                params: parsed.params
-            };
-            if (parsed.sessionId) {
-                cdpMsg.sessionId = parsed.sessionId;
-            }
-            const cdpData = JSON.stringify(cdpMsg);
-            
-            // 发送给配对的 client
-            if (ws.pairedClientId) {
-                const clientWs = clientById.get(ws.pairedClientId);
-                if (safeSend(clientWs, cdpData, 'client')) {
-                    logCDP('DEBUG', `Sent converted event to client: ${parsed.method}`, parsed?.sessionId);
-                    return;
+            // 如果不是 Target 事件，按照原来的逻辑发送
+            if (!targetEvents.includes(parsed.method)) {
+                const cdpMsg = {
+                    method: parsed.method,
+                    params: parsed.params
+                };
+                if (parsed.sessionId) {
+                    cdpMsg.sessionId = parsed.sessionId;
                 }
+                const cdpData = JSON.stringify(cdpMsg);
+                
+                if (ws.pairedClientId) {
+                    const clientWs = clientById.get(ws.pairedClientId);
+                    if (safeSend(clientWs, cdpData, 'client')) {
+                        logCDP('DEBUG', `Sent converted event to client: ${parsed.method}`, parsed?.sessionId);
+                        return;
+                    }
+                }
+                broadcastToClients(cdpData, ws);
             }
-            // 广播给所有 client
-            broadcastToClients(cdpData, ws);
             return;
         }
 
@@ -418,6 +429,7 @@ function handlePluginConnection(ws, clientInfo) {
                     if (mapping.isCreateBrowserContext && parsed.result?.browserContextId) {
                         const browserContextId = parsed.result.browserContextId;
                         browserContextToClientId.set(browserContextId, mapping.clientId);
+                        clientIdToBrowserContext.set(mapping.clientId, browserContextId);
                         console.log(`[BROWSER CONTEXT MAPPED] browserContextId=${browserContextId} -> clientId=${mapping.clientId}`);
                     }
                     
@@ -484,120 +496,16 @@ function handlePluginConnection(ws, clientInfo) {
             return;
         }
         
-        // 3. 事件广播：无 id 和 sessionId 的消息（如 Target.targetCreated）
-        // 只广播特定类型的事件，避免干扰其他客户端
-        if (parsed && parsed.method) {
-            // 处理 Target.attachedToTarget 事件，建立 sessionId -> clientId 映射
-            if (parsed.method === 'Target.attachedToTarget') {
-                const targetId = parsed.params?.targetInfo?.targetId;
-                const sessionId = parsed.params?.sessionId;
-                const openerId = parsed.params?.targetInfo?.openerId;
-                
-                // 查找 targetId 对应的 clientId
-                let clientId = targetIdToClientId.get(targetId);
-                
-                // 如果没有直接映射，检查 openerId（window.open 打开的新 tab）
-                if (!clientId && openerId) {
-                    // 查找 openerId 对应的 clientId
-                    // openerId 可能是某个已知的 targetId
-                    clientId = targetIdToClientId.get(openerId);
-                    if (clientId) {
-                        console.log(`[OPENER TRACKING] targetId=${targetId?.substring(0,8)} openerId=${openerId?.substring(0,8)} -> clientId=${clientId}`);
-                        // 记录新 targetId 的映射
-                        targetIdToClientId.set(targetId, clientId);
-                    }
-                }
-                
-                if (clientId && sessionId) {
-                    sessionToClientId.set(sessionId, clientId);
-                    console.log(`[SESSION MAPPED from event] sessionId=${sessionId.substring(0,8)} -> clientId=${clientId} (targetId=${targetId?.substring(0,8)})`);
-                    targetIdToClientId.delete(targetId);
-                    
-                    // 只发送给对应的客户端
-                    const clientWs = clientById.get(clientId);
-                    if (clientWs && clientWs.readyState === WebSocket.OPEN) {
-                        clientWs.send(data);
-                    }
-                    return;
-                }
-            }
-            
-            // 处理 Target.targetInfoChanged 事件
-            if (parsed.method === 'Target.targetInfoChanged') {
-                const targetId = parsed.params?.targetInfo?.targetId;
-                const openerId = parsed.params?.targetInfo?.openerId;
-                console.log(`[TARGET INFO CHANGED] targetId=${targetId?.substring(0,8)} openerId=${openerId?.substring(0, 8) || 'none'}`);
-            }
-            
-            if (parsed.method === 'Target.targetCreated') {
-                const targetId = parsed.params?.targetInfo?.targetId;
-                const openerId = parsed.params?.targetInfo?.openerId;
-                const browserContextId = parsed.params?.targetInfo?.browserContextId;
-                const targetType = parsed.params?.targetInfo?.type;
-                
-                console.log(`[TARGET CREATED] targetId=${targetId?.substring(0,8)} type=${targetType} openerId=${openerId?.substring(0, 8) || 'none'} browserContextId=${browserContextId?.substring(0, 8) || 'none'}`);
-                
-                // 如果有 openerId，尝试找到对应的 clientId
-                if (openerId && targetId) {
-                    const openerClientId = targetIdToClientId.get(openerId);
-                    if (openerClientId) {
-                        targetIdToClientId.set(targetId, openerClientId);
-                        console.log(`[TARGET CREATED with opener] targetId=${targetId?.substring(0,8)} openerId=${openerId?.substring(0,8)} -> clientId=${openerClientId}`);
-                    }
-                }
-                
-                // 如果有 browserContextId，尝试找到对应的 clientId
-                // browserContextId 是通过 Target.createBrowserContext 创建的
-                if (browserContextId && targetId) {
-                    const contextClientId = browserContextToClientId.get(browserContextId);
-                    if (contextClientId && !targetIdToClientId.has(targetId)) {
-                        targetIdToClientId.set(targetId, contextClientId);
-                        console.log(`[TARGET CREATED in context] targetId=${targetId?.substring(0,8)} browserContextId=${browserContextId?.substring(0,8)} -> clientId=${contextClientId}`);
-                    }
-                }
-                
-                // Service Worker 处理：Service Worker 通常属于创建它的页面所在的客户端
-                // 通过 browserContextId 来判断归属
-                if (targetType === 'service_worker' && browserContextId && targetId) {
-                    const contextClientId = browserContextToClientId.get(browserContextId);
-                    if (contextClientId) {
-                        targetIdToClientId.set(targetId, contextClientId);
-                        console.log(`[SERVICE WORKER] targetId=${targetId?.substring(0,8)} -> clientId=${contextClientId}`);
-                    }
-                }
-                
-                // iframe (OOPIF) 处理：跨域 iframe 可能有独立的 target
-                // 通过 openerId 或 browserContextId 来判断归属
-                if (targetType === 'iframe' && targetId) {
-                    // 优先使用 openerId
-                    if (openerId) {
-                        const openerClientId = targetIdToClientId.get(openerId);
-                        if (openerClientId) {
-                            targetIdToClientId.set(targetId, openerClientId);
-                            console.log(`[IFRAME with opener] targetId=${targetId?.substring(0,8)} openerId=${openerId?.substring(0,8)} -> clientId=${openerClientId}`);
-                        }
-                    } else if (browserContextId) {
-                        // 否则使用 browserContextId
-                        const contextClientId = browserContextToClientId.get(browserContextId);
-                        if (contextClientId) {
-                            targetIdToClientId.set(targetId, contextClientId);
-                            console.log(`[IFRAME in context] targetId=${targetId?.substring(0,8)} browserContextId=${browserContextId?.substring(0,8)} -> clientId=${contextClientId}`);
-                        }
-                    }
-                }
-            }
-            
-            const broadcastMethods = [
-                'Target.targetCreated',
-                'Target.targetDestroyed',
-                'Target.targetInfoChanged'
+        // 3. 其他事件：无 id 和 sessionId 的消息
+        // 注意：Target 事件已在上方 type: 'event' 分支处理
+        // 这里只处理非 Target 事件
+        if (parsed && parsed.method && !parsed.sessionId) {
+            const nonTargetBroadcastMethods = [
+                'Inspector.detached',
+                'Log.entryAdded'
             ];
-            if (broadcastMethods.includes(parsed.method)) {
-                for (const clientWs of clientConnections) {
-                    if (clientWs.readyState === WebSocket.OPEN) {
-                        clientWs.send(data);
-                    }
-                }
+            if (nonTargetBroadcastMethods.includes(parsed.method)) {
+                broadcastToClients(data, null);
             }
         }
     });
@@ -1016,11 +924,16 @@ function handlePageConnection(ws, clientInfo, targetId) {
                 cdpMsg.sessionId = msg.sessionId;
             }
             
-            if (msg.method === 'Page.screencastFrame' && shouldLog('debug')) {
-                console.log(`[PLUGIN -> PAGE] ${id}: Page.screencastFrame`);
+            // 对于全局 Target 事件，需要广播给所有客户端
+            const broadcastEvents = ['Target.targetCreated', 'Target.attachedToTarget', 'Target.targetDestroyed', 'Target.targetInfoChanged'];
+            if (broadcastEvents.includes(msg.method)) {
+                rewriteBrowserContextId(cdpMsg);
+                console.log(`[PLUGIN -> ALL CLIENTS] Broadcasting ${msg.method}`);
+                broadcastToClients(JSON.stringify(cdpMsg), null);
+            } else {
+                ws.lastActivityTime = Date.now();
+                ws.send(JSON.stringify(cdpMsg));
             }
-            ws.lastActivityTime = Date.now();
-            ws.send(JSON.stringify(cdpMsg));
             return;
         }
 
@@ -1109,16 +1022,51 @@ function handlePageConnection(ws, clientInfo, targetId) {
     });
 }
 
+/**
+ * 重写 Target 事件中的 browserContextId
+ * 插件总是报告 'default'，但 Playwright 期望自己创建的 context ID
+ * 通过 openerId 找到对应的 clientId，再找到该 client 的 browserContextId
+ */
+function rewriteBrowserContextId(cdpMsg) {
+    const targetInfo = cdpMsg.params?.targetInfo;
+    if (!targetInfo || targetInfo.browserContextId !== 'default') {
+        return cdpMsg;
+    }
+
+    let clientId = null;
+
+    if (targetInfo.openerId) {
+        clientId = targetIdToClientId.get(targetInfo.openerId);
+    }
+    if (!clientId && targetInfo.targetId) {
+        clientId = targetIdToClientId.get(targetInfo.targetId);
+    }
+
+    if (clientId) {
+        const contextId = clientIdToBrowserContext.get(clientId);
+        if (contextId) {
+            console.log(`[CONTEXT REWRITE] targetId=${targetInfo.targetId?.substring(0,8)} browserContextId: 'default' -> '${contextId}' (via openerId=${targetInfo.openerId?.substring(0,8) || 'none'}, clientId=${clientId})`);
+            targetInfo.browserContextId = contextId;
+        }
+    }
+
+    return cdpMsg;
+}
+
 /**
  * 广播消息给所有客户端
  */
 function broadcastToClients(data, excludeWs = null) {
     let sent = 0;
+    logCDP('BROADCAST', `Starting broadcast to ${clientConnections.size} clients, data preview: ${data.substring(0, 200)}`);
     clientConnections.forEach((client) => {
+        logCDP('BROADCAST', `Checking client ${client.id}, state=${client.readyState}, excluded=${client === excludeWs}`);
         if (client !== excludeWs && safeSend(client, data, 'client')) {
             sent++;
+            logCDP('BROADCAST', `Sent to client ${client.id}`);
         }
     });
+    logCDP('BROADCAST', `Finished: sent to ${sent} clients`);
     return sent;
 }
 

package/test-three-pages.js

@@ -0,0 +1,192 @@
+const { chromium } = require('playwright');
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+let serverPort = 9050;
+
+async function testThreePages(port, label) {
+  serverPort++;
+  const currentPort = serverPort;
+
+  console.log(`\n${'='.repeat(60)}`);
+  console.log(`Testing ${label} (port ${port})`);
+  console.log('='.repeat(60));
+
+  try {
+    const sharedState = { counter: 0 };
+
+    const htmlContent1 = `
+      <!DOCTYPE html>
+      <html>
+      <head><title>Page 1</title></head>
+      <body>
+        <h1>Page 1</h1>
+        <a href="page2.html" id="link1">Go to Page 2 (same tab)</a>
+        <button id="btn" onclick="window.getCounter().then(r => document.getElementById('result').innerText = r)">Get Counter</button>
+        <div id="result">-</div>
+      </body>
+      </html>
+    `;
+
+    const htmlContent2 = `
+      <!DOCTYPE html>
+      <html>
+      <head><title>Page 2</title></head>
+      <body>
+        <h1>Page 2</h1>
+        <a href="page3.html" target="_blank" id="link2">Open Page 3 (new tab)</a>
+        <button id="btn" onclick="window.getCounter().then(r => document.getElementById('result').innerText = r)">Get Counter</button>
+        <div id="result">-</div>
+      </body>
+      </html>
+    `;
+
+    const htmlContent3 = `
+      <!DOCTYPE html>
+      <html>
+      <head><title>Page 3</title></head>
+      <body>
+        <h1>Page 3 - New Tab</h1>
+        <button id="btn" onclick="window.getCounter().then(r => document.getElementById('result').innerText = r)">Get Counter</button>
+        <div id="result">-</div>
+      </body>
+      </html>
+    `;
+
+    const serverDir = '/tmp/test-three-pages';
+    if (!fs.existsSync(serverDir)) {
+      fs.mkdirSync(serverDir, { recursive: true });
+    }
+    fs.writeFileSync(path.join(serverDir, 'page1.html'), htmlContent1);
+    fs.writeFileSync(path.join(serverDir, 'page2.html'), htmlContent2);
+    fs.writeFileSync(path.join(serverDir, 'page3.html'), htmlContent3);
+
+    const http = require('http');
+    const server = http.createServer((req, res) => {
+      let filePath = path.join(serverDir, req.url === '/' ? 'page1.html' : req.url);
+      if (fs.existsSync(filePath)) {
+        const content = fs.readFileSync(filePath);
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(content);
+      } else {
+        res.writeHead(404);
+        res.end('Not found');
+      }
+    });
+
+    await new Promise(resolve => server.listen(currentPort, resolve));
+    console.log(`[${label}] Test server on port ${currentPort}`);
+
+    const browser = await chromium.connectOverCDP(`http://localhost:${port}`);
+    console.log(`[${label}] Connected!`);
+
+    const context = await browser.newContext();
+    console.log(`[${label}] Context created`);
+
+    await context.exposeFunction('getCounter', () => {
+      sharedState.counter += 1;
+      console.log(`[${label}] getCounter called -> counter: ${sharedState.counter}`);
+      return sharedState.counter;
+    });
+    console.log(`[${label}] exposeFunction registered`);
+
+    const page1 = await context.newPage();
+    await page1.goto(`http://localhost:${currentPort}/page1.html`, { waitUntil: 'domcontentloaded' });
+    console.log(`[${label}] Page 1 loaded: ${page1.url()}`);
+
+    const r1 = await page1.evaluate(() => window.getCounter());
+    console.log(`[${label}] Page 1 counter: ${r1} (expect 1)`);
+
+    console.log(`[${label}] --- Step 1: Click link in Page 1 -> navigate to Page 2 (same tab) ---`);
+    await Promise.all([
+      page1.waitForURL('**/page2.html'),
+      page1.click('#link1')
+    ]);
+    console.log(`[${label}] Page 1 navigated to Page 2: ${page1.url()}`);
+
+    const r2 = await page1.evaluate(() => window.getCounter());
+    console.log(`[${label}] Page 2 counter: ${r2} (expect 2)`);
+
+    console.log(`[${label}] --- Step 2: Click link in Page 2 -> open Page 3 (new tab) ---`);
+    const [page3] = await Promise.all([
+      context.waitForEvent('page', { timeout: 10000 }),
+      page1.click('#link2')
+    ]);
+    await page3.waitForLoadState('domcontentloaded');
+    console.log(`[${label}] Page 3 opened in new tab: ${page3.url()}`);
+
+    const r3 = await page3.evaluate(() => window.getCounter());
+    console.log(`[${label}] Page 3 counter: ${r3} (expect 3)`);
+
+    console.log(`[${label}] --- Step 3: Verify all pages ---`);
+    const allPages = context.pages();
+    console.log(`[${label}] Total pages in context: ${allPages.length} (expect 2)`);
+
+    const r2again = await page1.evaluate(() => window.getCounter());
+    console.log(`[${label}] Page 2 counter again: ${r2again} (expect 4)`);
+
+    const r3again = await page3.evaluate(() => window.getCounter());
+    console.log(`[${label}] Page 3 counter again: ${r3again} (expect 5)`);
+
+    const success = r1 === 1 && r2 === 2 && r3 === 3 && r2again === 4 && r3again === 5;
+
+    server.close();
+
+    if (success) {
+      console.log(`[${label}] ✓ PASS! Counter: ${r1} -> ${r2} -> ${r3} -> ${r2again} -> ${r3again}`);
+    } else {
+      console.log(`[${label}] ✗ FAIL! Expected: 1,2,3,4,5 Got: ${r1},${r2},${r3},${r2again},${r3again}`);
+    }
+
+    await browser.close();
+    return success;
+
+  } catch (error) {
+    console.error(`[${label}] ✗ Error:`, error.message);
+    return false;
+  }
+}
+
+async function main() {
+  console.log('Testing: Page1 -> navigate to Page2 (same tab) -> open Page3 (new tab)');
+  console.log('Counter: 1 -> 2 -> 3 -> 4 -> 5 (shared state via exposeFunction)\n');
+
+  console.log('Step 1: Starting Chromium on port 9230...');
+  const chromiumProcess = spawn('/Applications/Chromium.app/Contents/MacOS/Chromium', [
+    '--remote-debugging-port=9230',
+    '--user-data-dir=/tmp/chromium-test-three',
+    '--no-first-run',
+    '--no-default-browser-check'
+  ], { detached: true, stdio: 'ignore' });
+
+  await new Promise(resolve => setTimeout(resolve, 3000));
+
+  console.log('\nStep 2: Testing Native CDP...');
+  const nativeResult = await testThreePages(9230, 'Native CDP');
+
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  console.log('\nStep 3: Testing CDP Tunnel...');
+  const tunnelResult = await testThreePages(9221, 'CDP Tunnel');
+
+  try { process.kill(-chromiumProcess.pid); } catch (e) {}
+
+  console.log('\n' + '='.repeat(60));
+  console.log(`Native CDP:  ${nativeResult ? '✓ PASS' : '✗ FAIL'}`);
+  console.log(`CDP Tunnel:  ${tunnelResult ? '✓ PASS' : '✗ FAIL'}`);
+
+  if (nativeResult && tunnelResult) {
+    console.log('\n✓ Both work identically!');
+  } else if (!nativeResult && tunnelResult) {
+    console.log('\n✓ CDP Tunnel works! Native CDP has limitations.');
+  } else if (nativeResult && !tunnelResult) {
+    console.log('\n✗ CDP Tunnel has issues!');
+  } else {
+    console.log('\n✗ Both have issues!');
+  }
+
+  process.exit(0);
+}
+
+main();