### Start Development Server

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Start the project in development mode.

```bash
npm run dev
```

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

### Setup Rust and Build WASM Package

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Install Rust and wasm-pack, then build the WASM package. The built files are copied to the extension workers directory.

```bash
cd packages/wasm-simd
# Install Rust and wasm-pack if not already installed
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

# Build WASM package
pnpm build

# The built files will be copied to app/chrome-extension/workers/
```

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

### Install Dependencies

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Install project dependencies using pnpm.

```bash
pnpm install
```

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

### Install Dependencies

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Clone the repository and install project dependencies using npm or pnpm.

```bash
git clone https://github.com/your-username/fastify-chrome-native.git
cd fastify-chrome-native
npm install
```

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

### Global Installation

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Install the bridge globally to automatically detect and register browsers.

```bash
npm i -g mcp-chrome-bridge
```

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

### Complete Workflow Example

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

This example demonstrates a complete workflow involving navigation, screenshotting, network monitoring, page interaction, content search, and bookmarking.

```javascript
// 1. Navigate to a page
await callTool('chrome_navigate', {
  url: 'https://example.com',
});

// 2. Take a screenshot
const screenshot = await callTool('chrome_screenshot', {
  fullPage: true,
  storeBase64: true,
});

// 3. Start network monitoring
await callTool('chrome_network_capture_start', {
  maxCaptureTime: 30000,
});

// 4. Interact with the page
await callTool('chrome_click_element', {
  selector: '#load-data-button',
});

// 5. Search content semantically
const searchResults = await callTool('search_tabs_content', {
  query: 'user data analysis',
});

// 6. Stop network capture
const networkData = await callTool('chrome_network_capture_stop');

// 7. Save bookmark
await callTool('chrome_bookmark_add', {
  title: 'Data Analysis Page',
  parentId: 'Work/Analytics',
});
```

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

### Install Rust and wasm-pack

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/BUILD.md

Install the necessary tools for building Rust-based WebAssembly projects.

```bash
# Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```

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

### Run Native Server in Development

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Navigate to the native server directory and run the development script to build and start the server locally.

```bash
cd app/native-server
npm run dev
```

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

### Install mcp-chrome-bridge

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Installs the native Node.js bridge for Chrome MCP Server. Ensure Node.js and npm/pnpm are installed. Manual registration might be needed if automatic registration fails.

```bash
# Install the mcp-chrome-bridge globally (npm)
npm install -g mcp-chrome-bridge

# Or with pnpm (enable postinstall scripts first)
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# If automatic registration fails, register manually
mcp-chrome-bridge register

# Load the unpacked extension in Chrome:
# 1. Go to chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked" → select downloaded extension folder
```

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

### Start Network Capture (webRequest)

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Starts network request capture using the lightweight webRequest API. This method does not capture response bodies. Call with action: "start" then action: "stop".

```json
{
  "action": "start",
  "url": "https://api.example.com",
  "maxCaptureTime": 30000,
  "inactivityTimeout": 5000,
  "includeStatic": false
}
```

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

### Install mcp-chrome-bridge with npm

Source: https://github.com/hangwin/mcp-chrome/blob/master/README.md

Installs the mcp-chrome-bridge package globally using npm. This is a prerequisite for using the extension.

```bash
npm install -g mcp-chrome-bridge
```

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

### chrome_network_capture_start

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Starts capturing network requests using the webRequest API.

```APIDOC
## chrome_network_capture_start

### Description
Start capturing network requests using webRequest API.

### Parameters
#### Query Parameters
- **url** (string, optional): URL to navigate to and capture.
- **maxCaptureTime** (number, optional): Maximum capture time in ms (default: 30000).
- **inactivityTimeout** (number, optional): Stop after inactivity in ms (default: 3000).
- **includeStatic** (boolean, optional): Include static resources (default: false).

### Request Example
```json
{
  "url": "https://api.example.com",
  "maxCaptureTime": 60000,
  "includeStatic": false
}
```
```

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

### Build Commands for wasm-simd

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/README.md

Provides the necessary commands to install dependencies and build the WebAssembly module for release or development.

```bash
# Install dependencies
CARGO_HOME=$(pwd)/.cargo cargo install wasm-pack

# Build for release
# npm run build

# Build for development
# npm run build:dev
```

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

### Configure MCP client for STDIO Connection

Source: https://github.com/hangwin/mcp-chrome/blob/master/README.md

Example JSON configuration for an MCP client to connect via STDIO. This requires specifying the command to execute the mcp-server-stdio.js script with its full path.

```json
{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}
```

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

