Element MCP powers a Chrome extension that lets you select elements on a webpage and store references to those elements on a local server. After starting the server and loading the Chrome extension, you can trigger element capture from the browser. Stored elements appear in a tabular view served by the MCP server, allowing you to review, organize, and potentially reuse element selectors later. The extension communicates with the server to persist each captured element, and the server exposes endpoints to fetch or manage the stored elements. Use the extension’s UI to capture elements on any page and then visit the server’s interface to browse your saved items.

Prerequisites:

• Git
• Node.js installed locally (or a compatible runtime as used by your setup; Bun is commonly used with this project but the server here is started via a Node entry point)
• Chrome browser (for loading the extension)

Steps:

1. Clone the repository git clone https://github.com/stonega/stonega-element-mcp.git cd stonega-element-mcp

2. Install dependencies (using your preferred runtime; Bun is commonly used with this project, but if you’re following the instructions below, you can use npm/yarn as applicable) bun install

   or with npm

   npm install

3. Start the MCP server bun start

   or if you use the Node-based start script directly

   node server.js

4. Load the Chrome extension

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" if not already
   • Click "Load unpacked" and select the extension directory provided in the repository (often named extension)

5. Use the extension to capture elements

   • Click the Element MCP extension icon in Chrome
   • Choose elements on a page to store
   • Access the server’s interface to view stored elements

6. Optional: configure environment variables If you’re using a custom PORT or need to set CORS/Origin options, set them in your environment or a .env file as appropriate for your runtime.

Tips and notes:

• The server stores element references captured by the Chrome extension; ensure the extension is loaded and has permission to communicate with the server (adjust CORS/origin as needed).
• If you restart the server, your stored elements persist locally if your data directory is preserved; otherwise ensure proper persistence configuration for your environment.
• Common issues: extension not communicating with server due to port mismatches or blocked cross-origin requests; verify PORT and EXTENSION_ORIGIN if you encounter connectivity problems.
• If you plan to distribute or deploy, consider wrapping the server in a container (Docker) or using a dedicated process manager for reliability in production.