### Configure MCP Server with npx

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Example JSON configuration for the `claude_desktop_config.json` file to set up the MCP Server using npx. It specifies the command, arguments, and environment variables.

```json
{
  "mcpServers": {
    "chromeextension": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-chrome-extension"
      ],
      "env": {
        "CHROME_EXTENSION_ID": "your-extension-id"
      }
    }
  }
}
```

--------------------------------

### Configure MCP Server with Docker

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Example JSON configuration for the `claude_desktop_config.json` file to set up the MCP Server using Docker. It specifies the command, arguments, and environment variables.

```json
{
  "mcpServers": {
    "chromeextension": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "CHROME_EXTENSION_ID",
        "mcp/chromeextension"
      ],
      "env": {
        "CHROME_EXTENSION_ID": "your-extension-id"
      }
    }
  }
}
```

--------------------------------

### Extract Chrome Extension Package from Docker

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Copies the generated chrome-extension.zip file from a running Docker container to the local filesystem for manual installation.

```bash
docker cp $(docker ps -q -f ancestor=mcp/chromeextension):/app/chrome-extension.zip .
```

--------------------------------

### Get Extension Information (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Retrieves information about installed Chrome extensions, either for a specific extension ID or for all installed extensions.

```APIDOC
chrome_get_extension_info:
  description: Get information about installed extensions
  inputs:
    extension_id? (string): Specific extension ID to query
  returns: Extension information including permissions and status
  uses_chrome_api: chrome.management.get() and chrome.management.getAll()
```

--------------------------------

### Configure npx for Chrome Extension

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

This JSON configuration specifies the npx command and its arguments for installing and running the Model Context Protocol (MCP) Chrome extension server. It includes environment variables like CHROME_EXTENSION_ID that need to be set.

```json
{
  "mcpServers": {
    "chromeextension": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-chrome-extension"
      ],
      "env": {
        "CHROME_EXTENSION_ID": "your-extension-id"
      }
    }
  }
}
```

--------------------------------

### Get All Tabs Info & Updates (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Fetches information for all currently open browser tabs. It also provides real-time updates via WebSocket events for tab creation, updates, removal, and activation.

```APIDOC
chrome_get_all_tabs:
  description: Get information about all open tabs
  returns: List of all open tabs with their information (URL, title, tab ID, etc.)
  uses_chrome_api: chrome.tabs.query({})
  realtime_updates:
    - created: When a new tab is created
    - updated: When a tab's content is updated
    - removed: When a tab is closed
    - activated: When a tab becomes active
```

--------------------------------

### Get Cookies by Domain (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Retrieves a list of cookies associated with a specific domain, useful for managing website session data.

```APIDOC
chrome_get_cookies:
  description: Get cookies for a specific domain
  inputs:
    domain (string): Domain to get cookies for
  returns: List of cookies for the domain
  uses_chrome_api: chrome.cookies.get() and chrome.cookies.getAll()
```

--------------------------------

### Get Active Tab Info (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Retrieves detailed information about the currently active tab in the browser, including its URL, title, and unique tab ID.

```APIDOC
chrome_get_active_tab:
  description: Get information about the currently active tab
  returns: Active tab information including URL, title, and tab ID
  uses_chrome_api: chrome.tabs.query({ active: true, currentWindow: true })
```

--------------------------------

### Build and Run Docker Container

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Builds the Docker image for the Chrome Extension MCP Server and runs it. This is the first step in deploying the server using Docker.

```bash
docker build -t mcp/chromeextension -f src/chromeextension/Dockerfile .
docker run -i --rm mcp/chromeextension
```

--------------------------------

### Build Docker Image for Chrome Extension

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

This bash command demonstrates how to build the Docker image for the Chrome extension. It tags the image as 'mcp/chromeextension' and specifies the Dockerfile location.

```bash
docker build -t mcp/chromeextension -f src/chromeextension/Dockerfile .
```

--------------------------------

### Navigate to Extension Directory

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Changes the current directory to the extension's source code location for manual loading into Chrome.

```bash
cd src/chromeextension/extension
```

--------------------------------

### Configure Docker for Chrome Extension

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

This JSON configuration outlines the Docker command to run the Chrome extension server. It specifies the image to use, necessary environment variables, and ports for execution.

