DEV Community

RemoteBrowser
RemoteBrowser

Posted on Originally published at remote-browser.dev

Playwright Chrome Extension: What It Is and What to Use Instead

Playwright Chrome Extension: What It Is and What to Use Instead

If you searched for a "Playwright Chrome Extension," you're probably trying to do one of two things: drive your existing Chrome browser with Playwright, or find a browser extension that adds Playwright-style control to Chrome. There is no official Playwright Chrome Extension on the Chrome Web Store. Playwright is a Node/Python/.NET/Java library that launches or connects to browsers over the Chrome DevTools Protocol (CDP) — it does not ship as a browser add-on. What you actually want is one of three things: connectOverCDP to an existing Chrome instance, a remote browser runtime you connect to over CDP, or a third-party extension that wraps CDP for you. This guide covers all three, with the trade-offs that matter in production.

Why there's no official Playwright Chrome Extension

Playwright's architecture is deliberately outside the browser. It speaks CDP (for Chromium) and its own protocol (for Firefox and WebKit) from a driver process. That design gives it capabilities a browser extension can't match: multi-context isolation, network interception at the protocol layer, tracing, and deterministic waits. A Chrome extension runs inside a single browser profile, is subject to extension permission limits, and cannot spawn isolated contexts.

So when people say "Playwright Chrome Extension," they usually mean one of:

  • Connect Playwright to my running Chrome — via chromium.connectOverCDP() against a Chrome launched with --remote-debugging-port.
  • A remote browser I can drive with Playwright — a hosted Chromium session exposing a CDP endpoint.
  • A Chrome extension that automates the browser — e.g. recorder-style tools, which are a different category entirely.

If you want the conceptual background on why agents and test harnesses need a dedicated runtime rather than a local browser, see Remote Browser for AI Agents.

Option 1: Connect Playwright to your existing Chrome via CDP

This is the closest thing to a "Playwright Chrome Extension" workflow. You launch Chrome with a debugging port, then attach Playwright to it. Your existing cookies, extensions, and logged-in sessions stay intact.

Launch Chrome with a debugging port

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-playwright-profile

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-playwright-profile
Enter fullscreen mode Exit fullscreen mode

The --user-data-dir flag matters. Without it, Chrome may refuse to open the debugging port if another Chrome instance is already running with the default profile.

Attach with connectOverCDP

import { chromium, Browser, BrowserContext, Page } from 'playwright';

async function attachToChrome(): Promise<void> {
  // connectOverCDP attaches to an already-running Chromium/Chrome.
  // It does NOT launch a new browser.
  const browser: Browser = await chromium.connectOverCDP(
    'http://127.0.0.1:9222'
  );

  // Existing contexts are exposed; there is no default context to create.
  const contexts: BrowserContext[] = browser.contexts();
  const context: BrowserContext = contexts[0] ?? (await browser.newContext());

  const pages: Page[] = context.pages();
  const page: Page = pages[0] ?? (await context.newPage());

  await page.goto('https://example.com');
  console.log(await page.title());

  // Do NOT call browser.close() — that would kill the user's Chrome.
  // Instead, disconnect the Playwright client:
  await browser.close();
}

attachToChrome().catch((err) => {
  console.error('CDP attach failed:', err);
  process.exit(1);
});
Enter fullscreen mode Exit fullscreen mode

Two things trip people up here. First, connectOverCDP is Chromium-only — it does not work with Firefox or WebKit. Second, browser.close() on a CDP-attached browser closes the underlying browser, not just the connection. If you're attaching to a user's Chrome, you want to disconnect without killing it. The Playwright docs on BrowserType.connectOverCDP cover the exact semantics.

When this approach breaks down

  • CI and containers — there's no "existing Chrome" to attach to unless you launch one first, at which point you've just reimplemented launch().
  • Concurrency — one Chrome instance with one profile is not a multi-tenant runtime. Parallel jobs need isolated contexts or separate browsers.
  • State drift — a long-lived local Chrome accumulates cookies, extensions, and memory. Tests become non-reproducible.
  • Remote access — exposing port 9222 to the network is a security problem. CDP has no authentication by default.

Option 2: A remote browser runtime you connect to over CDP

This is where most production teams land. Instead of managing Chrome on every worker, you connect Playwright to a hosted Chromium session that already exposes a CDP endpoint. The connection code is nearly identical to Option 1 — only the URL changes.

import { chromium } from 'playwright';

const wsEndpoint = process.env.REMOTE_BROWSER_CDP_URL!; // e.g. wss://.../cdp

const browser = await chromium.connectOverCDP(wsEndpoint);
const context = await browser.newContext({
  // Configurable browser settings are applied server-side:
  // viewport, locale, timezone, proxy, and session isolation.
  viewport: { width: 1280, height: 800 },
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'shot.png' });
await browser.close(); // closes the remote session, not a local browser
Enter fullscreen mode Exit fullscreen mode

