Chrome Extension Bridge MCP
by Oanakiaja
A Chrome extension that establishes a WebSocket connection between web pages and a local MCP server. This allows you to interact with web page resources and execute functions from your MCP server.
Last updated: N/A
What is Chrome Extension Bridge MCP?
The Chrome Extension Bridge MCP consists of a Chrome extension and a local MCP server. The extension injects a client script into web pages to establish a WebSocket connection to the local server, enabling communication between the server and the web page's context.
How to use Chrome Extension Bridge MCP?
- Clone the repository and install dependencies using npm. 2. Build the extension in development mode using
npm run debug. 3. Load the unpacked extension in Chrome's extensions settings. 4. Run the provided server-side example and interact with the browser through the WebSocket connection.
Key features of Chrome Extension Bridge MCP
Access browser APIs and DOM elements from a local server
Execute JavaScript functions in the context of web pages
Retrieve resources and information from web pages
Exposes
mcp:resource.*andmcp:tool.*entry points for server commands
Use cases of Chrome Extension Bridge MCP
Automating tasks within web pages
Interacting with web page editors like Three.js editor from a local server
Retrieving data from web pages programmatically
Extending browser functionality with custom server-side logic
FAQ from Chrome Extension Bridge MCP
What is the default port for the WebSocket connection?
What is the default port for the WebSocket connection?
The default port is 54319. You can modify this in extension/content.js.
How do I call a tool in the browser from the server?
How do I call a tool in the browser from the server?
Use the client.callToolExtension(toolName, params) method.
How do I get a resource from the browser from the server?
How do I get a resource from the browser from the server?
Use the client.callResourceExtension(resourceName, params) method.
What is the format of the WebSocket messages?
What is the format of the WebSocket messages?
The extension uses a JSON-RPC-like protocol with id, method, and params fields for requests, and id and result fields for responses.
Where can I find the client API reference?
Where can I find the client API reference?
The API reference is provided in the README, detailing methods like connect(), callToolExtension(), callResourceExtension(), and dispose().