AgentSkillsCN

playwriter

通过 Chrome 扩展实现浏览器自动化。单次执行工具，内置完整的 Playwright API。可无缝衔接您现有的浏览器，支持各类扩展、会话与 Cookie，相较于传统浏览器型 MCP，上下文开销大幅缩减 90%。

SKILL.md
--- frontmatter
name: playwriter
description: Browser automation via Chrome extension. Single execute tool with full Playwright API. Uses your existing browser with extensions, sessions, cookies. 90% less context than traditional browser MCP.
mcp:
  playwriter:
    command: npx
    args: ["playwriter@latest"]

Playwriter Browser Automation (MCP)

Control your actual Chrome browser via extension. Unlike traditional browser MCP tools that spawn isolated instances, Playwriter:

  • •Uses your existing browser - extensions, sessions, cookies all work
  • •Single execute tool - send Playwright code snippets directly
  • •90% less context - no tool schema bloat
  • •Full Playwright API - LLMs already know it from training
  • •Bypass automation detection - disconnect extension when needed

Prerequisites

You must install the Chrome extension first:

  1. •Install Playwriter Extension
  2. •Click extension icon on tabs you want to control (icon turns green)
  3. •Now the skill can interact with those tabs

Quick Start

After loading this skill:

code
# List available tabs (enabled ones)
skill_mcp(skill_name="playwriter", tool_name="listTabs")

# Execute Playwright code on a tab
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "tab-id-here", "code": "await page.goto(\"https://example.com\")"}')

Available Tools

ToolDescriptionArguments
listTabsList tabs with extension enabled{}
executeRun Playwright code snippet{"tabId": "...", "code": "..."}

That's it. Two tools. The power is in the Playwright code you send.

The execute Pattern

Send any valid Playwright code. The page object is already available:

javascript
// Navigate
await page.goto("https://github.com");

// Click
await page.click("button.sign-in");

// Fill form
await page.fill("#email", "user@example.com");
await page.fill("#password", "secret");
await page.click('button[type="submit"]');

// Wait for element
await page.waitForSelector(".dashboard");

// Get text
const title = await page.title();

// Screenshot
await page.screenshot({ path: "/tmp/screenshot.png" });

// Complex selectors
await page.click("text=Submit");
await page.click('[data-testid="login-btn"]');

// Evaluate JS in page
const links = await page.evaluate(() =>
  Array.from(document.querySelectorAll("a")).map((a) => a.href),
);

Examples

Navigate and Screenshot

code
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.goto(\"https://example.com\"); await page.screenshot({ path: \"/tmp/example.png\" })"}')

Fill a Form

code
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.fill(\"#name\", \"John Doe\"); await page.fill(\"#email\", \"john@example.com\"); await page.click(\"button[type=submit]\")"}')

Login Flow (Using Your Saved Sessions)

code
# If you're already logged in via browser, just navigate
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.goto(\"https://github.com/settings/profile\")"}')

# Your cookies/session already work - no login needed!

Scrape Data

code
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "const items = await page.$$eval(\".product\", els => els.map(e => ({ name: e.querySelector(\"h2\").textContent, price: e.querySelector(\".price\").textContent }))); return items"}')

Test Responsive

code
skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.setViewportSize({ width: 375, height: 667 }); await page.screenshot({ path: \"/tmp/mobile.png\" })"}')

Bypassing Automation Detection

For sites that detect automation (Google login, etc.):

  1. •Disconnect the extension before sensitive actions
  2. •Perform login manually
  3. •Reconnect after authentication
  4. •Continue automation with your authenticated session

This works because the browser is real - not a Puppeteer/Playwright-spawned instance.

vs Traditional Playwright MCP

Aspectplaywright skillplaywriter skill
Tools17+2
Context usageHigh~90% less
BrowserNew instanceYour existing browser
ExtensionsNoneAll yours
Sessions/cookiesFreshYour logged-in sessions
Automation detectionAlways detectedCan bypass
API knowledgeMust learn tool schemasStandard Playwright

Tips

  • •List tabs first to get valid tabId values
  • •Chain commands in single execute for efficiency
  • •Use your sessions - if you're logged into GitHub in Chrome, it just works
  • •Return data from execute to get values back
  • •Standard Playwright docs apply - no special syntax to learn