1"use strict";(self.webpackChunkplaywright_dev=self.webpackChunkplaywright_dev||[]).push([["5064"],{25818(e,n,o){o.r(n),o.d(n,{metadata:()=>r,default:()=>h,frontMatter:()=>i,contentTitle:()=>c,toc:()=>l,assets:()=>a});var r=JSON.parse('{"id":"configuration/browser-extension","title":"Connecting to Browsers","description":"Instead of launching a new browser, connect to one that\'s already running.","source":"@site/mcp/configuration/browser-extension.mdx","sourceDirName":"configuration","slug":"/configuration/browser-extension","permalink":"/mcp/configuration/browser-extension","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Connecting to Browsers"},"sidebar":"mcp","previous":{"title":"Profile & State","permalink":"/mcp/configuration/user-profile"},"next":{"title":"Configuration","permalink":"/mcp/configuration/options"}}'),s=o(74848),t=o(28453);let i={title:"Connecting to Browsers"},c="Connecting to Browsers",a={},l=[{value:"Connect by channel name",id:"connect-by-channel-name",level:2},{value:"Connect via CDP endpoint",id:"connect-via-cdp-endpoint",level:2},{value:"Connect to a Playwright server",id:"connect-to-a-playwright-server",level:2},{value:"Connect via browser extension",id:"connect-via-browser-extension",level:2},{value:"When to use extension mode",id:"when-to-use-extension-mode",level:3}];function d(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"connecting-to-browsers",children:"Connecting to Browsers"})}),"\n",(0,s.jsx)(n.p,{children:"Instead of launching a new browser, connect to one that's already running."}),"\n",(0,s.jsx)(n.h2,{id:"connect-by-channel-name",children:"Connect by channel name"}),"\n",(0,s.jsxs)(n.p,{children:["Connect to a running Chrome or Edge by its channel name. Navigate to ",(0,s.jsx)(n.code,{children:"chrome://inspect/#remote-debugging"}),' in the target browser and enable "Allow remote debugging for this browser instance".']}),"\n",(0,s.jsx)("img",{src:"/img/mcp/chrome-remote-debugging.png",width:"752",height:"426",alt:"Chrome remote debugging settings at chrome://inspect/#remote-debugging"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "mcpServers": {\n "playwright": {\n "command": "npx",\n "args": ["@playwright/mcp@latest", "--cdp-endpoint=chrome"]\n }\n }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Supported channels: ",(0,s.jsx)(n.code,{children:"chrome"}),", ",(0,s.jsx)(n.code,{children:"chrome-beta"}),", ",(0,s.jsx)(n.code,{children:"chrome-dev"}),", ",(0,s.jsx)(n.code,{children:"chrome-canary"}),", ",(0,s.jsx)(n.code,{children:"msedge"}),", ",(0,s.jsx)(n.code,{children:"msedge-beta"}),", ",(0,s.jsx)(n.code,{children:"msedge-dev"}),", ",(0,s.jsx)(n.code,{children:"msedge-canary"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"This is the simplest way to connect \u2014 no need to start Chrome with special flags or know the debugging port."}),"\n",(0,s.jsx)(n.h2,{id:"connect-via-cdp-endpoint",children:"Connect via CDP endpoint"}),"\n",(0,s.jsx)(n.p,{children:"Connect to any Chromium-based browser with a Chrome DevTools Protocol endpoint:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "mcpServers": {\n "playwright": {\n "command": "npx",\n "args": ["@playwright/mcp@latest", "--cdp-endpoint=http://localhost:9222"]\n }\n }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Or in the ",(0,s.jsx)(n.a,{href:"/mcp/configuration/options",children:"config file"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "browser": {\n "cdpEndpoint": "http://localhost:9222"\n }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Works with Chrome/Chromium started with ",(0,s.jsx)(n.code,{children:"--remote-debugging-port"}),", Edge, Electron apps, and cloud browser services."]}),"\n",(0,s.jsx)(n.h2,{id:"connect-to-a-playwright-server",children:"Connect to a Playwright server"}),"\n",(0,s.jsxs)(n.p,{children:["To attach to a browser already running behind a Playwright server, use ",(0,s.jsx)(n.code,{children:"--endpoint"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "mcpServers": {\n "playwright": {\n "command": "npx",\n "args": ["@playwright/mcp@latest", "--endpoint=ws://localhost:3000/"]\n }\n }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["In the ",(0,s.jsx)(n.a,{href:"/mcp/configuration/options",children:"config file"})," this is ",(0,s.jsx)(n.code,{children:"browser.remoteEndpoint"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"connect-via-browser-extension",children:"Connect via browser extension"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"https://chromewebstore.google.com/detail/playwright-extension/mmlmfjhmonkocbjadbfplnigmagldckm",children:"Playwright Extension"})," connects to your existing browser tabs, reusing your logged-in sessions, cookies, and installed extensions."]}),"\n",(0,s.jsx)("img",{src:"/img/mcp/playwright-extension.png",width:"662",he
1ight:"427",alt:"Playwright Extension in Chrome Web Store"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Install the extension in Chrome or Edge"}),"\n",(0,s.jsx)(n.li,{children:"Configure the MCP server:"}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "mcpServers": {\n "playwright": {\n "command": "npx",\n "args": ["@playwright/mcp@latest", "--extension"]\n }\n }\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:["By default the extension attaches to the last used browser profile that has the extension installed. Use ",(0,s.jsx)(n.code,{children:"--profile-dir-name"})," to pick a specific one:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'["@playwright/mcp@latest", "--extension", "--profile-dir-name=Profile 1"]\n'})}),"\n",(0,s.jsx)(n.h3,{id:"when-to-use-extension-mode",children:"When to use extension mode"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"SSO / 2FA"})," \u2014 skip complex login flows by reusing your authenticated session"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Browser extensions"})," \u2014 interact with pages that depend on installed extensions"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Existing tabs"})," \u2014 automate pages you already have open"]}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.