chore: add mcp chrome extension (#710)

extension/src/background.ts

@@ -0,0 +1,109 @@
+/**
+ * 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.
+ */
+
+import { RelayConnection, debugLog } from './relayConnection.js';
+
+type PageMessage = {
+  type: 'connectToMCPRelay';
+  mcpRelayUrl: string;
+};
+
+class TabShareExtension {
+  private _activeConnection: RelayConnection | undefined;
+  private _connectedTabId: number | null = null;
+
+  constructor() {
+    chrome.tabs.onRemoved.addListener(this._onTabRemoved.bind(this));
+    chrome.tabs.onUpdated.addListener(this._onTabUpdated.bind(this));
+    chrome.runtime.onMessage.addListener(this._onMessage.bind(this));
+  }
+
+  // Promise-based message handling is not supported in Chrome: https://issues.chromium.org/issues/40753031
+  private _onMessage(message: PageMessage, sender: chrome.runtime.MessageSender, sendResponse: (response: any) => void) {
+    switch (message.type) {
+      case 'connectToMCPRelay':
+        const tabId = sender.tab?.id;
+        if (!tabId) {
+          sendResponse({ success: false, error: 'No tab id' });
+          return true;
+        }
+        this._connectTab(tabId, message.mcpRelayUrl!).then(
+            () => sendResponse({ success: true }),
+            (error: any) => sendResponse({ success: false, error: error.message }));
+        return true; // Return true to indicate that the response will be sent asynchronously
+    }
+    return false;
+  }
+
+  private async _connectTab(tabId: number, mcpRelayUrl: string): Promise<void> {
+    try {
+      debugLog(`Connecting tab ${tabId} to bridge at ${mcpRelayUrl}`);
+      const socket = new WebSocket(mcpRelayUrl);
+      await new Promise<void>((resolve, reject) => {
+        socket.onopen = () => resolve();
+        socket.onerror = () => reject(new Error('WebSocket error'));
+        setTimeout(() => reject(new Error('Connection timeout')), 5000);
+      });
+
+      const connection = new RelayConnection(socket);
+      connection.setConnectedTabId(tabId);
+      const connectionClosed = (m: string) => {
+        debugLog(m);
+        if (this._activeConnection === connection) {
+          this._activeConnection = undefined;
+          void this._setConnectedTabId(null);
+        }
+      };
+      socket.onclose = () => connectionClosed('WebSocket closed');
+      socket.onerror = error => connectionClosed(`WebSocket error: ${error}`);
+      this._activeConnection = connection;
+
+      await this._setConnectedTabId(tabId);
+      debugLog(`Tab ${tabId} connected successfully`);
+    } catch (error: any) {
+      debugLog(`Failed to connect tab ${tabId}:`, error.message);
+      await this._setConnectedTabId(null);
+      throw error;
+    }
+  }
+
+  private async _setConnectedTabId(tabId: number | null): Promise<void> {
+    const oldTabId = this._connectedTabId;
+    this._connectedTabId = tabId;
+    if (oldTabId && oldTabId !== tabId)
+      await this._updateBadge(oldTabId, { text: '', color: null });
+    if (tabId)
+      await this._updateBadge(tabId, { text: '●', color: '#4CAF50' });
+  }
+
+  private async _updateBadge(tabId: number, { text, color }: { text: string; color: string | null }): Promise<void> {
+    await chrome.action.setBadgeText({ tabId, text });
+    if (color)
+      await chrome.action.setBadgeBackgroundColor({ tabId, color });
+  }
+
+  private async _onTabRemoved(tabId: number): Promise<void> {
+    if (this._connectedTabId === tabId)
+      this._activeConnection!.setConnectedTabId(null);
+  }
+
+  private async _onTabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab): Promise<void> {
+    if (changeInfo.status === 'complete' && this._connectedTabId === tabId)
+      await this._setConnectedTabId(tabId);
+  }
+}
+
+new TabShareExtension();

extension/src/connect.ts

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const statusContainer = document.getElementById('status-container') as HTMLElement;
+  const continueBtn = document.getElementById('continue-btn') as HTMLButtonElement;
+  const rejectBtn = document.getElementById('reject-btn') as HTMLButtonElement;
+  const buttonRow = document.querySelector('.button-row') as HTMLElement;
+
+  function showStatus(type: 'connected' | 'error' | 'connecting', message: string) {
+    const div = document.createElement('div');
+    div.className = `status ${type}`;
+    div.textContent = message;
+    statusContainer.replaceChildren(div);
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  const mcpRelayUrl = params.get('mcpRelayUrl');
+
+  if (!mcpRelayUrl) {
+    buttonRow.style.display = 'none';
+    showStatus('error', 'Missing mcpRelayUrl parameter in URL.');
+    return;
+  }
+
+  let clientInfo = 'unknown';
+  try {
+    const client = JSON.parse(params.get('client') || '{}');
+    clientInfo = `${client.name}/${client.version}`;
+  } catch (e) {
+    showStatus('error', 'Failed to parse client version.');
+    return;
+  }
+
+  showStatus('connecting', `MCP client "${clientInfo}" is trying to connect. Do you want to continue?`);
+
+  rejectBtn.addEventListener('click', async () => {
+    buttonRow.style.display = 'none';
+    showStatus('error', 'Connection rejected. This tab can be closed.');
+  });
+
+  continueBtn.addEventListener('click', async () => {
+    buttonRow.style.display = 'none';
+    try {
+      const response = await chrome.runtime.sendMessage({
+        type: 'connectToMCPRelay',
+        mcpRelayUrl
+      });
+      if (response?.success)
+        showStatus('connected', `MCP client "${clientInfo}" connected.`);
+      else
+        showStatus('error', response?.error || `MCP client "${clientInfo}" failed to connect.`);
+    } catch (e) {
+      showStatus('error', `MCP client "${clientInfo}" failed to connect: ${e}`);
+    }
+  });
+});

