> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usechar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Testing Extension Tools

> Use Chrome DevTools MCP to test and debug extension tools from Claude Code

<Note>
  **Private Beta** — [Contact us](mailto:alex@mcp-b.ai?subject=Extension%20Testing) to get set up with the Char Extension.
</Note>

The Char Extension exposes tools from web pages via content scripts. Chrome DevTools MCP provides two tools — `list_extension_tools` and `call_extension_tool` — that let you discover and call those tools directly from Claude Code.

## Prerequisites

1. **Chrome DevTools MCP** installed ([setup guide](/guides/mcp-servers))
2. **Char Extension** installed and active
3. **Chrome launched with remote debugging**:

```bash theme={null}
# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
```

```bash theme={null}
# Linux
google-chrome --remote-debugging-port=9222
```

```bash theme={null}
# Windows
chrome.exe --remote-debugging-port=9222
```

<Warning>
  Chrome must be started with `--remote-debugging-port=9222` **before** any other Chrome windows are open. If Chrome is already running, quit it fully first.
</Warning>

## Install Chrome DevTools MCP

If you're using the Char plugin, it's already configured. Otherwise install manually:

```bash theme={null}
claude mcp add chrome-devtools npx -y @mcp-b/chrome-devtools-mcp@latest
```

Verify with `/mcp` — you should see `chrome-devtools` listed.

<Info>
  Chrome DevTools MCP uses our maintained fork: [`@mcp-b/chrome-devtools-mcp`](https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp). Source: [WebMCP-org/npm-packages](https://github.com/WebMCP-org/npm-packages/tree/main/packages/chrome-devtools-mcp).
</Info>

## Discover extension tools

Navigate to a page that has WebMCP tools registered, then list what the extension sees:

```text theme={null}
Use navigate_page to go to https://your-app.com
Then use list_extension_tools
```

`list_extension_tools` queries the extension's service worker for all tools registered across all tabs. It returns tool names, descriptions, and input schemas.

Use `summary: true` for a compact listing:

```text theme={null}
Use list_extension_tools with summary: true
```

## Call extension tools

Once you know a tool name, call it:

```text theme={null}
Use call_extension_tool with name "get_current_context"
```

Pass arguments as a JSON object:

```text theme={null}
Use call_extension_tool with name "navigate" and arguments { "to": "/dashboard" }
```

## How it works

Both tools use `evaluate_in_extension_worker` internally — they run JavaScript in the extension's background service worker via Chrome DevTools Protocol. No separate MCP server or persistent connection is needed.

```mermaid theme={null}
graph LR
    Claude[Claude Code] -->|CDP| SW[Extension Service Worker]
    SW -->|Content Script| Page[Web Page]
    Page -->|Tool Result| SW
    SW -->|CDP| Claude
```

Each call is stateless. The extension doesn't need any special configuration — `list_extension_tools` reads from the McpHub's in-memory tool registry, and `call_extension_tool` routes through the same content script bridge that the sidepanel uses.

## Extension tools vs WebMCP tools

Chrome DevTools MCP has two parallel tool paths:

|                   | Extension tools                                  | WebMCP tools                                  |
| ----------------- | ------------------------------------------------ | --------------------------------------------- |
| **List**          | `list_extension_tools`                           | `list_webmcp_tools`                           |
| **Call**          | `call_extension_tool`                            | `call_webmcp_tool`                            |
| **How it works**  | Goes through the extension service worker        | Injects directly into page via CDP            |
| **Bot detection** | Pages stay clean — no `navigator.webdriver` flag | CDP page attachment may trigger bot detection |
| **Requires**      | Char Extension installed                         | Nothing — works on any page                   |
| **Tool source**   | Content scripts + user scripts                   | `@mcp-b/global` polyfill on the page          |

Use **extension tools** when the Char Extension is active and you want clean, non-detectable tool execution. Use **WebMCP tools** when testing on pages without the extension.

## Debugging

### Check extension state

Use `evaluate_in_extension_worker` to inspect the extension directly:

```text theme={null}
Use evaluate_in_extension_worker with expression "globalThis.charExtension?.lifecycleState"
```

```text theme={null}
Use evaluate_in_extension_worker with expression "globalThis.charExtension?.hub?.getSerializableTools()?.length"
```

### No tools found

If `list_extension_tools` returns empty:

1. **Is the extension active?** Check `chrome://extensions` — the Char Extension should be enabled
2. **Is the page loaded?** Navigate to the page first, then wait for it to load
3. **Does the page have tools?** Not all pages register WebMCP tools. The page needs `@mcp-b/global` or a user script that calls `registerTool()`
4. **Content script connected?** Check the extension service worker console at `chrome://extensions` → Char → "Inspect views: service worker"

### Tool call fails

If `call_extension_tool` returns an error:

1. **Check the tool name** — Use the exact name from `list_extension_tools`, not the prefixed MCP tool name
2. **Check arguments** — Use `list_extension_tools` (without `summary`) to see the full input schema
3. **Tab still open?** If the tab was closed, cached tools may fail. Navigate back to the page

## See also

<CardGroup cols={2}>
  <Card title="Char Extension" icon="puzzle" href="/guides/char-extension">
    Extension overview
  </Card>

  <Card title="User Scripts" icon="code" href="/guides/extension-user-scripts">
    Write scripts that inject tools
  </Card>

  <Card title="MCP Servers" icon="terminal" href="/guides/mcp-servers">
    Install Chrome DevTools MCP
  </Card>

  <Card title="WebMCP Tools" icon="hammer" href="/guides/webmcp-tools">
    Tools in applications you control
  </Card>
</CardGroup>