Webpage MCP

How It Works

┌──────────────┐  MCP stdio (default)    ┌────────────────────┐
│ Local Client ├────────────────────────►│ webpage-mcp-stdio  │──┐
└──────────────┘                         └────────────────────┘  │
                                                                 ├─ authenticated local IPC
┌──────────────┐  Streamable HTTP        ┌────────────────────┐  │
│ HTTP Client  ├────── (opt-in) ────────►│ webpage-mcp-server │──┘
└──────────────┘   local or remote       └────────────────────┘
                                                      │
                                            Chrome Native Messaging
                                                      │
┌─────────────┐       Chrome APIs          ┌──────────▼───────┐
│ Your Webpage│◄───────────────────────────┤  MCP Connector   │
└─────────────┘        DevTools            └──────────────────┘

The Webpage MCP Connector (Chrome extension) exposes real browser capabilities as MCP tools. The MCP Server bridges AI clients and the connector using Chrome Native Messaging. Local clients use stdio by default. An optional Streamable HTTP gateway can serve an explicitly authorized local HTTP client or a remote MCP client; it is never started automatically.

When the HTTP gateway is not running, the original stdio → authenticated local IPC → Native Messaging path is unchanged and no TCP port is opened. See Streamable HTTP MCP Access for the complete local-loopback and remote setup, lifecycle, and security boundaries.

Webpage MCP is best understood as a browser-native workflow layer for Chrome, not just a page-control bridge. Recent Chrome releases have made Chrome DevTools MCP capable of connecting to active browser sessions, which makes protocol-level control of existing tabs much easier. Webpage MCP complements that model by focusing on what DevTools MCP does not try to be: Chrome extension APIs, saved workflows, in-browser operator UI, semantic cross-tab memory, and page-to-code editing flows.

Privacy and Data Flows

Read the full Webpage MCP Privacy Policy before connecting an MCP client, enabling Agent features, or using the extension on sensitive pages.

Webpage MCP has no hosted Webpage MCP relay. The extension-to-native-host bridge and authenticated internal IPC stay on the local machine, and the default stdio MCP transport is local. If you explicitly start the Streamable HTTP gateway, a loopback client keeps that MCP transport on the same machine, while a remote client sends browser tool requests and results across the configured network path. That transport boundary does not mean all data processed through the product always stays local. Browser content can leave the machine when a remote MCP client, a connected local AI client, a configured Agent engine, a browser/network tool, or the semantic-model downloader contacts an external service.

The extension requests broad capabilities including <all_urls>, history, bookmarks, debugger, webRequest, downloads, scripting, and userScripts because its advertised tools operate across the user's live browser profile. The userScripts permission runs scripts entered locally in the extension UI and places the privileged Web Editor runtime in a dedicated Chrome execution world so ordinary content scripts cannot impersonate it. Chrome requires the separate Allow User Scripts extension toggle described below for those features. Treat an enabled MCP client or Agent session as a privileged browser operator: use trusted clients/providers, keep Agent sandbox/permission settings constrained, avoid sensitive pages when the task does not require them, and inspect high-impact workflow actions before running them.

Privacy verification

• Permissions and host access are owned by wxt.config.ts; changes are visible in the generated manifest during release verification.
• Quick Panel context forwarding and resource bounds are covered by quick-panel-agent-handler.test.ts and quick-panel-agent-bounds.test.ts.
• Remote model provenance, integrity, and cache policy are covered by model-asset-integrity.test.ts and model-cache-manager-security.test.ts.
• Private native Agent storage and log redaction boundaries are covered by storage-permissions.test.ts and claude-secret-logging.test.ts.

Core Features

Comparison with Similar Projects

Playwright-based MCP Servers

Chrome DevTools MCP

Chrome DevTools MCP is an excellent choice when your primary goal is protocol-level debugging of an already-open browser session. Webpage MCP is most valuable one layer above that: browser-native workflows, persistent local automation, and Chrome extension APIs that CDP alone does not cover well.

Best Used Together

A strong local setup is to use Chrome DevTools MCP as the debugging engine and Webpage MCP as the browser-native workflow layer. DevTools MCP can own deep protocol inspection, while Webpage MCP owns browser-native APIs, saved automations, in-browser UI, and page-to-code workflows.

Installation

Quick Start

1. Install the Webpage MCP Connector Chrome extension first in chrome web store. https://chromewebstore.google.com/detail/webpage-mcp-connector/iehgbogeakiedihodennfcnigojnncag?hl=en.