extension/src/relayConnection.ts

@@ -0,0 +1,176 @@
+/**
+ * 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.
+ */
+
+export function debugLog(...args: unknown[]): void {
+  const enabled = true;
+  if (enabled) {
+    // eslint-disable-next-line no-console
+    console.log('[Extension]', ...args);
+  }
+}
+
+type ProtocolCommand = {
+  id: number;
+  method: string;
+  params?: any;
+};
+
+type ProtocolResponse = {
+  id?: number;
+  method?: string;
+  params?: any;
+  result?: any;
+  error?: string;
+};
+
+export class RelayConnection {
+  private _debuggee: chrome.debugger.Debuggee = {};
+  private _rootSessionId = '';
+  private _ws: WebSocket;
+  private _eventListener: (source: chrome.debugger.DebuggerSession, method: string, params: any) => void;
+  private _detachListener: (source: chrome.debugger.Debuggee, reason: string) => void;
+
+  constructor(ws: WebSocket) {
+    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);
+  }
+
+  setConnectedTabId(tabId: number | null): void {
+    if (!tabId) {
+      this._debuggee = { };
+      this._rootSessionId = '';
+      return;
+    }
+    this._debuggee = { tabId };
+    this._rootSessionId = `pw-tab-${tabId}`;
+  }
+
+  close(message?: string): void {
+    chrome.debugger.onEvent.removeListener(this._eventListener);
+    chrome.debugger.onDetach.removeListener(this._detachListener);
+    this._ws.close(1000, message || 'Connection closed');
+  }
+
+  private async _detachDebugger(): Promise<void> {
+    await chrome.debugger.detach(this._debuggee);
+  }
+
+  private _onDebuggerEvent(source: chrome.debugger.DebuggerSession, method: string, params: any): void {
+    if (source.tabId !== this._debuggee.tabId)
+      return;
+    debugLog('Forwarding CDP event:', method, params);
+    const sessionId = source.sessionId || this._rootSessionId;
+    this._sendMessage({
+      method: 'forwardCDPEvent',
+      params: {
+        sessionId,
+        method,
+        params,
+      },
+    });
+  }
+
+  private _onDebuggerDetach(source: chrome.debugger.Debuggee, reason: string): void {
+    if (source.tabId !== this._debuggee.tabId)
+      return;
+    this._sendMessage({
+      method: 'detachedFromTab',
+      params: {
+        tabId: this._debuggee.tabId,
+        reason,
+      },
+    });
+  }
+
+  private _onMessage(event: MessageEvent): void {
+    this._onMessageAsync(event).catch(e => debugLog('Error handling message:', e));
+  }
+
+  private async _onMessageAsync(event: MessageEvent): Promise<void> {
+    let message: ProtocolCommand;
+    try {
+      message = JSON.parse(event.data);
+    } catch (error: any) {
+      debugLog('Error parsing message:', error);
+      this._sendError(-32700, `Error parsing message: ${error.message}`);
+      return;
+    }
+
+    debugLog('Received message:', message);
+
+    const response: ProtocolResponse = {
+      id: message.id,
+    };
+    try {
+      response.result = await this._handleCommand(message);
+    } catch (error: any) {
+      debugLog('Error handling command:', error);
+      response.error = error.message;
+    }
+    debugLog('Sending response:', response);
+    this._sendMessage(response);
+  }
+
+  private async _handleCommand(message: ProtocolCommand): Promise<any> {
+    if (!this._debuggee.tabId)
+      throw new Error('No tab is connected. Please go to the Playwright MCP extension and select the tab you want to connect to.');
+    if (message.method === 'attachToTab') {
+      debugLog('Attaching debugger to tab:', this._debuggee);
+      await chrome.debugger.attach(this._debuggee, '1.3');
+      const result: any = await chrome.debugger.sendCommand(this._debuggee, 'Target.getTargetInfo');
+      return {
+        sessionId: this._rootSessionId,
+        targetInfo: result?.targetInfo,
+      };
+    }
+    if (message.method === 'detachFromTab') {
+      debugLog('Detaching debugger from tab:', this._debuggee);
+      return await this._detachDebugger();
+    }
+    if (message.method === 'forwardCDPCommand') {
+      const { sessionId, method, params } = message.params;
+      debugLog('CDP command:', method, params);
+      const debuggerSession: chrome.debugger.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
+      return await chrome.debugger.sendCommand(
+          debuggerSession,
+          method,
+          params
+      );
+    }
+  }
+
+  private _sendError(code: number, message: string): void {
+    this._sendMessage({
+      error: {
+        code,
+        message,
+      },
+    });
+  }
+
+  private _sendMessage(message: any): void {
+    this._ws.send(JSON.stringify(message));
+  }
+}