### Start Network Capture (Debugger API)

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Starts network request capture using Chrome's Debugger API, which includes response bodies. Call with action: "start" then action: "stop".

```json
{
  "action": "start",
  "needResponseBody": true,
  "url": "https://app.example.com/dashboard"
}
```

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

### Install mcp-chrome-bridge with pnpm

Source: https://github.com/hangwin/mcp-chrome/blob/master/README.md

Installs the mcp-chrome-bridge package globally using pnpm. It includes two methods: enabling pre/post scripts globally or manual registration if postinstall scripts are disabled.

```bash
# Method 1: Enable scripts globally (recommended)
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# Method 2: Manual registration (if postinstall doesn't run)
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register
```

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

### Get Browser Windows and Tabs

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Lists all currently open browser windows and their associated tabs. No parameters are required.

```json
{
  "windowCount": 2,
  "tabCount": 5,
  "windows": [
    {
      "windowId": 123,
      "tabs": [
        {
          "tabId": 456,
          "url": "https://example.com",
          "title": "Example Page",
          "active": true
        }
      ]
    }
  ]
}
```

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

### Check mcp-chrome-bridge installation path with npm/pnpm

Source: https://github.com/hangwin/mcp-chrome/blob/master/README.md

Commands to check the global installation path of the mcp-chrome-bridge package using npm or pnpm. This path is needed for STDIO connection configuration.

```sh
# npm check method
npm list -g mcp-chrome-bridge
# pnpm check method
pnpm list -g mcp-chrome-bridge
```

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

### chrome_network_debugger_start

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Starts capturing network traffic with response bodies using the Chrome Debugger API.

```APIDOC
## chrome_network_debugger_start

### Description
Start capturing with Chrome Debugger API (includes response bodies).

### Parameters
#### Query Parameters
- **url** (string, optional): URL to navigate to and capture.

### Request Example
```json
{
  "url": "https://api.example.com"
}
```
```

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

### Run mcp-chrome-bridge Doctor with Fix (macOS/Linux)

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/install.md

Execute the diagnostic tool with the --fix flag to automatically resolve common installation problems, including permission errors.

```bash
mcp-chrome-bridge doctor --fix
```

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

### Configure MCP client for Streamable HTTP Connection

Source: https://github.com/hangwin/mcp-chrome/blob/master/README.md

Example JSON configuration for an MCP client to connect to the mcp-chrome-server using the streamable HTTP method. This is the recommended connection type.

```json
{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}
```

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

### Start Network Request Capture

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Initiates network request capturing using the webRequest API. Can navigate to a URL and configure capture duration and static resource inclusion. Parameters include `url`, `maxCaptureTime`, `inactivityTimeout`, and `includeStatic`.

```json
{
  "url": "https://api.example.com",
  "maxCaptureTime": 60000,
  "includeStatic": false
}
```

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

### Start Network Debugger Capture

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Begins network request capturing using the Chrome Debugger API, which includes response bodies. Optionally navigate to a specific `url`.

```json
{
  "url": "https://api.example.com"
}
```

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

### Manually Set Permissions for mcp-chrome-bridge (macOS/Linux)

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/install.md

If automatic fixes fail, manually set execute permissions on the bridge's script files. Replace '/path/to/node_modules/mcp-chrome-bridge' with your actual installation path.

```bash
# Find installation path

```

```bash
npm list -g mcp-chrome-bridge
# Or for pnpm
pnpm list -g mcp-chrome-bridge

# Set execute permissions (replace with actual path)
chmod +x /path/to/node_modules/mcp-chrome-bridge/run_host.sh
chmod +x /path/to/node_modules/mcp-chrome-bridge/index.js
chmod +x /path/to/node_modules/mcp-chrome-bridge/cli.js
```

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

### Run MCP Chrome Bridge Diagnostic Tool

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TROUBLESHOOTING.md

Execute the diagnostic tool to identify and potentially fix common issues with the MCP Chrome Bridge installation and connection.

```bash
mcp-chrome-bridge doctor
```

```bash
mcp-chrome-bridge doctor --fix
```

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

### Clone Repository and Navigate

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Clone the repository and navigate into the project directory to begin development.

```bash
git clone https://github.com/YOUR_USERNAME/chrome-mcp-server.git
cd chrome-mcp-server
```

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

### Build Project

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Execute the build script to compile the project for production.

```bash
npm run build
```

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

### Add Bookmark

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Use this to add a new bookmark, optionally specifying the URL, title, parent folder, and whether to create the folder if it doesn't exist.

```json
{
  "url": "https://example.com",
  "title": "Example Site",
  "parentId": "Work/Resources",
  "createFolder": true
}
```

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