The practical differences from local Chrome:

Concern Local Chrome + CDP Hosted Chromium runtime
Setup Install Chrome, manage flags, profiles Paste a CDP URL
Isolation One profile per instance Session-isolated contexts
Concurrency Manual process management Sessions provisioned per job
Proxies Per-launch flags Configurable per session
Live debugging Local DevTools only Live viewer + CDP
Persistence Local profile dir Persistent profiles across sessions
Cost model Your infra + ops time Metered per browser-hour (see pricing)

If you're weighing self-hosting against a managed runtime, the trade-offs are covered in Remote Browser Online. The short version: self-hosting is cheaper at low volume and much more expensive once you factor in ops, proxy management, and session cleanup.

Option 3: Third-party Chrome extensions that wrap CDP

There are Chrome extensions that expose a CDP-like control surface, and there are extensions that record and replay browser actions. These are not Playwright. They typically:

  • Run inside a single profile with extension permissions.
  • Cannot create isolated browser contexts.
  • Cannot intercept network at the protocol layer the way Playwright can.
  • Break when Chrome updates its extension APIs.

If your goal is a quick recorder for a manual workflow, an extension is fine. If your goal is reproducible automation, tests, or agent workloads, you want Playwright (or Puppeteer) talking to a real browser over CDP. The same logic applies to Puppeteer — see how Puppeteer connects to existing browsers for the parallel workflow.

Playwright launch options that matter in production

Whether you launch locally or connect remotely, the launchOptions you pass shape reliability. The ones that matter most:

  • args — Chromium flags like --disable-dev-shm-usage (containers), --no-sandbox (only when you understand the security trade-off), --disable-gpu (headless servers).
  • headless — headless is faster and more stable in CI; headed is useful for debugging via a live viewer.
  • proxy — route traffic through a specific proxy. In a hosted runtime this is usually configured per session rather than per launch.
  • channelchrome, msedge, or bundled Chromium. Bundled Chromium is the most reproducible.
  • timeout — how long to wait for the browser to start. Remote sessions may need a higher value.

A common production pattern is to keep launch options minimal and push environment-specific settings (proxy, viewport, locale) into the session configuration on the runtime side. That keeps your test code portable between local and hosted execution.

Choosing between the three approaches

Use this as a decision rule:

  • Attaching to your own Chrome — good for debugging a logged-in session, scraping behind an auth wall you already cleared, or one-off scripts. Bad for CI, concurrency, and anything you need to reproduce.
  • Hosted Chromium over CDP — good for CI, agent workloads, parallel jobs, and anything that needs isolation, proxies, or persistent profiles. This is the default for production.
  • Chrome extensions — good for manual recording and personal productivity. Not a substitute for a driver library.

The mistake to avoid is treating a local Chrome attach as a production runtime. It works until you need a second concurrent job, a clean profile, or a machine that isn't your laptop.

What to look for in a hosted runtime

If you go the hosted route, evaluate on these criteria rather than marketing claims:

  1. CDP compatibility — does connectOverCDP work unmodified, or do you need a custom SDK?
  2. Session isolation — are contexts truly isolated per job, or shared?
  3. Persistent profiles — can you keep cookies and storage across sessions when you need to?
  4. Proxy and network controls — per-session proxy configuration, not global.
  5. Live debugging — a viewer or CDP access so you can see what the agent saw.
  6. Usage controls — clear metering so you can predict cost. Check /pricing for current rates.
  7. Playwright/Puppeteer/Selenium support — you shouldn't have to rewrite your driver code.

Remote Browser exposes hosted Chromium sessions with CDP access, Playwright/Puppeteer/Selenium compatibility, a live viewer, persistent profiles, configurable browser settings, and session isolation. The connection pattern is the connectOverCDP example above — no proprietary driver required. Full API details are in the /documentation.

A note on "Playwright MCP Chrome Extension"

A related search is "Playwright MCP Chrome extension." MCP (Model Context Protocol) servers for browser control are a separate layer — they expose browser actions as tools to an LLM, and they typically sit on top of Playwright or CDP. They are not Chrome extensions either. If you're building an agent that needs browser tools, the runtime underneath the MCP server is what determines reliability: isolation, proxies, and session lifecycle. A local Chrome attach will not scale to concurrent agent tasks; a hosted runtime will. See Remote Web Browser for how that runtime layer fits into an agent stack.

Summary

There is no official Playwright Chrome Extension. The real options are:

  • chromium.connectOverCDP() to attach to a local Chrome you launched with --remote-debugging-port.
  • chromium.connectOverCDP() to a hosted Chromium session for production, CI, and agent workloads.
  • A third-party extension if you only need manual recording.

For anything beyond a one-off script, the hosted runtime path gives you isolation, proxies, persistent profiles, and live debugging without managing Chrome on every worker. Start with the /documentation to see the CDP connection flow, and check /pricing for current usage rates.

Top comments (0)