Webpage MCP

How It Works

┌──────────┐     MCP stdio    ┌───────────────┐
│ AI Client├─────────────────►│   MCP Server  │
└──────────┘                  └───────┬───────┘
       Native Messaging stdin/stdout  │
                                      │
┌─────────────┐  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. MCP clients connect over stdio only (no localhost HTTP transport).

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.

Related MCP server: Chrome MCP Server

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 MCP transport stay on the local machine. That local transport boundary does not mean all data processed through the product always stays local. Browser content can leave the machine when a connected 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

Connecting AI Clients

Use stdio transport via npx:

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

Claude Desktop Configuration

Add to your Claude Desktop MCP config (claude_desktop_config.json) — use the same npx stdio config above.

Codex Configuration

Codex stores MCP configuration in ~/.codex/config.toml by default. You can also use a project-local .codex/config.toml when the server should only be enabled for one repository.

Add webpage-mcp with a [mcp_servers.<server-name>] TOML table:

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

command is required. args is optional and should be an array when used.

You can also add it with Codex CLI:

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

After adding the server, restart Codex if needed and use /mcp in the Codex TUI to confirm webpage-mcp is enabled.

Local Absolute Path (Dev)

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

• The current architecture is fully native/stdio and does not expose localhost MCP/agent HTTP endpoints.

• Multiple instances are identified by instanceId; data transport is native/stdio only.

• For npx usage, keep -p webpage-mcp@latest in args so webpage-mcp-stdio resolves as the executed bin.

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           # Build and copy to extension

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

Troubleshooting

1. Ensure the native host is registered: npx -y webpage-mcp@latest doctor

2. Check that Node.js >= 22 is available at the registered path (Node.js 24 LTS recommended)

3. Check that the Chrome extension and webpage-mcp npm package versions match, especially after a fresh npm release

4. Prefer the exact register command generated in extension popup/welcome and run it once

5. Fully restart Chrome (quit all Chrome processes), then click Connect again

1. Ensure Chrome is open and the extension is enabled

2. Ensure native host is connected (npx -y webpage-mcp@latest doctor)

3. Use npx stdio config in your MCP client (command: "npx", args: ["-y", "-p", "webpage-mcp@latest", "webpage-mcp-stdio"])

1. Make sure Chrome is open with the extension enabled

2. Check the extension's service worker console for errors (chrome://extensions/ > Inspect views)

3. Some tools (e.g., chrome_network_capture) require specific page states

npx -y webpage-mcp@latest report --copy    # Copies to clipboard
npx -y webpage-mcp@latest doctor --fix     # Auto-fix common issues

CI/CD

Chrome Web Store submission and rollout are manual external steps. Before every upload, review submission, or rollout, complete the Chrome Web Store release and privacy checklist; the repository workflow does not validate Developer Dashboard fields or the live store listing.

ci.yml

• Trigger: pushes and pull requests on main/develop

• Runs: frozen install, production npm and Rust advisory gates, lint, typecheck (mcp/shared + extension), tests, build

dependency-security.yml

• Trigger: daily at 04:17 UTC and manual dispatch

• Audits the committed production pnpm and Cargo lockfile graphs without installing project dependencies or executing dependency lifecycle scripts

• Uses the same fail-closed npm and Rust advisory checks as CI and release, so newly disclosed advisories are detected even when source code is unchanged

The Rust gate installs the Linux x64 musl cargo-deny binary described by scripts/cargo-deny-tool.json. The installer accepts only GitHub's fixed HTTPS release-asset redirect, streams into a bounded temporary file, verifies both the archive and extracted executable by exact byte count and SHA-256, installs mode 0755 atomically, and probes the pinned version through an absolute path. The workflow first validates the Cargo graph with cargo metadata --locked, then runs cargo-deny without its --locked/--offline flags so the RustSec database is refreshed on every gate; download, refresh, and scan failures remain fatal.

WASM rebuild gates apply the same byte-verification pipeline to the official Linux x64 musl wasm-pack release described by scripts/wasm-pack-tool.json. Both its archive and extracted executable are size- and SHA-256-pinned, and the artifact builder invokes that verified executable by absolute path.

Dependabot checks GitHub Actions, the root pnpm workspace, and the Rust/WASM crate weekly. Live advisory databases can make an unchanged commit fail a subsequent CI or release run; resolve or explicitly review the advisory rather than weakening the gate.

release.yml

• Trigger: tag push v* and manual dispatch. A branch dispatch with publish_npm=false remains available as a build-only release dry run.

• Before artifact construction, the workflow binds the event to one immutable commit SHA and requires Linux, Windows, and macOS gates on that exact commit. Every gate performs a frozen workspace install, typechecks, tests, builds, and exchanges a native-message ping/pong through the built platform wrapper. Production npm and Rust advisory checks and coverage are collected only by the Linux gate rather than repeated on all three operating systems.

• Unified releases accept stable x.y.z versions only. Prerelease (-rc.1, -beta.1) and build-metadata (+build.1) versions are rejected before any artifact or publish step because Chrome's update version is numeric and must stay aligned with the npm package version.

• Builds release assets:

  • Chrome extension zip (app/chrome-extension/.output/webpage-mcp-connector-<version>-chrome-extension.zip)

  • MCP server npm tarball (.tgz)

  • SHA256SUMS.txt

• Verifies that each artifact contains the reviewed LICENSE, THIRD_PARTY_NOTICES.md, and THIRD_PARTY_COMPONENTS.json bytes; the extension ZIP must also contain its reviewed THIRD_PARTY_LICENSES.txt.

• On tag pushes, creates a GitHub Release and uploads assets

• On tag pushes (v*), publishes webpage-mcp to npm (requires NPM_AUTH_TOKEN secret)

• Manual npm publish is available via workflow_dispatch with publish_npm=true only when the selected ref is the exact matching v<package-version> tag. A branch dispatch that requests publishing fails closed.

• The npm mutation job uses the npm-publish GitHub Environment so repository administrators can configure required reviewers or other deployment protection rules.

• Formal release builds require the Actions repository variable CHROME_EXTENSION_PUBLIC_KEY. It must contain the single-line base64 DER public-key body from Chrome Web Store, never a PEM or private key, and must derive the configured official extension ID. Local builds may omit it, but then unpacked builds do not use the official stable extension ID.

Acknowledgements

This project is based on hangwin/mcp-chrome. Special thanks to the original author and all contributors for their foundational work.

License

MIT