### Development Mode Build

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/BUILD.md

Use this command for a faster build process with an unoptimized version, suitable for development.

```bash
npm run build:dev  # Unoptimized version, faster build
```

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

### Run Tests

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Execute the test suite to ensure the project functions correctly.

```bash
npm run test
```

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

### Send HTTP GET Request

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Sends an HTTP GET request from within the Chrome extension's privileged context, bypassing CORS restrictions. The response includes status, headers, and body.

```json
{ "url": "https://api.github.com/repos/hangwin/mcp-chrome" }
```

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

### MCP Tool: get_windows_and_tabs

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Lists all open browser windows and their tabs. Use this tool to discover `tabId` values needed for other operations. No parameters are required.

```json
// Tool call (no parameters required)
{}

// Response
{
  "windowCount": 2,
  "tabCount": 5,
  "windows": [
    {
      "windowId": 123,
      "tabs": [
        { "tabId": 456, "url": "https://github.com", "title": "GitHub", "active": true },
        { "tabId": 457, "url": "https://example.com", "title": "Example", "active": false }
      ]
    }
  ]
}
```

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

### Retrieve Index Statistics

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Get statistics about the current vector index. This is useful for monitoring the state and readiness of the semantic search engine.

```typescript
// Retrieve index statistics via the tool
const stats = vectorSearchTabsContentTool.getIndexStats();
// → { totalDocuments: 248, totalTabs: 12, semanticEngineReady: true, ... }

```

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

### Check MCP Chrome Bridge Version

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TROUBLESHOOTING.md

Verify that the MCP Chrome Bridge is installed globally by checking its version. This is a useful step when troubleshooting connection failures.

```bash
mcp-chrome-bridge -V
```

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

### Rust SIMDMath Implementation

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/README.md

Illustrates the Rust implementation of SIMD-optimized math functions using wasm-bindgen. This serves as the core logic for the WebAssembly module.

```rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct SIMDMath;

#[wasm_bindgen]
impl SIMDMath {
    #[wasm_bindgen(constructor)]
    pub fn new() -> SIMDMath {
        SIMDMath
    }

    #[wasm_bindgen]
    pub fn cosine_similarity(&self, vec_a: &[f32], vec_b: &[f32]) -> f32 {
        // SIMD-optimized implementation
    }
}
```

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

### Chrome Extension Native Messaging Integration

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Example JavaScript code for a Chrome extension's background script to connect to and communicate with the native messaging host.

```javascript
// background.js
let nativePort = null;
let serverRunning = false;

// 启动Native Messaging服务
function startServer() {
  if (nativePort) {
    console.log('已连接到Native Messaging主机');
    return;
  }

  try {
    nativePort = chrome.runtime.connectNative('com.yourcompany.fastify_native_host');

    nativePort.onMessage.addListener((message) => {
      console.log('收到Native消息:', message);

      if (message.type === 'started') {
        serverRunning = true;
        console.log(`服务已启动，端口: ${message.payload.port}`);
      } else if (message.type === 'stopped') {
        serverRunning = false;
        console.log('服务已停止');
      } else if (message.type === 'error') {
        console.error('Native错误:', message.payload.message);
      }
    });

    nativePort.onDisconnect.addListener(() => {
      console.log('Native连接断开:', chrome.runtime.lastError);
      nativePort = null;
      serverRunning = false;
    });

    // 启动服务器
    nativePort.postMessage({ type: 'start', payload: { port: 3000 } });
  } catch (error) {
    console.error('启动Native Messaging时出错:', error);
  }
}

// 停止服务器
function stopServer() {
  if (nativePort && serverRunning) {
    nativePort.postMessage({ type: 'stop' });
  }
}

// 测试与服务器的通信
async function testPing() {
  try {
    const response = await fetch('http://localhost:3000/ping');
    const data = await response.json();
    console.log('Ping响应:', data);
    return data;
  } catch (error) {
    console.error('Ping失败:', error);
    return null;
  }
}

// 在扩展启动时连接Native主机
chrome.runtime.onStartup.addListener(startServer);

// 导出供popup或内容脚本使用的API
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'startServer') {
    startServer();
    sendResponse({ success: true });
  } else if (message.action === 'stopServer') {
    stopServer();
    sendResponse({ success: true });
  } else if (message.action === 'testPing') {
    testPing().then(sendResponse);
    return true; // 指示我们将异步发送响应
  }
});
```

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

### Simulate Keyboard Input

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Use this to simulate keyboard input or shortcuts. A delay can be specified between keystrokes.

```json
{
  "keys": "Ctrl+A",
  "selector": "#text-input",
  "delay": 100
}
```

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