```json
{
  "mcpServers": {
    "chromeextension": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "CHROME_EXTENSION_ID",
        "mcp/chromeextension"
      ],
      "env": {
        "CHROME_EXTENSION_ID": "your-extension-id"
      }
    }
  }
}
```

--------------------------------

### Manifest Permissions

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Specifies the necessary permissions required in the `manifest.json` file for the Chrome extension to utilize the provided tools.

```JSON
{
  "permissions": [
    "activeTab",
    "scripting",
    "cookies",
    "management",
    "tabs"
  ]
}
```

--------------------------------

### Inject CSS into Web Page (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Injects custom CSS code directly into a specified web page, allowing for dynamic styling modifications.

```APIDOC
chrome_inject_css:
  description: Inject CSS into a web page
  inputs:
    tab_id (number): The ID of the target tab
    css (string): CSS code to inject
  returns: Confirmation of CSS injection
  uses_chrome_api: chrome.scripting.insertCSS()
```

--------------------------------

### Execute DOM Operations (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Executes specified DOM operations within the context of a web page using the `chrome.scripting.executeScript` API. Supports various actions like querying elements, modifying content, creating elements, and triggering events.

```APIDOC
chrome_execute_script:
  description: Execute DOM operations in the context of a web page
  inputs:
    tab_id (number): The ID of the target tab
    operation (object): DOM operation details
  operation_structure:
    action (string): The type of operation to perform
    selector? (string): CSS selector for targeting elements
    value? (string | number | boolean): Value to set
    attribute? (string): Attribute name
    tagName? (string): Tag name for createElement
    attributes? (Record<string, string | number | boolean>): Element attributes
    innerText? (string): Inner text content
    elementId? (string): Element ID for appendChild
    message? (string): Message for log operation
  supported_operations:
    querySelector: Get element information
      example: { "action": "querySelector", "selector": "#my-element" }
    setText: Set text content
      example: { "action": "setText", "selector": "#my-element", "value": "New text" }
    createElement: Create new element
      example: { "action": "createElement", "tagName": "div", "attributes": { "class": "my-class", "data-custom": "value" }, "innerText": "New element" }
    click: Trigger click event on element
      example: { "action": "click", "selector": "#my-button" }
    other_operations: querySelectorAll, setHTML, setAttribute, removeAttribute, addClass, removeClass, toggleClass, appendChild, removeElement, getPageInfo, getElementsInfo, log
  returns: Result of the DOM operation
  uses_chrome_api: chrome.scripting.executeScript()
```

--------------------------------

### MCP Chrome Extension UI Styles

Source: https://github.com/tesla0225/chromeextension/blob/main/extension/popup.html

Defines the CSS styles for the MCP Chrome Extension's body and status elements. It includes styling for padding, font, and distinct visual states for connected and disconnected statuses.

```css
body { width: 300px; padding: 10px; font-family: system-ui, -apple-system, sans-serif; }
.status { padding: 8px; border-radius: 4px; margin-bottom: 10px; }
.connected { background-color: #e6ffe6; color: #006600; }
.disconnected { background-color: #ffe6e6; color: #660000; }
.info { font-size: 12px; color: #666; }
```

--------------------------------

### Capture Visible Tab Screenshot (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Takes a screenshot of the currently visible portion of a tab. Supports specifying the tab, image format, quality, and capture area.

```APIDOC
chrome_capture_screenshot:
  description: Take a screenshot of the current tab
  inputs:
    tab_id? (number): The ID of the target tab (defaults to active tab)
    format? (string): Image format ('png' or 'jpeg', defaults to 'png')
    quality? (number): Image quality for jpeg format (0-100)
    area? (object): Capture specific area {x, y, width, height}
  returns: Base64 encoded image data
  uses_chrome_api: chrome.tabs.captureVisibleTab()
```

--------------------------------

### Send Message to Extension (Chrome API)

Source: https://github.com/tesla0225/chromeextension/blob/main/README.md

Sends a message payload to the background script of a target extension, facilitating inter-extension communication.

```APIDOC
chrome_send_message:
  description: Send a message to an extension's background script
  inputs:
    extension_id (string): Target extension ID
    message (object): Message payload to send
  returns: Response from the extension
  uses_chrome_api: chrome.runtime.sendMessage()
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.