[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73625":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":15,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},73625,"playwriter","remorses\u002Fplaywriter","remorses","Chrome extension & CLI to let agents control your browser. Runs Playwright snippets in a stateful sandbox. Available as CLI or MCP","https:\u002F\u002Fplaywriter.dev",null,"HTML",3589,151,14,18,0,6,20,93,28.55,"MIT License",false,"main",[25,26],"mcp","playwright","2026-06-12 02:03:15","\u003Cdiv align='center'>\n    \u003Cbr\u002F>\n    \u003Cpicture>\n        \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"banner-dark.png\" \u002F>\n        \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"banner.png\" \u002F>\n    \u003Cimg src=\"banner.png\" alt=\"Playwriter - For browser automation MCP\" width=\"400\" height=\"278\" \u002F>\n    \u003C\u002Fpicture>\n    \u003Cbr\u002F>\n    \u003Cbr\u002F>\n    \u003Cp>Let your agents control your own Chrome, via CLI or MCP. Your logins, extensions, cookies — already there.\u003C\u002Fp>\n    \u003Cbr\u002F>\n\u003C\u002Fdiv>\n\nOther browser MCPs spawn a fresh Chrome — no logins, no extensions, instantly flagged by bot detectors, double the memory. Playwriter connects to **your running browser** instead. One Chrome extension, full Playwright API, everything you're already logged into.\n\n## Installation\n\n1. [**Install Extension**](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fplaywriter-mcp\u002Fjfeammnjpkecdekppnclgkkffahnhfhe) from Chrome Web Store\n\n2. Click extension icon on a tab → turns green when connected\n\n3. Install the CLI and start automating the browser:\n\n   ```bash\n   npm i -g playwriter\n   playwriter -s 1 -e 'await page.goto(\"https:\u002F\u002Fexample.com\")'\n   ```\n\n4. Install the skill so your agent knows how to use Playwriter:\n   ```bash\n   npx -y skills add remorses\u002Fplaywriter\n   ```\n\n## Quick Start\n\n```bash\nplaywriter browser start  # starts Chrome for Testing\u002FChromium with bundled Playwriter extension\nplaywriter session new  # creates stateful sandbox, outputs session id (e.g. 1)\nplaywriter -s 1 -e 'await page.goto(\"https:\u002F\u002Fexample.com\")'\nplaywriter -s 1 -e 'console.log(await snapshot({ page }))'\nplaywriter -s 1 -e 'await page.locator(\"aria-ref=e5\").click()'\n```\n\n> **Tip:** Always use single quotes for `-e` to prevent bash from interpreting `$`, backticks, and `\\` in your JS code. Use double quotes for strings inside the JS.\n\n## CLI Usage\n\nEach session has **isolated state**. Browser tabs are **shared** across sessions.\n\n```bash\n# Browser management\nplaywriter browser start             # auto-finds Chrome for Testing or Chromium, with recording flags enabled\nplaywriter browser start \u002Fpath\u002Fto\u002Fbrowser-binary\n\n# Session management\nplaywriter session new              # creates stateful sandbox, outputs id (e.g. 1)\nplaywriter session list             # show sessions + state keys\nplaywriter session reset \u003Cid>       # fix connection issues\n\n# Execute (always use -s)\nplaywriter -s 1 -e 'await page.goto(\"https:\u002F\u002Fexample.com\")'\nplaywriter -s 1 -e 'await page.click(\"button\")'\nplaywriter -s 1 -e 'console.log(await page.title())'\n```\n\nCreate your own page to avoid interference from other agents:\n\n```bash\nplaywriter -s 1 -e 'state.myPage = await context.newPage(); await state.myPage.goto(\"https:\u002F\u002Fexample.com\")'\n```\n\nMultiline:\n\n```bash\nplaywriter -s 1 -e $'\nconst title = await page.title();\nconsole.log({ title, url: page.url() });\n'\n```\n\n## Examples\n\nVariables in scope: `page`, `context`, `state` (persists between calls), `require`, and Node.js globals.\n\n**Persist data in state:**\n\n```bash\nplaywriter -e \"state.users = await page.$$eval('.user', els => els.map(e => e.textContent))\"\nplaywriter -e \"console.log(state.users)\"\n```\n\n**Intercept network requests:**\n\n```bash\nplaywriter -e \"state.requests = []; page.on('response', r => { if (r.url().includes('\u002Fapi\u002F')) state.requests.push(r.url()) })\"\nplaywriter -e \"await Promise.all([page.waitForResponse(r => r.url().includes('\u002Fapi\u002F')), page.click('button')])\"\nplaywriter -e \"console.log(state.requests)\"\n```\n\n**Set breakpoints and debug:**\n\n```bash\nplaywriter -e \"state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()\"\nplaywriter -e \"state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))\"\nplaywriter -e \"await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })\"\n```\n\n**Live edit page code:**\n\n```bash\nplaywriter -e \"state.cdp = await getCDPSession({ page }); state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()\"\nplaywriter -e \"await state.editor.edit({ url: 'https:\u002F\u002Fexample.com\u002Fapp.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })\"\n```\n\n**Screenshot with labels:**\n\n```bash\nplaywriter -e \"await screenshotWithAccessibilityLabels({ page })\"\n```\n\n## MCP Setup\n\nUsing the CLI with the skill (step 4 above) is the recommended approach. For direct MCP server configuration, see [MCP.md](.\u002FMCP.md).\n\n## Visual Labels\n\nVimium-style labels for AI agents to identify elements:\n\n```javascript\nawait screenshotWithAccessibilityLabels({ page })\n\u002F\u002F Returns screenshot + accessibility snapshot with aria-ref selectors\nawait page.locator('aria-ref=e5').click()\n```\n\nColor-coded: yellow=links, orange=buttons, coral=inputs, pink=checkboxes, peach=sliders, salmon=menus, amber=tabs.\n\n## Comparison\n\n### vs Playwright MCP\n\n|               | Playwright MCP    | Playwriter                        |\n| ------------- | ----------------- | --------------------------------- |\n| Browser       | Spawns new Chrome | **Uses your Chrome**              |\n| Extensions    | None              | Your existing ones                |\n| Login state   | Fresh             | Already logged in                 |\n| Bot detection | Always detected   | Can bypass (disconnect extension) |\n| Collaboration | Separate window   | Same browser as user              |\n\n> **Note:** Playwriter video recording is **100x more efficient than Playwright video recording**, which sends **base64 images for every frame**.\n\n|                 | Playwright CLI      | Playwriter                    |\n| --------------- | ------------------- | ----------------------------- |\n| Browser         | Spawns new browser  | **Uses your Chrome**          |\n| Login state     | Fresh               | Already logged in             |\n| Extensions      | None                | Your existing ones            |\n| Captchas        | Always blocked      | Bypass (disconnect extension) |\n| Collaboration   | Separate window     | Same browser as user          |\n| Capabilities    | Limited command set | Anything Playwright can do    |\n| Raw CDP access  | No                  | Yes                           |\n| Video recording | File-based tracing  | Native tab capture (30–60fps) |\n\n### vs BrowserMCP\n\n|               | BrowserMCP          | Playwriter               |\n| ------------- | ------------------- | ------------------------ |\n| Tools         | 12+ dedicated tools | 1 `execute` tool         |\n| API           | Limited actions     | Full Playwright          |\n| Context usage | High (tool schemas) | Low                      |\n| LLM knowledge | Must learn tools    | Already knows Playwright |\n\n### vs Antigravity (Jetski)\n\n|          | Jetski                       | Playwriter       |\n| -------- | ---------------------------- | ---------------- |\n| Tools    | 17+ tools                    | 1 tool           |\n| Subagent | Spawns for each browser task | Direct execution |\n| Latency  | High (agent overhead)        | Low              |\n\n### vs Claude Browser Extension\n\n|                      | Claude Extension     | Playwriter              |\n| -------------------- | -------------------- | ----------------------- |\n| Agent support        | Claude only          | Any MCP client          |\n| Windows WSL          | No                   | Yes                     |\n| Context method       | Screenshots (100KB+) | A11y snapshots (5-20KB) |\n| Playwright API       | No                   | Full                    |\n| Debugger\u002Fbreakpoints | No                   | Yes                     |\n| Live code editing    | No                   | Yes                     |\n| Network interception | Limited              | Full                    |\n| Raw CDP access       | No                   | Yes                     |\n\n### vs Built-in Chrome CDP (`--remote-debugging-port`)\n\n|                       | Built-in CDP                          | Playwriter                   |\n| --------------------- | ------------------------------------- | ---------------------------- |\n| Setup                 | Restart Chrome with special flags     | Click extension icon         |\n| Confirmation dialog   | Shows automation infobar agents can't dismiss | No blocking dialog   |\n| Autonomous agents     | Interrupted by debug banners          | Fully autonomous             |\n| User disruption       | Banners appear mid-workflow           | Silent — no interruption     |\n| Existing session      | Must relaunch Chrome (lose state)     | Uses your running browser    |\n\n> Chrome's `--remote-debugging-port` flag shows a persistent \"controlled by automated software\" banner that agents cannot dismiss. It pops up in the middle of your workflow whenever you're using the browser. Playwriter runs silently — agents work autonomously without any confirmation dialogs, so you're never interrupted.\n\n## Architecture\n\n```\n+---------------------+     +-------------------+     +-----------------+\n|   BROWSER           |     |   LOCALHOST       |     |   MCP CLIENT    |\n|                     |     |                   |     |                 |\n|  +---------------+  |     | WebSocket Server  |     |  +-----------+  |\n|  |   Extension   |\u003C--------->  :19988         |     |  | AI Agent  |  |\n|  +-------+-------+  | WS  |                   |     |  +-----------+  |\n|          |          |     |  \u002Fextension       |     |        |        |\n|    chrome.debugger  |     |       |           |     |        v        |\n|          v          |     |       v           |     |  +-----------+  |\n|  +---------------+  |     |  \u002Fcdp\u002F:id \u003C--------------> |  execute  |  |\n|  | Tab 1 (green) |  |     +-------------------+  WS |  +-----------+  |\n|  | Tab 2 (green) |  |                               |        |        |\n|  | Tab 3 (gray)  |  |     Tab 3 not controlled      |  Playwright API |\n+---------------------+     (no extension click)      +-----------------+\n```\n\n## Remote Access\n\nControl Chrome on a remote machine over the internet using [traforo](https:\u002F\u002Ftraforo.dev) tunnels:\n\n**On host:**\n\n```bash\nnpx -y traforo -p 19988 -t my-machine -- npx -y playwriter serve --token \u003Csecret>\n```\n\n**From remote:**\n\n```bash\nexport PLAYWRITER_HOST=https:\u002F\u002Fmy-machine-tunnel.traforo.dev\nexport PLAYWRITER_TOKEN=\u003Csecret>\nplaywriter -s 1 -e 'await page.goto(\"https:\u002F\u002Fexample.com\")'\n```\n\nAlso works on a LAN without traforo (`PLAYWRITER_HOST=192.168.1.10`). Full guide with use cases (remote Mac mini, user support, multi-machine control): [docs\u002Fremote-access.md](.\u002Fdocs\u002Fremote-access.md)\n\n## Security\n\n- **Local only**: WebSocket server on `localhost:19988`\n- **Origin validation**: Only our extension IDs allowed (browsers can't spoof Origin)\n- **Explicit consent**: Only tabs where you clicked the extension icon\n- **Visible automation**: Chrome shows automation banner on controlled tabs\n- **No remote access**: Malicious websites cannot connect\n\n## Playwright API\n\nConnect programmatically (without CLI):\n\n```typescript\nimport { chromium } from 'playwright-core'\nimport { startPlayWriterCDPRelayServer, getCdpUrl } from 'playwriter'\n\nconst server = await startPlayWriterCDPRelayServer()\nconst browser = await chromium.connectOverCDP(getCdpUrl())\nconst page = browser.contexts()[0].pages()[0]\n\nawait page.goto('https:\u002F\u002Fexample.com')\nawait page.screenshot({ path: 'screenshot.png' })\n\u002F\u002F Don't call browser.close() - it closes the user's Chrome\nserver.close()\n```\n\nOr connect to a running server:\n\n```bash\nnpx -y playwriter serve --host 127.0.0.1\n```\n\n```typescript\nconst browser = await chromium.connectOverCDP('http:\u002F\u002F127.0.0.1:19988')\n```\n\n## Troubleshooting\n\nView relay server logs to debug issues:\n\n```bash\nplaywriter logfile  # prints the log file path\n# typically: ~\u002F.playwriter\u002Frelay-server.log\n```\n\nThe relay log contains extension, MCP and WebSocket server logs. A separate CDP JSONL log is also created alongside it (see `playwriter logfile`). Both are recreated on each server start.\n\nExample: summarize CDP traffic counts by direction + method:\n\n```bash\njq -r '.direction + \"\\t\" + (.message.method \u002F\u002F \"response\")' ~\u002F.playwriter\u002Fcdp.jsonl | uniq -c\n```\n\n## Support\n\nIf Playwriter is useful to you, consider [sponsoring the project](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fremorses).\n\n## Known Issues\n\n- If all pages return `about:blank`, restart Chrome (Chrome bug in `chrome.debugger` API)\n- Browser may switch to light mode on connect ([Playwright issue](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fplaywright\u002Fissues\u002F37627))\n","Playwriter 是一个允许代理通过 CLI 或 MCP 控制你的浏览器的 Chrome 扩展程序。它能够在保持状态的沙箱中运行 Playwright 代码片段，从而让你已登录的账号、扩展程序和 Cookie 等信息得以保留，避免了传统自动化工具因启动全新浏览器实例而被反爬虫系统轻易识别的问题。该项目支持在现有的浏览器环境下进行网页自动化操作，特别适用于需要维持用户登录状态或利用特定插件功能的场景，如网站测试、数据抓取等任务。采用 MIT 许可证发布，社区活跃度高。",2,"2026-06-11 03:46:27","high_star"]