### Configure Claude Code with Stdio MCP Server

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/mcp-cli-config.md

Use this configuration in `~/.claude/claude_desktop_config.json` for stdio-based MCP communication with Claude Code.

```json
{
  "mcpServers": {
    "chrome-mcp": {
      "command": "node",
      "args": ["/path/to/mcp-chrome/dist/mcp/mcp-server-stdio.js"]
    }
  }
}
```

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

### Tool Execution Flow in Chrome MCP Server

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/ARCHITECTURE.md

Diagram illustrating the step-by-step data flow during a tool execution, from the AI Assistant to the Browser APIs.

```text
┌─────────────┐    ┌──────────────┐    ┌─────────────────┐    ┌──────────────┐
│ AI Assistant│    │ Native Server│    │ Chrome Extension│    │ Browser APIs │
└─────┬───────┘    └──────┬───────┘    └─────────┬───────┘    └──────┬───────┘
      │                   │                      │                   │
      │ 1. Tool Call      │                      │                   │
      ├──────────────────►│                      │                   │
      │                   │ 2. Native Message   │                   │
      │                   ├─────────────────────►│                   │
      │                   │                      │ 3. Execute Tool   │
      │                   │                      ├──────────────────►│
      │                   │                      │ 4. API Response   │
      │                   │                      │◄──────────────────┤
      │                   │ 5. Tool Result      │                   │
      │                   │◄─────────────────────┤                   │
      │ 6. MCP Response   │                      │                   │
      │◄──────────────────┤                      │                   │
```

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

### Run SIMD Performance Tests

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/BUILD.md

Execute the SIMD benchmark tests within the Chrome extension environment.

```typescript
# Run benchmark tests in the Chrome extension
import { runSIMDBenchmark } from './utils/simd-benchmark';
await runSIMDBenchmark();
```

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

### Register mcp-chrome-bridge System-Wide (Windows)

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/install.md

Use this command to register the mcp-chrome-bridge as a system-wide native messaging host on Windows. Administrator privileges may be required.

```bash
mcp-chrome-bridge register --system
```

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

### chrome_keyboard

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Simulate keyboard input and shortcuts.

```APIDOC
## chrome_keyboard

### Description
Simulate keyboard input and shortcuts.

### Parameters
#### Path Parameters
- `keys` (string, required) - Key combination (e.g., "Ctrl+C", "Enter")
- `selector` (string, optional) - Target element selector
- `delay` (number, optional) - Delay between keystrokes in ms (default: 0)

### Request Example
```json
{
  "keys": "Ctrl+A",
  "selector": "#text-input",
  "delay": 100
}
```
```

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

### Capture Browser Console Output

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Use `chrome_console` to retrieve JavaScript console logs, warnings, and errors from a browser tab. Specify `tabId` for a particular tab or omit it to get logs from the active tab.

```json
// Get buffered console output from active tab
{}
```

```json
// Get console output from a specific tab
{ "tabId": 456 }
```

```json
// Response
{
  "success": true,
  "tabId": 456,
  "logs": [
    { "level": "log", "message": "App initialized", "timestamp": 1704067200000 },
    { "level": "error", "message": "Failed to fetch /api/data: 404", "timestamp": 1704067201000 }
  ],
  "count": 2
}
```

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

### Stage and Commit Changes

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Stage all changes and commit them with a descriptive message following Conventional Commits format.

```bash
git add .
git commit -m "feat: add your feature description"
```

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

### chrome_network_capture

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Captures network requests using either the lightweight `webRequest` API (no response bodies) or Chrome's Debugger API (includes response bodies). Auto-selects the backend based on `needResponseBody`. Call with `action: "start"` then `action: "stop"`.

```APIDOC
## MCP Tool: `chrome_network_capture` (unified)

Captures network requests using either the lightweight `webRequest` API (no response bodies) or Chrome's Debugger API (includes response bodies). Auto-selects the backend based on `needResponseBody`. Call with `action: "start"` then `action: "stop"`.

### Request Example (Start capture - webRequest, no response body)
```json
{
  "action": "start",
  "url": "https://api.example.com",
  "maxCaptureTime": 30000,
  "inactivityTimeout": 5000,
  "includeStatic": false
}
```

### Response Example (Start capture)
```json
{ "success": true, "backend": "webRequest", "needResponseBody": false }
```

### Request Example (Start capture WITH response bodies - uses Debugger API)
```json
{
  "action": "start",
  "needResponseBody": true,
  "url": "https://app.example.com/dashboard"
}
```

### Response Example (Start capture with response bodies)
```json
{ "success": true, "backend": "debugger", "needResponseBody": true }
```

### Request Example (Stop and retrieve captured data)
```json
{ "action": "stop" }
```

### Response Example (Stop and retrieve data)
```json
{
  "capturedRequests": [
    {
      "url": "https://api.example.com/users",
      "method": "GET",
      "status": 200,
      "requestHeaders": { "Authorization": "Bearer ..." },
      "responseHeaders": { "Content-Type": "application/json" },
      "responseBody": "{\"users\": [...]}», 
      "responseTime": 142
    }
  ],
  "summary": { "totalRequests": 8, "captureTime": 4231 },
  "backend": "debugger"
}
```
```

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

