chore(extension): support reconnect, implement relay-extension protocol (#602)
This commit is contained in:
Yury Semikhatsky
@@ -14,6 +14,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Connection } from './connection.js';
|
||||
|
||||
/**
|
||||
* Simple Chrome Extension that pumps CDP messages between chrome.debugger and WebSocket
|
||||
*/
|
||||
@@ -21,7 +23,7 @@
|
||||
// @ts-check
|
||||
|
||||
function debugLog(...args) {
|
||||
const enabled = false;
|
||||
const enabled = true;
|
||||
if (enabled) {
|
||||
console.log('[Extension]', ...args);
|
||||
}
|
||||
@@ -116,173 +118,49 @@ class TabShareExtension {
|
||||
async connectTab(tabId, bridgeUrl) {
|
||||
try {
|
||||
debugLog(`Connecting tab ${tabId} to bridge at ${bridgeUrl}`);
|
||||
|
||||
// Attach chrome debugger
|
||||
const debuggee = { tabId };
|
||||
await chrome.debugger.attach(debuggee, '1.3');
|
||||
|
||||
if (chrome.runtime.lastError)
|
||||
throw new Error(chrome.runtime.lastError.message);
|
||||
const targetInfo = /** @type {any} */ (await chrome.debugger.sendCommand(debuggee, 'Target.getTargetInfo'));
|
||||
debugLog('Target info:', targetInfo);
|
||||
|
||||
// Connect to bridge server
|
||||
const socket = new WebSocket(bridgeUrl);
|
||||
|
||||
const connection = {
|
||||
debuggee,
|
||||
socket,
|
||||
tabId,
|
||||
sessionId: `pw-tab-${tabId}`
|
||||
};
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
socket.onopen = () => {
|
||||
debugLog(`WebSocket connected for tab ${tabId}`);
|
||||
// Send initial connection info to bridge
|
||||
socket.send(JSON.stringify({
|
||||
type: 'connection_info',
|
||||
sessionId: connection.sessionId,
|
||||
targetInfo: targetInfo?.targetInfo
|
||||
}));
|
||||
resolve(undefined);
|
||||
};
|
||||
socket.onopen = () => resolve(undefined);
|
||||
socket.onerror = reject;
|
||||
setTimeout(() => reject(new Error('Connection timeout')), 5000);
|
||||
});
|
||||
|
||||
// Set up message handling
|
||||
this.setupMessageHandling(connection);
|
||||
|
||||
const info = this._createConnection(tabId, socket);
|
||||
// Store connection
|
||||
this.activeConnections.set(tabId, connection);
|
||||
|
||||
// Update UI
|
||||
chrome.action.setBadgeText({ tabId, text: '●' });
|
||||
chrome.action.setBadgeBackgroundColor({ tabId, color: '#4CAF50' });
|
||||
chrome.action.setTitle({ tabId, title: 'Disconnect from Playwright MCP' });
|
||||
this.activeConnections.set(tabId, info);
|
||||
|
||||
this._updateUI(tabId, { text: '●', color: '#4CAF50', title: 'Disconnect from Playwright MCP' });
|
||||
debugLog(`Tab ${tabId} connected successfully`);
|
||||
|
||||
} catch (error) {
|
||||
debugLog(`Failed to connect tab ${tabId}:`, error.message);
|
||||
await this.cleanupConnection(tabId);
|
||||
await this._cleanupConnection(tabId);
|
||||
|
||||
// Show error to user
|
||||
chrome.action.setBadgeText({ tabId, text: '!' });
|
||||
chrome.action.setBadgeBackgroundColor({ tabId, color: '#F44336' });
|
||||
chrome.action.setTitle({ tabId, title: `Connection failed: ${error.message}` });
|
||||
this._updateUI(tabId, { text: '!', color: '#F44336', title: `Connection failed: ${error.message}` });
|
||||
|
||||
throw error; // Re-throw for popup to handle
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up bidirectional message handling between debugger and WebSocket
|
||||
* @param {Object} connection
|
||||
*/
|
||||
setupMessageHandling(connection) {
|
||||
const { debuggee, socket, tabId, sessionId: rootSessionId } = connection;
|
||||
_updateUI(tabId, { text, color, title }) {
|
||||
chrome.action.setBadgeText({ tabId, text });
|
||||
if (color)
|
||||
chrome.action.setBadgeBackgroundColor({ tabId, color });
|
||||
chrome.action.setTitle({ tabId, title });
|
||||
}
|
||||
|
||||
// WebSocket -> chrome.debugger
|
||||
socket.onmessage = async (event) => {
|
||||
let message;
|
||||
try {
|
||||
message = JSON.parse(event.data);
|
||||
} catch (error) {
|
||||
debugLog('Error parsing message:', error);
|
||||
socket.send(JSON.stringify({
|
||||
error: {
|
||||
code: -32700,
|
||||
message: `Error parsing message: ${error.message}`
|
||||
}
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
debugLog('Received from bridge:', message);
|
||||
|
||||
const debuggerSession = { ...debuggee };
|
||||
const sessionId = message.sessionId;
|
||||
// Pass session id, unless it's the root session.
|
||||
if (sessionId && sessionId !== rootSessionId)
|
||||
debuggerSession.sessionId = sessionId;
|
||||
|
||||
// Forward CDP command to chrome.debugger
|
||||
const result = await chrome.debugger.sendCommand(
|
||||
debuggerSession,
|
||||
message.method,
|
||||
message.params || {}
|
||||
);
|
||||
|
||||
// Send response back to bridge
|
||||
const response = {
|
||||
id: message.id,
|
||||
sessionId,
|
||||
result
|
||||
};
|
||||
|
||||
if (chrome.runtime.lastError) {
|
||||
response.error = {
|
||||
code: -32000,
|
||||
message: chrome.runtime.lastError.message,
|
||||
};
|
||||
}
|
||||
|
||||
socket.send(JSON.stringify(response));
|
||||
} catch (error) {
|
||||
debugLog('Error processing WebSocket message:', error);
|
||||
const response = {
|
||||
id: message.id,
|
||||
sessionId: message.sessionId,
|
||||
error: {
|
||||
code: -32000,
|
||||
message: error.message,
|
||||
},
|
||||
};
|
||||
socket.send(JSON.stringify(response));
|
||||
}
|
||||
};
|
||||
|
||||
// chrome.debugger events -> WebSocket
|
||||
const eventListener = (source, method, params) => {
|
||||
if (source.tabId === tabId && socket.readyState === WebSocket.OPEN) {
|
||||
// If the sessionId is not provided, use the root sessionId.
|
||||
const event = {
|
||||
sessionId: source.sessionId || rootSessionId,
|
||||
method,
|
||||
params,
|
||||
};
|
||||
debugLog('Forwarding CDP event:', event);
|
||||
socket.send(JSON.stringify(event));
|
||||
}
|
||||
};
|
||||
|
||||
const detachListener = (source, reason) => {
|
||||
if (source.tabId === tabId) {
|
||||
debugLog(`Debugger detached from tab ${tabId}, reason: ${reason}`);
|
||||
this.disconnectTab(tabId);
|
||||
}
|
||||
};
|
||||
|
||||
// Store listeners for cleanup
|
||||
connection.eventListener = eventListener;
|
||||
connection.detachListener = detachListener;
|
||||
|
||||
chrome.debugger.onEvent.addListener(eventListener);
|
||||
chrome.debugger.onDetach.addListener(detachListener);
|
||||
|
||||
// Handle WebSocket close
|
||||
_createConnection(tabId, socket) {
|
||||
const connection = new Connection(tabId, socket);
|
||||
socket.onclose = () => {
|
||||
debugLog(`WebSocket closed for tab ${tabId}`);
|
||||
this.disconnectTab(tabId);
|
||||
};
|
||||
|
||||
socket.onerror = (error) => {
|
||||
debugLog(`WebSocket error for tab ${tabId}:`, error);
|
||||
this.disconnectTab(tabId);
|
||||
};
|
||||
return { connection };
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -290,12 +168,8 @@ class TabShareExtension {
|
||||
* @param {number} tabId
|
||||
*/
|
||||
async disconnectTab(tabId) {
|
||||
await this.cleanupConnection(tabId);
|
||||
|
||||
// Update UI
|
||||
chrome.action.setBadgeText({ tabId, text: '' });
|
||||
chrome.action.setTitle({ tabId, title: 'Share tab with Playwright MCP' });
|
||||
|
||||
await this._cleanupConnection(tabId);
|
||||
this._updateUI(tabId, { text: '', color: null, title: 'Share tab with Playwright MCP' });
|
||||
debugLog(`Tab ${tabId} disconnected`);
|
||||
}
|
||||
|
||||
@@ -303,31 +177,21 @@ class TabShareExtension {
|
||||
* Clean up connection resources
|
||||
* @param {number} tabId
|
||||
*/
|
||||
async cleanupConnection(tabId) {
|
||||
const connection = this.activeConnections.get(tabId);
|
||||
if (!connection) return;
|
||||
|
||||
// Remove listeners
|
||||
if (connection.eventListener) {
|
||||
chrome.debugger.onEvent.removeListener(connection.eventListener);
|
||||
}
|
||||
if (connection.detachListener) {
|
||||
chrome.debugger.onDetach.removeListener(connection.detachListener);
|
||||
}
|
||||
async _cleanupConnection(tabId) {
|
||||
const info = this.activeConnections.get(tabId);
|
||||
if (!info) return;
|
||||
this.activeConnections.delete(tabId);
|
||||
|
||||
// Close WebSocket
|
||||
if (connection.socket && connection.socket.readyState === WebSocket.OPEN) {
|
||||
connection.socket.close();
|
||||
}
|
||||
info.connection.close();
|
||||
|
||||
// Detach debugger
|
||||
try {
|
||||
await chrome.debugger.detach(connection.debuggee);
|
||||
await info.connection.detachDebugger();
|
||||
} catch (error) {
|
||||
// Ignore detach errors - might already be detached
|
||||
debugLog('Error while detaching debugger:', error);
|
||||
}
|
||||
|
||||
this.activeConnections.delete(tabId);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -335,9 +199,8 @@ class TabShareExtension {
|
||||
* @param {number} tabId
|
||||
*/
|
||||
async onTabRemoved(tabId) {
|
||||
if (this.activeConnections.has(tabId)) {
|
||||
await this.cleanupConnection(tabId);
|
||||
}
|
||||
if (this.activeConnections.has(tabId))
|
||||
await this._cleanupConnection(tabId);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
169
extension/connection.js
Normal file
169
extension/connection.js
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Copyright (c) Microsoft Corporation.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// @ts-check
|
||||
|
||||
function debugLog(...args) {
|
||||
const enabled = true;
|
||||
if (enabled) {
|
||||
console.log('[Extension]', ...args);
|
||||
}
|
||||
}
|
||||
|
||||
export class Connection {
|
||||
/**
|
||||
* @param {number} tabId
|
||||
* @param {WebSocket} ws
|
||||
*/
|
||||
constructor(tabId, ws) {
|
||||
/** @type {chrome.debugger.Debuggee} */
|
||||
this._debuggee = { tabId };
|
||||
this._rootSessionId = `pw-tab-${tabId}`;
|
||||
this._ws = ws;
|
||||
this._ws.onmessage = this._onMessage.bind(this);
|
||||
// Store listeners for cleanup
|
||||
this._eventListener = this._onDebuggerEvent.bind(this);
|
||||
this._detachListener = this._onDebuggerDetach.bind(this);
|
||||
chrome.debugger.onEvent.addListener(this._eventListener);
|
||||
chrome.debugger.onDetach.addListener(this._detachListener);
|
||||
}
|
||||
|
||||
close(message) {
|
||||
chrome.debugger.onEvent.removeListener(this._eventListener);
|
||||
chrome.debugger.onDetach.removeListener(this._detachListener);
|
||||
this._ws.close(1000, message || 'Connection closed');
|
||||
}
|
||||
|
||||
async detachDebugger() {
|
||||
await chrome.debugger.detach(this._debuggee);
|
||||
}
|
||||
|
||||
_onDebuggerEvent(source, method, params) {
|
||||
if (source.tabId !== this._debuggee.tabId)
|
||||
return;
|
||||
// If the sessionId is not provided, use the root sessionId.
|
||||
const event = {
|
||||
sessionId: source.sessionId || this._rootSessionId,
|
||||
method,
|
||||
params,
|
||||
};
|
||||
debugLog('Forwarding CDP event:', event);
|
||||
this._ws.send(JSON.stringify(event));
|
||||
}
|
||||
|
||||
_onDebuggerDetach(source, reason) {
|
||||
if (source.tabId !== this._debuggee.tabId)
|
||||
return;
|
||||
this._sendMessage({
|
||||
method: 'PWExtension.detachedFromTab',
|
||||
params: {
|
||||
tabId: this._debuggee.tabId,
|
||||
reason,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {MessageEvent} event
|
||||
*/
|
||||
_onMessage(event) {
|
||||
this._onMessageAsync(event).catch(e => debugLog('Error handling message:', e));
|
||||
}
|
||||
|
||||
async _onMessageAsync(event) {
|
||||
/** @type {import('../src/cdpRelay').ProtocolCommand} */
|
||||
let message;
|
||||
try {
|
||||
message = JSON.parse(event.data);
|
||||
} catch (error) {
|
||||
debugLog('Error parsing message:', error);
|
||||
this._sendError(-32700, `Error parsing message: ${error.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
debugLog('Received message:', message);
|
||||
|
||||
const sessionId = message.sessionId;
|
||||
const response = {
|
||||
id: message.id,
|
||||
sessionId,
|
||||
};
|
||||
try {
|
||||
if (message.method.startsWith('PWExtension.'))
|
||||
response.result = await this._handleExtensionCommand(message);
|
||||
else
|
||||
response.result = await this._handleCDPCommand(message);
|
||||
} catch (error) {
|
||||
debugLog('Error handling message:', error);
|
||||
response.error = {
|
||||
code: -32000,
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
debugLog('Sending response:', response);
|
||||
this._sendMessage(response);
|
||||
}
|
||||
|
||||
async _handleExtensionCommand(message) {
|
||||
if (message.method === 'PWExtension.attachToTab') {
|
||||
debugLog('Attaching debugger to tab:', this._debuggee);
|
||||
await chrome.debugger.attach(this._debuggee, '1.3');
|
||||
const result = /** @type {any} */ (await chrome.debugger.sendCommand(this._debuggee, 'Target.getTargetInfo'));
|
||||
return {
|
||||
sessionId: this._rootSessionId,
|
||||
targetInfo: result.targetInfo,
|
||||
};
|
||||
}
|
||||
if (message.method === 'PWExtension.detachFromTab') {
|
||||
debugLog('Detaching debugger from tab:', this._debuggee);
|
||||
await this.detachDebugger();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async _handleCDPCommand(message) {
|
||||
const sessionId = message.sessionId;
|
||||
/** @type {chrome.debugger.DebuggerSession} */
|
||||
const debuggerSession = { ...this._debuggee };
|
||||
// Pass session id, unless it's the root session.
|
||||
if (sessionId && sessionId !== this._rootSessionId)
|
||||
debuggerSession.sessionId = sessionId;
|
||||
// Forward CDP command to chrome.debugger
|
||||
const result = await chrome.debugger.sendCommand(
|
||||
debuggerSession,
|
||||
message.method,
|
||||
message.params
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
_sendError(code, message) {
|
||||
this._sendMessage({
|
||||
error: {
|
||||
// @ts-ignore
|
||||
code,
|
||||
message
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('../src/cdpRelay').ProtocolResponse} message
|
||||
*/
|
||||
_sendMessage(message) {
|
||||
this._ws.send(JSON.stringify(message));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user