From cd9b2faf725ccc9c45824a2e63d9d1e342dff74a Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Sun, 16 Nov 2025 10:10:47 +0100 Subject: [PATCH] adding welcome screeen --- extension-playwright/welcome.html | 306 ++++++++++++++++++++++++++++++ 1 file changed, 306 insertions(+) create mode 100644 extension-playwright/welcome.html diff --git a/extension-playwright/welcome.html b/extension-playwright/welcome.html new file mode 100644 index 0000000..f5b7c50 --- /dev/null +++ b/extension-playwright/welcome.html @@ -0,0 +1,306 @@ + + + + + + Welcome to Playwriter MCP + + + +
+
+

Getting Started with Playwriter MCP

+ +

+ Playwriter MCP enables Playwright to connect to your existing Chrome + instance without requiring Chrome to be started in CDP mode. This + allows AI assistants and automation tools to interact with your + browser seamlessly through the Model Context Protocol. +

+ +
+ Prerequisites: You need Node.js installed on your + system to run the Playwriter MCP server. +
+ +

Quick Start

+ +
+ 1 +
+ Navigate to any webpage +

+ Open a tab with the website you want to control via MCP. This + could be any URL you want to automate or interact with. +

+
+
+ +
+ 2 +
+ Click the extension icon +

+ Click the Playwriter MCP extension icon in your browser toolbar + to attach the debugger to the current tab. The icon will turn + green when successfully connected. +

+
+
+ +
+ 3 +
+ Run the Playwriter MCP server +

+ Open your terminal and run the following command to start the MCP + server: +

+ 
npx playwriter
+

+ This will start the relay server that bridges the extension with + your MCP client. +

+
+
+ +
+ 4 +
+ Connect your MCP client +

+ Your MCP client (like Claude Desktop or other AI assistants) can + now connect to the browser and control it using Playwright + commands. +

+
+
+
+ +
+

How It Works

+ +
    +
  • + No new Chrome instances: Works with your current + browser session +
    • +
  • + No CDP mode required: No need to restart Chrome + with special flags +
    • +
  • + Full CDP access: Complete Chrome DevTools Protocol + capabilities +
    • +
  • + Visual feedback: Extension icon changes color to + indicate connection status +
    • +
+
+ +
+

Icon States

+ +
    +
  • Gray: Not connected to any tab
    • +
  • Green: Successfully connected and ready
    • +
  • Orange badge (...): Connecting to relay server
    • +
  • Red badge (!): Error occurred
    • +
+
+ +
+

Privacy & Security

+ +

+ Playwriter MCP runs locally in your browser and does not send any + data to external servers. All browser control happens through the + standard Chrome DevTools Protocol on your machine. +

+
+ +
+

Need Help?

+ +

+ For issues, feature requests, or contributions, visit the + + GitHub repository + + . +

+
+ + +
+ +