### Search Bookmarks

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Use this to search bookmarks by keywords, optionally within a specific folder path.

```json
{
  "query": "documentation",
  "maxResults": 20,
  "folderPath": "Work/Resources"
}
```

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

### get_windows_and_tabs

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Lists all currently open browser windows and tabs.

```APIDOC
## get_windows_and_tabs

### Description
List all currently open browser windows and tabs.

### Parameters
None

### Response
#### Success Response (200)
- **windowCount** (number) - The total number of open windows.
- **tabCount** (number) - The total number of open tabs.
- **windows** (array) - An array of window objects, each containing a list of its tabs.
  - **windowId** (number) - The unique identifier for the window.
  - **tabs** (array) - An array of tab objects within the window.
    - **tabId** (number) - The unique identifier for the tab.
    - **url** (string) - The URL of the tab.
    - **title** (string) - The title of the tab.
    - **active** (boolean) - Indicates if the tab is currently active.

### Response Example
```json
{
  "windowCount": 2,
  "tabCount": 5,
  "windows": [
    {
      "windowId": 123,
      "tabs": [
        {
          "tabId": 456,
          "url": "https://example.com",
          "title": "Example Page",
          "active": true
        }
      ]
    }
  ]
}
```
```

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

### Build WASM for Chrome Extension

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/BUILD.md

Use this command from the project root to build the WASM module and automatically copy it to the Chrome extension directory.

```bash
# Build WASM and automatically copy to Chrome extension
npm run build:wasm
```

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

### Build WASM Package Only

Source: https://github.com/hangwin/mcp-chrome/blob/master/packages/wasm-simd/BUILD.md

Build only the WASM package from the 'packages/wasm-simd' directory or using pnpm filter.

```bash
# From the packages/wasm-simd directory
npm run build

# Or from anywhere using pnpm filter
pnpm --filter @chrome-mcp/wasm-simd build
```

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

### Click Element by Ref

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Use this to click an element when its ref is known. This is preferred when available.

```json
{
  "ref": "ref_42"
}
```

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

### chrome_bookmark_add

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Add new bookmarks with folder support.

```APIDOC
## chrome_bookmark_add

### Description
Add new bookmarks with folder support.

### Parameters
#### Path Parameters
- `url` (string, optional) - URL to bookmark (default: current tab)
- `title` (string, optional) - Bookmark title (default: page title)
- `parentId` (string, optional) - Parent folder ID or path
- `createFolder` (boolean, optional) - Create folder if not exists (default: false)

### Request Example
```json
{
  "url": "https://example.com",
  "title": "Example Site",
  "parentId": "Work/Resources",
  "createFolder": true
}
```
```

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

### Execute Dynamic Flow Tools

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Dynamic flows, published via the Chrome extension's visual builder, are exposed as `flow.<slug>` tools. Flow variables become typed parameters. Options like `tabTarget`, `refresh`, `captureNetwork`, `returnLogs`, and `timeoutMs` can be configured.

```json
// A flow named "login-to-app" with variable "username" and "password"
// is automatically available as tool "flow.login-to-app"
{
  "username": "alice@example.com",
  "password": "s3cr3t",
  "tabTarget": "new",
  "refresh": true,
  "captureNetwork": true,
  "returnLogs": true,
  "timeoutMs": 30000
}

// Response on success
{ "success": true, "logs": [...], "networkRequests": [...] }
```

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

### Configure MCP Client for STDIO

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Configures an MCP client to connect to the Chrome MCP Server using STDIO. This requires specifying the Node.js command and the path to the server script.

```bash
# Find the installed package path
npm list -g mcp-chrome-bridge
# Example output: /usr/local/lib → /usr/local/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js
```

```json
{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "node",
      "args": ["/usr/local/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"]
    }
  }
}
```

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

### Navigate Browser to URL

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Navigates a browser tab to a specified URL. Supports opening new windows, targeting specific tabs, and controlling viewport dimensions. Optional parameters include `newWindow`, `tabId`, `background`, `width`, and `height`.