2. Add webpage-mcp to your MCP client config:

{
  "mcpServers": {
    "webpage-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "webpage-mcp@latest", "webpage-mcp-stdio"]
    }
  }
}

3. Start your MCP client (with Chrome open and extension enabled).

webpage-mcp-stdio now performs silent bootstrap on startup: it checks Native Messaging manifest/runtime and auto-registers user-level host when needed.

The Webpage MCP Connector as a whole requires Chrome 135 or newer; releases cannot be installed on older Chrome versions. The user-script manager and Web Editor have an additional browser toggle: in Chrome 135–137, enable Developer mode on chrome://extensions; in Chrome 138 or newer, open the extension's Details page and enable Allow User Scripts before using those features.

4. If extension still cannot connect, use fallback recovery:

1. Open extension welcome.html or popup and copy the register command (already includes current extension ID), then run it:

npx -y webpage-mcp@latest register --browser chrome --force --extension-id <extension_id_from_popup_or_welcome>

2. Run one-shot auto-fix:

npx -y webpage-mcp@latest doctor --fix

3. Use the extension popup status refresh button once to reconnect and sync status, then restart MCP client.

For most users, manual registration is not required because startup bootstrap handles it automatically.

If you did run manual registration, it is typically one-time per machine/profile. You do not need to re-run it for normal restarts (OS/Chrome/MCP client). Re-run only when:

• Extension ID changes
• Manifest path changes
• Installation path changes
• Chrome profile data is reset

Version Compatibility

The Chrome extension and the webpage-mcp npm package are built and released from the same CI pipeline, but Chrome Web Store review and rollout timing is not fixed. This means the latest npm package may be available before the matching Chrome extension version reaches users.

We aim to keep nearby versions compatible. If you run into connection, protocol, or tool behavior issues, first make sure the Chrome extension and the MCP npm package use the same version for the best compatibility.

Build From Source (Developers)

1. Clone and Build

git clone https://github.com/mcpland/webpage-mcp.git
cd webpage-mcp

# Activate and install the exact pnpm release pinned by package.json
corepack enable
corepack install

# Install the committed dependency graph
pnpm install --frozen-lockfile

# Build all packages
pnpm build

2. Install the Chrome Extension

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode (toggle in top right)
3. Click Load unpacked
4. Select the app/chrome-extension/.output/chrome-mv3 folder

This repository does not currently commit binary release zip files. To generate one locally, run pnpm --filter webpage-mcp-connector zip and use the artifact from app/chrome-extension/.output/.

3. Start MCP Client First

Use the local stdio entry in your MCP client config (example below). On startup, mcp-server-stdio will attempt silent bootstrap (manifest/runtime check + user-level auto-register).

4. Fallback: Manual Register (Only If Needed)

If the extension still cannot connect, run:

# From repo root, use the built local CLI entry
node app/mcp-server/dist/cli.js register --detect

# Or specify browser/extension id explicitly
node app/mcp-server/dist/cli.js register --browser chrome --extension-id <your_extension_id>

This writes/updates the JSON manifest in Chrome's NativeMessagingHosts/ directory so Chrome can launch the MCP server process.

5. Verify Installation

# Diagnose installation issues
node app/mcp-server/dist/cli.js doctor

# Generate a full diagnostic report
node app/mcp-server/dist/cli.js report

Open Chrome and click the extension icon — it should show a connected status.

Configuration

Choose an MCP Transport

The stdio transport remains the recommended local setup. The HTTP gateway is an opt-in process that must already be running before a URL-based MCP client connects. See Streamable HTTP MCP Access for the complete macOS, Linux, and Windows guide.

Published Package: Local stdio (Recommended)

Use the published stdio entry through npx:

{
  "mcpServers": {
    "webpage-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "webpage-mcp@latest", "webpage-mcp-stdio"]
    }
  }
}

For Codex, the equivalent ~/.codex/config.toml entry is:

[mcp_servers."webpage-mcp"]
command = "npx"
args = ["-y", "-p", "webpage-mcp@latest", "webpage-mcp-stdio"]

Or add it with the Codex CLI:

codex mcp add webpage-mcp -- npx -y -p webpage-mcp@latest webpage-mcp-stdio

Claude Desktop uses the same command and args values in claude_desktop_config.json. This setup does not start an HTTP listener or open a TCP port.

Optional Streamable HTTP (Local or Remote)

