feat: add MCP Chrome extension

Author: mxschmitt

.gitignore

@@ -1,6 +1,7 @@
 lib/
 node_modules/
 test-results/
+playwright-report/
 .vscode/mcp.json
 
 .idea

README.md

@@ -485,4 +485,10 @@ X Y coordinate space, based on the provided screenshot.
     - `accept` (boolean): Whether to accept the dialog.
     - `promptText` (string, optional): The text of the prompt in case of a prompt dialog.
 
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_connect**
+  - Description: If the user explicitly asks to connect to a running browser, use this tool to initiate the connection.
+  - Parameters: None
+
 <!--- End of generated section -->

config.d.ts

@@ -89,6 +89,11 @@ export type Config = {
    */
   vision?: boolean;
 
+  /**
+   * Run server that is able to connect to the 'Playwright MCP' Chrome extension.
+   */
+  extension?: boolean;
+
   /**
    * The directory to save output files.
    */

extension/background.js

@@ -0,0 +1,200 @@
+// @ts-check
+
+/**
+ * @typedef {{tabId: number}} DebuggerTarget
+ */
+
+function debugLog(...args) {
+  const enabled = false;
+  if (enabled) {
+    console.log(...args);
+  }
+}
+
+class Extension {
+  constructor() {
+    this._socket = null;
+    this._attachedTabId = null;
+    chrome.debugger.onEvent.addListener((this.onDebuggerEvent.bind(this)));
+    chrome.debugger.onDetach.addListener(this.onDebuggerDetach.bind(this));
+    chrome.tabs.onUpdated.addListener((this.onTabsUpdated.bind(this)));
+  }
+
+  /**
+   * @param {chrome.debugger.DebuggerSession} source 
+   * @param {string} method 
+   * @param {Object} params 
+   */
+  onDebuggerEvent(source, method, params) {
+    // Only handle events coming from the attached tab.
+    if (source.tabId !== this._attachedTabId) return;
+    debugLog("CDP event:", method, params);
+    if (this._socket && this._socket.readyState === WebSocket.OPEN) {
+      let eventData = {
+        method: method,
+        params: params,
+        sessionId: 'dummy-session-id', // Use a dummy session ID for now
+      };
+      this._socket.send(JSON.stringify(eventData));
+    }
+  }
+
+  /**
+   * 
+   * @param {WebSocket} socket 
+   * @param {DebuggerTarget} debuggee 
+   * @param {string} targetId 
+   * @param {string} browserContextId 
+   * @param {object} event 
+   * @returns 
+   */
+  async onBrowserMessage(socket, debuggee, targetId, browserContextId, event) {
+    try {
+      let message = JSON.parse(new TextDecoder().decode(await event.data.arrayBuffer()));
+      if (message.method === 'Browser.getVersion') {
+        // Handle the Browser.getVersion command
+        let versionInfo = {
+          protocolVersion: "1.3",
+          userAgent: navigator.userAgent,
+          product: "Chrome"
+        };
+        socket.send(JSON.stringify({ id: message.id, result: versionInfo }));
+        return;
+      }
+      if (message.method === 'Target.setAutoAttach' && !message.sessionId) {
+        socket.send(JSON.stringify({
+          method: "Target.attachedToTarget",
+          params: {
+            sessionId: "dummy-session-id",
+            targetInfo: {
+              targetId,
+              browserContextId,
+              type: "page",
+              title: "",
+              url: "data:text/html,",
+              attached: true,
+              canAccessOpener: false,
+            },
+            waitingForDebugger: false
+          }
+        }))
+        socket.send(JSON.stringify({
+          id: message.id,
+          result: {},
+        }));
+        return;
+      }
+      if (message.method === 'Browser.setDownloadBehavior') {
+        socket.send(JSON.stringify({
+          id: message.id,
+          result: {},
+        }));
+        return;
+      }
+      if (message.method) {
+        debugLog("Received command from WebSocket:", message);
+        chrome.debugger.sendCommand(debuggee, message.method, message.params || {}, (response) => {
+          // Send back the response to the WebSocket server.
+          let reply = {
+            id: message.id,  // echo back the command id if provided
+            result: response,
+            error: chrome.runtime.lastError ? chrome.runtime.lastError.message : null,
+            sessionId: message.sessionId
+          };
+          if (socket && socket.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify(reply));
+          }
+        });
+      }
+    } catch (e) {
+      console.error("Error processing WebSocket message:", e);
+    }
+  }
+
+  /**
+   * @param {chrome.debugger.Debuggee} source 
+   * @param {chrome.debugger.DetachReason} reason 
+   */
+  onDebuggerDetach(source, reason) {
+    if (source.tabId === this._attachedTabId) {
+      debugLog("Debugger detached from tab:", this._attachedTabId, "Reason:", reason);
+      this._attachedTabId = null;
+      if (this._socket && this._socket.readyState === WebSocket.OPEN) {
+        this._socket.close();
+      }
+    }
+  }
+
+  /**
+   * @param {number} tabId 
+   * @param {chrome.tabs.TabChangeInfo} changeInfo 
+   * @param {chrome.tabs.Tab} tab 
+   */
+  onTabsUpdated(tabId, changeInfo, tab) {
+    if (changeInfo.status !== 'complete' || !tab.url)
+      return;
+    const url = new URL(tab.url);
+    if (url.hostname !== 'demo.playwright.dev' || url.pathname !== '/mcp.html')
+      return;
+    const params = new URLSearchParams(url.search);
+    const proxyURL = params.get('connectionURL');
+    if (!proxyURL)
+      return;
+    if (this._attachedTabId !== null) {
+      debugLog("Already attached to tab:", this._attachedTabId);
+      return;
+    }
+    this._attachedTabId = tabId;
+    debugLog("Attaching debugger to tab:", this._attachedTabId);
+    // Initialize the proxy connection
+    this.initializeProxy({ tabId }, proxyURL).catch((error) => {
+      console.error("Error initializing proxy:", error);
+    });
+  }
+
+  /**
+ * @param {DebuggerTarget} debuggee 
+ * @param {string} proxyURL
+ */
+  async initializeProxy(debuggee, proxyURL) {
+    await chrome.tabs.update(debuggee.tabId, { url: chrome.runtime.getURL('prompt.html') });
+    await new Promise((resolve) => {
+      const listener = (message, foo) => {
+        if (foo.tab.id === debuggee.tabId && message.action === 'approve') {
+          chrome.runtime.onMessage.removeListener(listener);
+          resolve(undefined);
+        }
+      };
+      chrome.runtime.onMessage.addListener(listener);
+    });
+    await chrome.debugger.attach(debuggee, "1.3")
+    if (chrome.runtime.lastError) {
+      console.error("Failed to attach debugger:", chrome.runtime.lastError.message);
+      return;
+    }
+    debugLog("Debugger attached to tab:", debuggee.tabId);
+    const { targetId, browserContextId } = (/** @type{any} */ (await chrome.debugger.sendCommand(debuggee, "Target.getTargetInfo"))).targetInfo;
+    const socket = this._socket = new WebSocket(proxyURL);
+    socket.addEventListener('open', () => {
+      chrome.tabs.update(debuggee.tabId, { url: chrome.runtime.getURL('success.html') });
+    });
+
+    socket.addEventListener('message', (e) => this.onBrowserMessage(socket, debuggee, targetId, browserContextId, e));
+
+    socket.addEventListener('error', (event) => {
+      console.error("WebSocket error:", event);
+    });
+
+    // On WebSocket close, detach the debugger.
+    socket.addEventListener('close', async (event) => {
+      debugLog("WebSocket connection closed:", event);
+      if (!this._attachedTabId)
+        return;
+      await chrome.debugger.detach({ tabId: this._attachedTabId });
+      debugLog("Debugger detached from tab:", this._attachedTabId);
+      this._attachedTabId = null;
+    });
+  }
+}
+
+new Extension();

extension/icon-128.png

@@ -0,0 +1,19 @@
+{
+  "manifest_version": 3,
+  "name": "Playwright MCP",
+  "version": "0.1",
+  "description": "Allows Playwright MCP to connect to your browser.",
+  "permissions": [
+    "debugger",
+    "tabs"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "icon-16.png",
+    "32": "icon-32.png",
+    "48": "icon-48.png",
+    "128": "icon-128.png"
+  }
+}