```json
{
  "url": "https://example.com",
  "newWindow": true,
  "width": 1920,
  "height": 1080
}
```

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

### Implement New Tool

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Implement the logic for a new tool by extending the BaseBrowserToolExecutor class. This involves defining the tool's name and its execution logic.

```typescript
class YourNewTool extends BaseBrowserToolExecutor {
  name = TOOL_NAMES.BROWSER.YOUR_NEW_TOOL;

  async execute(args: YourToolParams): Promise<ToolResult> {
    // Implementation
  }
}
```

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

### get_windows_and_tabs

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Lists all currently open browser windows and their tabs, returning tab IDs, URLs, titles, and active state. Use this to discover `tabId` values required by other tools.

```APIDOC
## MCP Tool: `get_windows_and_tabs`

### Description
Lists all currently open browser windows and their tabs, returning tab IDs, URLs, titles, and active state. Use this to discover `tabId` values required by other tools.

### Parameters

No parameters are required for this tool.

### Request Example
```json
{}
```

### Response
#### Success Response (200)
- **windowCount** (integer) - The total number of open windows.
- **tabCount** (integer) - The total number of open tabs across all windows.
- **windows** (array) - An array of window objects, each containing its tabs.
  - **windowId** (integer) - The unique identifier for the window.
  - **tabs** (array) - An array of tab objects within the window.
    - **tabId** (integer) - The unique identifier for the tab.
    - **url** (string) - The URL of the tab.
    - **title** (string) - The title of the tab.
    - **active** (boolean) - Indicates if the tab is currently active.

#### Response Example
```json
{
  "windowCount": 2,
  "tabCount": 5,
  "windows": [
    {
      "windowId": 123,
      "tabs": [
        { "tabId": 456, "url": "https://github.com", "title": "GitHub", "active": true },
        { "tabId": 457, "url": "https://example.com", "title": "Example", "active": false }
      ]
    }
  ]
}
```
```

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

### Reinstall mcp-chrome-bridge with Permissions Fix (Windows)

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/install.md

If issues persist on Windows, uninstall, reinstall, and then run the permission fix command.

```bash
# Uninstall
npm uninstall -g mcp-chrome-bridge
# Or pnpm uninstall -g mcp-chrome-bridge

# Reinstall
npm install -g mcp-chrome-bridge
# Or pnpm install -g mcp-chrome-bridge

# If still problematic, run permission fix
mcp-chrome-bridge fix-permissions
```

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

### chrome_navigate

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Navigates to a URL with optional viewport control.

```APIDOC
## chrome_navigate

### Description
Navigate to a URL with optional viewport control.

### Parameters
#### Query Parameters
- **url** (string, optional): URL to navigate to (omit when `refresh=true`).
- **newWindow** (boolean, optional): Create new window (default: false).
- **tabId** (number, optional): Target an existing tab by ID (navigate/refresh that tab).
- **background** (boolean, optional): Do not activate the tab or focus the window (default: false).
- **width** (number, optional): Viewport width in pixels (default: 1280).
- **height** (number, optional): Viewport height in pixels (default: 720).

### Request Example
```json
{
  "url": "https://example.com",
  "newWindow": true,
  "width": 1920,
  "height": 1080
}
```
```

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

### Styling System Unification

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/chrome-extension/entrypoints/web-editor-v2/attr-ui-refactor.md

Ensures consistent styling across the application by using CSS variables for colors, uniform tokens for dimensions, and removing inline styles.

```css
All colors use CSS variables (completed in Phase 1)
All dimensions use consistent tokens
Remove inline styles, unify in `shadow-host.ts`
```

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

### flow.<slug>

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Executes published record-and-replay automation flows. Each flow is exposed as a tool with its slug as the name prefix `flow.`. Flow variables are typed tool parameters.

