Gemini-MCP-Chrome-Extension

# Gemini MCP Chrome Extension This project is a Chrome extension that allows you to operate the Gemini web interface from the MCP client. ## Project Overview This project is a Chrome extension designed to interact with the Google Gemini web interface via the MCP server from an external MCP client. It is developed in TypeScript, enhancing code quality and maintainability. ### System Architecture The data flow is as follows: `[MCP Client] <--(MCP)--> [MCP Server] <--(Native Messaging)--> [Chrome Extension] <--(DOM)--> [Gemini Web Page]` ## Setup Instructions ### Prerequisites - Node.js and npm must be installed - Google Chrome browser must be installed ### Installation Steps 1. Clone or download the repository ``` git clone <repository URL> cd GeminiMcpGateway ``` 2. Install the dependency packages ``` npm install ``` 3. Build the extension ``` npm run build ``` 4. Install the Chrome extension - Open `chrome://extensions` in Chrome - Enable "Developer mode" - Click on "Load unpacked" - Select the project directory (ensure it includes the dist directory) ### MCP Server Configuration On the MCP server side, you need to create a Native Host manifest and place it in the appropriate location. The manifest must include the following information: - Hostname: `com.example.gemini_mcp_gateway` (this must match the name specified in background.ts) - Path to the executable file - Allowed Chrome extension ID For detailed configuration instructions, please refer to the [Chrome Native Messaging documentation](https://developer.chrome.com/docs/apps/nativeMessaging). ## Usage ### Using the MCP Server 1. With the Chrome extension installed, access the Gemini web page (https://gemini.google.com/) 2. From the MCP client, you can send the following commands via the MCP server: - Check readiness: `{"command": "areYouReady"}` - Text input: `{"command": "setInput", "payload": {"text": "Text to input"}}` - Click send button: `{"command": "clickSend"}` 3. Responses from Gemini are returned to the MCP client via the MCP server: - On success: `{"status": "success", "event": "responseReceived", "payload": {"text": "Response text"}}` - On error: `{"status": "error", "message": "Error message"}` 4. The readiness state of the content script is notified with the following message: - When ready: `{"type": "content_ready"}` ### Testing Without the MCP Server The extension includes a popup UI for testing functionality without the MCP server: 1. With the Chrome extension installed, access the Gemini web page (https://gemini.google.com/) 2. Click the extension icon in the browser toolbar to open the popup UI 3. Enter the text you want to send to Gemini in the text input field 4. Click the "Send" button to send the text to Gemini and display the response 5. Click the "Clear" button to clear the input and response fields Using this testing feature allows you to verify that the extension is functioning correctly without the implementation of the MCP server. ## Development Information ### Project Structure ``` /project-root |-- /dist <- Directory where built files are output |-- /public <- Directory for static files | |-- manifest.json <- Manifest for the Chrome extension | |-- popup.html <- HTML for the test popup | `-- popup.js <- JavaScript for the test popup |-- /src <- Directory for source code | |-- background.ts <- Responsible for Native Messaging | |-- content.ts <- Responsible for DOM manipulation | `-- types.ts <- Type definitions |-- package.json |-- tsconfig.json `-- webpack.config.js ``` ### Build Command - `npm run build`: Builds the extension ## Notes - Selectors may need to be adjusted to match the actual structure of the Gemini page - The Native Messaging hostname (HOST_NAME) must match the configuration on the MCP server side - The Content Security Policy (CSP) settings comply with the security requirements of Chrome extensions (no 'unsafe-eval' is used) - The Service Worker is configured to operate as an ES module - The dist directory is automatically cleared during the build process to prevent issues caused by leftover old files