diff --git a/extension/src/welcome.html b/extension/src/welcome.html index e5c42f1..7661c59 100644 --- a/extension/src/welcome.html +++ b/extension/src/welcome.html @@ -1,4 +1,4 @@ - + @@ -40,8 +40,7 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", - Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--color-text); @@ -88,8 +87,7 @@ } code { - font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, - "Liberation Mono", monospace; + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.875em; } @@ -155,38 +153,122 @@ } /* Tomorrow (light) token colors */ - code[class*="language-"], - pre[class*="language-"] { + code[class*='language-'], + pre[class*='language-'] { color: #8959a8; text-shadow: none; } - .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #8e908c; } - .token.punctuation { color: #8959a8; } - .token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #c82829; } - .token.function-name { color: #4271ae; } - .token.boolean, .token.number, .token.function { color: #f5871f; } - .token.property, .token.class-name, .token.constant, .token.symbol { color: #eab700; } - .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { color: #8959a8; } - .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #718c00; } - .token.operator, .token.entity, .token.url { color: #3e999f; } - .token.inserted { color: #718c00; } + .token.comment, + .token.block-comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #8e908c; + } + .token.punctuation { + color: #8959a8; + } + .token.tag, + .token.attr-name, + .token.namespace, + .token.deleted { + color: #c82829; + } + .token.function-name { + color: #4271ae; + } + .token.boolean, + .token.number, + .token.function { + color: #f5871f; + } + .token.property, + .token.class-name, + .token.constant, + .token.symbol { + color: #eab700; + } + .token.selector, + .token.important, + .token.atrule, + .token.keyword, + .token.builtin { + color: #8959a8; + } + .token.string, + .token.char, + .token.attr-value, + .token.regex, + .token.variable { + color: #718c00; + } + .token.operator, + .token.entity, + .token.url { + color: #3e999f; + } + .token.inserted { + color: #718c00; + } /* Tomorrow Night (dark) token colors */ @media (prefers-color-scheme: dark) { - code[class*="language-"], - pre[class*="language-"] { + code[class*='language-'], + pre[class*='language-'] { color: #b294bb; } - .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #969896; } - .token.punctuation { color: #b294bb; } - .token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #cc6666; } - .token.function-name { color: #81a2be; } - .token.boolean, .token.number, .token.function { color: #de935f; } - .token.property, .token.class-name, .token.constant, .token.symbol { color: #f0c674; } - .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { color: #b294bb; } - .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #b5bd68; } - .token.operator, .token.entity, .token.url { color: #8abeb7; } - .token.inserted { color: #b5bd68; } + .token.comment, + .token.block-comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #969896; + } + .token.punctuation { + color: #b294bb; + } + .token.tag, + .token.attr-name, + .token.namespace, + .token.deleted { + color: #cc6666; + } + .token.function-name { + color: #81a2be; + } + .token.boolean, + .token.number, + .token.function { + color: #de935f; + } + .token.property, + .token.class-name, + .token.constant, + .token.symbol { + color: #f0c674; + } + .token.selector, + .token.important, + .token.atrule, + .token.keyword, + .token.builtin { + color: #b294bb; + } + .token.string, + .token.char, + .token.attr-value, + .token.regex, + .token.variable { + color: #b5bd68; + } + .token.operator, + .token.entity, + .token.url { + color: #8abeb7; + } + .token.inserted { + color: #b5bd68; + } } @@ -195,10 +277,7 @@

Getting Started with Playwriter

-

- Control your browser via Playwright API. Uses extension + CLI. No - context bloat. -

+

Control your browser via Playwright API. Uses extension + CLI. No context bloat.

Installation

@@ -206,10 +285,7 @@ 1
Pin the extension -

- Click the puzzle icon in Chrome's toolbar, then pin Playwriter so - it's always visible. -

+

Click the puzzle icon in Chrome's toolbar, then pin Playwriter so it's always visible.

@@ -217,9 +293,7 @@ 2
Enable a tab -

- Click the extension icon on a tab. It turns green when connected. -

+

Click the extension icon on a tab. It turns green when connected.

@@ -238,9 +312,7 @@ playwriter -s 1 -e "await page.goto('https://example.com')" 4
Add the skill to your agent -

- Install the Playwriter skill so your agent can call the CLI: -

+

Install the Playwriter skill so your agent can call the CLI:

# add playwriter skill to your coding agent
 npx -y skills add remorses/playwriter
@@ -262,22 +334,10 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"

How It Works

@@ -296,26 +356,24 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"

Privacy & Security

- Playwriter MCP runs locally in your browser and does not send any - data to external servers. All browser control happens through the - standard Chrome DevTools Protocol on your machine. + Playwriter MCP runs locally in your browser and does not send any data to external servers. All browser + control happens through the standard Chrome DevTools Protocol on your machine.

MCP Setup (Optional)

-

- The CLI is the recommended way to use Playwriter. If you need MCP - server setup, auto-configure it with: -

+

The CLI is the recommended way to use Playwriter. If you need MCP server setup, auto-configure it with:

# auto-configure MCP server for your editor
 npx -y @playwriter/install-mcp playwriter@latest

For full MCP instructions, see - MCP.md. + MCP.md.

@@ -324,11 +382,7 @@ npx -y @playwriter/install-mcp playwriter@latest

For issues, feature requests, or contributions, visit the - + GitHub repository . @@ -336,10 +390,7 @@ npx -y @playwriter/install-mcp playwriter@latest