```APIDOC
## flow.<slug>

### Description
Executes published record-and-replay automation flows. Each flow's declared variables become typed tool parameters.

### Method
POST

### Endpoint
/flow.<slug>

### Parameters
#### Request Body
- **[variableName]** (type) - Required/Optional - Description of the flow variable. The specific parameters depend on the flow's definition.
- **tabTarget** (string) - Optional - Specifies the tab target for the flow (e.g., "new").
- **refresh** (boolean) - Optional - Whether to refresh the tab before executing the flow.
- **captureNetwork** (boolean) - Optional - Whether to capture network requests during flow execution.
- **returnLogs** (boolean) - Optional - Whether to return console logs from the flow execution.
- **timeoutMs** (integer) - Optional - The timeout in milliseconds for the flow execution.

### Request Example
```json
{
  "username": "alice@example.com",
  "password": "s3cr3t",
  "tabTarget": "new",
  "refresh": true,
  "captureNetwork": true,
  "returnLogs": true,
  "timeoutMs": 30000
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the flow executed successfully.
- **logs** (array) - An array of console logs captured during execution (if `returnLogs` was true).
- **networkRequests** (array) - An array of network requests captured during execution (if `captureNetwork` was true).
```

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

### chrome_read_page

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Build an accessibility-like tree of the current page for semantic element discovery and agent planning.

```APIDOC
## chrome_read_page

### Description
Build an accessibility-like tree of the current page (visible viewport by default) with stable `ref_*` identifiers and viewport info. Useful for semantic element discovery or agent planning.

### Parameters
- `filter` (string, optional): `interactive` to only include interactive elements; default includes structural and labeled nodes.
- `tabId` (number, optional): Target an existing tab by ID (default: active tab).

### Request Example
```json
{
  "filter": "interactive"
}
```

### Response
Response contains `pageContent` (text tree), `viewport`, and a `refMapCount` summary. Use `chrome_get_interactive_elements` or your own logic to act on returned refs.
```

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

### Input Container System

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/chrome-extension/entrypoints/web-editor-v2/attr-ui-refactor.md

Implements a reusable input container system with associated CSS styles.

```typescript
Component + CSS styles
```

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

### Register Native Messaging Host

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/README.md

Use the mcp-chrome-bridge CLI to register the native messaging host for detected or specified browsers.

```bash
mcp-chrome-bridge register --detect
```

```bash
# 仅注册 Chrome
mcp-chrome-bridge register --browser chrome

# 仅注册 Chromium
mcp-chrome-bridge register --browser chromium

# 注册所有支持的浏览器
mcp-chrome-bridge register --browser all
```

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

### Manage Browser Bookmarks

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Use `chrome_bookmark_add`, `chrome_bookmark_search`, and `chrome_bookmark_delete` to manage bookmarks. `chrome_bookmark_add` supports nested folder creation. Bookmarks can be searched by keyword and folder path, and deleted by URL or ID.

```json
// Add current page to a nested folder (creates folders if missing)
{
  "title": "MCP Protocol Spec",
  "url": "https://modelcontextprotocol.io/spec",
  "parentId": "Work/AI/MCP",
  "createFolder": true
}
// Response: { "success": true, "bookmarkId": "123", "title": "MCP Protocol Spec" }
```

```json
// Search bookmarks by keyword within a folder
{
  "query": "typescript",
  "folderPath": "Work/References",
  "maxResults": 10
}
// Response: { "bookmarks": [{ "id": "42", "title": "TypeScript Handbook", "url": "..." }], "count": 1 }
```

```json
// Delete bookmark by URL
{ "url": "https://old-reference.example.com" }
// Response: { "success": true, "deletedCount": 1 }
```

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

### Mermaid Diagram of Chrome MCP Server Architecture

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/ARCHITECTURE.md

Visual representation of the system architecture, illustrating the interaction between different layers and components.

```mermaid
graph TB
    subgraph "AI Assistant Layer"
        A[Claude Desktop]
        B[Custom MCP Client]
        C[Other AI Tools]
    end

    subgraph "MCP Protocol Layer"
        D[HTTP/SSE Transport]
        E[MCP Server Instance]
        F[Tool Registry]
    end

    subgraph "Native Server Layer"
        G[Fastify HTTP Server]
        H[Native Messaging Host]
        I[Session Management]
    end

    subgraph "Chrome Extension Layer"
        J[Background Script]
        K[Content Scripts]
        L[Popup Interface]
        M[Offscreen Documents]
    end

    subgraph "Browser APIs Layer"
        N[Chrome APIs]
        O[Web APIs]
        P[Native Messaging]
    end

    subgraph "AI Processing Layer"
        Q[Semantic Engine]
        R[Vector Database]
        S[SIMD Math Engine]
        T[Web Workers]
    end

    A --> D
    B --> D
    C --> D
    D --> E
    E --> F
    F --> G
    G --> H
    H --> P
    P --> J
    J --> K
    J --> L
    J --> M
    J --> N
    J --> O
    J --> Q
    Q --> R
    Q --> S
    Q --> T
```

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

### Configure Codex CLI with HTTP MCP Server

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/mcp-cli-config.md

Add this configuration to your `~/.codex/config.json` file to connect Codex CLI to the Chrome MCP Server via HTTP.

```json
{
  "mcpServers": {
    "chrome-mcp": {
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}
```

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

### Create Feature Branch

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/CONTRIBUTING.md

Create a new branch for your feature development using Git.

```bash
git checkout -b feature/your-feature-name
```

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

### chrome_computer

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Unified advanced interaction tool for high-level DOM actions like clicking, typing, scrolling, and more, with CDP fallback.

```APIDOC
## chrome_computer

### Description
Unified advanced interaction tool that prioritizes high-level DOM actions with CDP fallback. Supports hover, click, drag, scroll, typing, key chords, fill, wait and screenshot. If a recent screenshot was taken via `chrome_screenshot`, coordinates are auto-scaled from screenshot space to viewport space.

### Parameters
- `action` (string, required): `left_click` | `right_click` | `double_click` | `triple_click` | `left_click_drag` | `scroll` | `type` | `key` | `fill` | `hover` | `wait` | `screenshot`
- `tabId` (number, optional): Target an existing tab by ID (default: active tab)
- `background` (boolean, optional): Avoid focusing/activating tab/window for certain operations (best-effort)
- `ref` (string, optional): element ref from `chrome_read_page` (preferred). Used for click/scroll/type/key and as drag end when provided
- `coordinates` (object, optional): `{ "x": 100, "y": 200 }` for click/scroll or drag end
- `startRef` (string, optional): element ref for drag start
- `startCoordinates` (object, optional): for `left_click_drag` when no `startRef`
- `scrollDirection` (string, optional): `up` | `down` | `left` | `right`
- `scrollAmount` (number, optional): ticks 1–10 (default 3)
- `text` (string, optional): for `type` (raw text) or `key` (space-separated chords/keys like `"cmd+a Enter"`)
- `duration` (number, optional): seconds for `wait` (max 30)
- `selector` (string, optional): for `fill` when no `ref`
- `value` (string, optional): for `fill` value

### Request Examples
```json
{ "action": "left_click", "coordinates": { "x": 420, "y": 260 } }
```

```json
{ "action": "key", "text": "cmd+a Backspace" }
```

```json
{ "action": "fill", "ref": "ref_7", "value": "user@example.com" }
```

```json
{ "action": "hover", "ref": "ref_12", "duration": 0.6 }
```

```json
{ "action": "left_click_drag", "startRef": "ref_10", "ref": "ref_15" }
```
```

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

### Simulate Keyboard Input with chrome_keyboard

Source: https://context7.com/hangwin/mcp-chrome/llms.txt

Simulates keyboard input and shortcuts on the active or specified tab's focused element. Supports key combinations and delays.

```json
{ "keys": "Ctrl+A" }
```

```json
{ "keys": "Enter", "selector": "#search-box", "delay": 50 }
```

```json
{ "keys": "H e l l o", "delay": 100 }
```

```json
{ "success": true, "keys": "Ctrl+A", "tabId": 456 }
```

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

### chrome_go_back_or_forward

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Navigates browser history back or forward.

```APIDOC
## chrome_go_back_or_forward

### Description
Navigate browser history.

### Parameters
#### Query Parameters
- **direction** (string, required): "back" or "forward".
- **tabId** (number, optional): Specific tab ID (default: active tab).

### Request Example
```json
{
  "direction": "back",
  "tabId": 123
}
```
```

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

### Fill Form Field or Select Option

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Use this to fill input fields or select options in dropdowns. Provide either a ref or a selector to identify the target element.

```json
{
  "ref": "ref_7",
  "value": "user@example.com"
}
```

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

### Response Format

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

This details the standard JSON response format for tool calls, including success and error structures.

```json
{
  "content": [
    {
      "type": "text",
      "text": "JSON string containing the actual response data"
    }
  ],
  "isError": false
}
```

```json
{
  "content": [
    {
      "type": "text",
      "text": "Error message describing what went wrong"
    }
  ],
  "isError": true
}
```

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

### chrome_switch_tab

Source: https://github.com/hangwin/mcp-chrome/blob/master/docs/TOOLS.md

Switches to a specific browser tab.

```APIDOC
## chrome_switch_tab

### Description
Switch to a specific browser tab.

### Parameters
#### Query Parameters
- **tabId** (number, required): The ID of the tab to switch to.
- **windowId** (number, optional): The ID of the window where the tab is located.

### Request Example
```json
{
  "tabId": 456,
  "windowId": 123
}
```
```

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

### Enable Verbose Logging for mcp-chrome-bridge

Source: https://github.com/hangwin/mcp-chrome/blob/master/app/native-server/install.md

Add the --verbose flag to commands to enable detailed logging, which can help in diagnosing complex issues.

```bash
mcp-chrome-bridge --verbose
```