webpage-mcp-server exposes the same Chrome/native bridge through authenticated Streamable HTTP. It is useful when a client requires HTTP or runs on another computer. Published-package users do not need to clone or build this repository.

Same-Computer Loopback Quick Start

On macOS or Linux, create a persistent private bearer-token file:

install -d -m 700 "$HOME/.config/webpage-mcp"
(umask 077 && openssl rand -base64 32 > "$HOME/.config/webpage-mcp/remote-token")

Start the gateway on the same computer as Chrome and keep the process running:

npx -y -p webpage-mcp@latest webpage-mcp-server \
  --host 127.0.0.1 \
  --port 12306 \
  --token-file "$HOME/.config/webpage-mcp/remote-token"

In the terminal that will launch Codex, load the same token:

export WEBPAGE_MCP_REMOTE_TOKEN="$(
  tr -d '\r\n' < "$HOME/.config/webpage-mcp/remote-token"
)"

Configure Codex to connect directly to the already-running HTTP gateway:

[mcp_servers."webpage-mcp-http"]
url = "http://127.0.0.1:12306/mcp"
bearer_token_env_var = "WEBPAGE_MCP_REMOTE_TOKEN"
tool_timeout_sec = 120

Before starting Codex, verify both the listener and Chrome bridge:

curl --fail http://127.0.0.1:12306/healthz
curl --fail \
  -H "Authorization: Bearer ${WEBPAGE_MCP_REMOTE_TOKEN}" \
  http://127.0.0.1:12306/readyz

/healthz checks the HTTP process; /readyz also checks the Connector/native-host path. A Codex url entry does not launch webpage-mcp-server. Start the gateway separately for every session, or manage it with an operator-controlled service manager.

For one MCP client, normally enable either its stdio entry or its HTTP entry so the Webpage MCP tools do not appear twice. The transports may remain active simultaneously for different clients.

Windows PowerShell token creation/loading, non-Codex clients, local source builds, process lifecycle, and troubleshooting are documented in Streamable HTTP MCP Access.

Private-Network or Remote Access

Do not expose the loopback command by merely changing its bind address. A non-loopback listener requires a bearer token, an allowed Host, and TLS unless plaintext is explicitly acknowledged. A direct TLS example is:

npx -y -p webpage-mcp@latest webpage-mcp-server \
  --host 0.0.0.0 \
  --allowed-host mcp-host.example.internal \
  --token-file "$HOME/.config/webpage-mcp/remote-token" \
  --tls-cert /path/to/fullchain.pem \
  --tls-key /path/to/private-key.pem

Configure Codex on the remote client with the externally reachable URL:

[mcp_servers."webpage-mcp-http"]
url = "https://mcp-host.example.internal:12306/mcp"
bearer_token_env_var = "WEBPAGE_MCP_REMOTE_TOKEN"
tool_timeout_sec = 120

Transfer the token to the client through a secure channel and set WEBPAGE_MCP_REMOTE_TOKEN in the Codex process environment. Do not put the token in the URL. Read Streamable HTTP MCP Access before binding outside loopback; it covers direct TLS, reverse proxies, VPN/tunnel deployment, Host/Origin checks, firewall boundaries, probes, and failure recovery.

Local Absolute Path (Developers)

For local development, you can point MCP directly to the built stdio entry:

{
  "mcpServers": {
    "webpage-mcp-local": {
      "command": "node",
      "args": [
        "/Users/your-user/path/to/webpage-mcp/app/mcp-server/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

Important:

• This stdio process still depends on the native bridge socket created by the Chrome Native host.
• Keep Chrome open and ensure the extension is connected to native host.
• Default bridge socket path (macOS/Linux): ~/.webpage-mcp/native-<uid>.sock.
• If you customized WEBPAGE_MCP_NATIVE_SOCKET, both processes must use the same value.

Notes

• Native Messaging and the authenticated local IPC bridge remain required for both MCP transports.
• webpage-mcp-stdio is the default local transport. webpage-mcp-server opens the optional HTTP listener only when you run it explicitly.
• Multiple Connector instances are identified by instanceId; both gateways route through the same native host.
• For npx usage, keep -p webpage-mcp@latest in args so webpage-mcp-stdio resolves as the executed bin.
• After an npm upgrade, reconnect the extension's Native connection or fully restart Chrome if the HTTP /readyz probe fails; an already-running Native Host does not hot-reload refreshed runtime files.

MCP Browser Tools

Additional Capabilities

• Agent Setup Sidepanel — Select the workspace and Agent session used by Quick Panel and Web Editor; new Claude and Codex sessions use constrained defaults, while bypass/full-access modes require an explicit risk confirmation
• Record, Replay, and Publish — Record browser actions, replay them as automated flows, publish reusable flows, and expose them as dynamic MCP tools (flow.<slug>)
• Triggerable Browser Workflows — Launch flows from URL matches, DOM appearance, intervals, one-time schedules, keyboard commands, and context-menu actions
• Web Editor — Visual in-page DOM editor overlay with a property panel, transaction system, undo/redo, and structured apply-to-code handoff (Cmd+Shift+E)
• Quick Panel — Keyboard-triggered floating AI chat accessible from any page, with page context and streaming responses (Cmd+Shift+U)
• Semantic Search — On-device multilingual E5 embeddings with an HNSW vector index for searching tab content across live browser state. Remote tokenizer and model URLs use immutable Hugging Face commit revisions; downloaded ONNX binaries must also match the checked-in size and SHA-256 manifest before they are cached for offline reuse.
• Element Marker — Annotate DOM elements with stable names/selectors so agents and workflows can refer to page targets more reliably

Development

Quick Start

The root packageManager contract pins both pnpm 10.34.5 and its registry SHA-512 digest. Use Corepack so local installs honor the same reviewed package manager bytes as CI.

# Activate the repository-pinned pnpm and install dependencies
corepack enable
corepack install
pnpm install --frozen-lockfile

# Start all packages in dev mode (shared builds first, then parallel)
pnpm dev

Individual Package Commands

# Chrome extension
pnpm dev:extension        # Dev mode with HMR
pnpm build:extension      # Production build

# MCP server
pnpm dev:mcp              # Dev mode with auto-reload
pnpm build:mcp            # Production build

# Shared library
pnpm dev:shared           # Watch mode
pnpm build:shared         # Production build

# WASM SIMD (requires Rust toolchain)
pnpm build:wasm           # Linux x64: build canonical release bytes
pnpm verify:wasm:runtime  # Any platform: verify committed runtime

Testing

# Chrome extension tests (Vitest)
cd app/chrome-extension && pnpm test

# MCP server tests (Vitest)
cd app/mcp-server && pnpm test

Linting & Formatting

pnpm lint          # Run ESLint across all packages
pnpm lint:fix      # Auto-fix lint issues
pnpm format        # Format with Prettier
pnpm typecheck     # TypeScript type checking

Dependency License Inventory

pnpm legal:check verifies the committed, full production npm closures against the frozen pnpm graph and lockfile without using the network. It also checks locally available package metadata and license evidence, the exact Cargo notice closure, and the reviewed legal-file digests.

After an intentional dependency or lockfile change, refresh the inventories with node scripts/legal-notices.mjs refresh. Refresh downloads registry tarballs without running dependency lifecycle scripts and accepts evidence only after the complete tarball matches the lockfile SHA-512 integrity. Review the resulting THIRD_PARTY_COMPONENTS.json files and notice changes before committing them.

The machine-readable inventories describe production install/build inputs; they do not assert that every component is emitted into a bundle. The release artifacts include those inventories byte-for-byte. Human-readable THIRD_PARTY_NOTICES.md files summarize distribution boundaries, while the extension's THIRD_PARTY_LICENSES.txt covers emitted or vendored code and its attributions.

CLI Reference

Register Options

npx -y webpage-mcp@latest register [options]

Options:
  -f, --force              Compatibility flag (accepted; registration is currently idempotent)
  -s, --system             System-level install (requires sudo/admin)
  -b, --browser <browser>  Target browser: chrome, chromium, or all
  -d, --detect             Auto-detect installed browsers
  -e, --extension-id <id>  Override extension ID(s) for allowed_origins (comma-separated)

When --browser chrome is used, the installer also writes channel-compatible manifests on macOS/Linux (for example Chrome Stable/Beta/Canary/Chrome for Testing paths) to reduce "native host not found" channel mismatch issues. The installer also attempts to discover local unpacked Webpage MCP Connector extension IDs from browser profiles and add them to allowed_origins.

For unpacked extensions with a custom ID, you can re-register with:

npx -y webpage-mcp@latest register --browser chrome --extension-id <your_extension_id>

The extension popup and welcome page can generate this command automatically using chrome.runtime.id, which avoids manual ID lookup mistakes. The generated command may include --force; this flag is optional.

Tech Stack