playwriter
Code Issues

Update welcome.html

Browse Source
This commit is contained in:
Tommy D. Rossi
2026-01-27 18:39:55 +01:00
parent 5dc39cc4fe
commit 7e4dc3fd18
1 changed files with 127 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/src/welcome.html
+127 -76
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -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;
}
}
</style>
</head>
@@ -195,10 +277,7 @@
<section>
<h2>Getting Started with Playwriter</h2>
<p>
Control your browser via Playwright API. Uses extension + CLI. No
context bloat.
</p>
<p>Control your browser via Playwright API. Uses extension + CLI. No context bloat.</p>
<h3>Installation</h3>
@@ -206,10 +285,7 @@
<span class="step-number">1</span>
<div class="step-content">
<strong>Pin the extension</strong>
<p>
Click the puzzle icon in Chrome's toolbar, then pin Playwriter so
it's always visible.
</p>
<p>Click the puzzle icon in Chrome's toolbar, then pin Playwriter so it's always visible.</p>
</div>
</div>
@@ -217,9 +293,7 @@
<span class="step-number">2</span>
<div class="step-content">
<strong>Enable a tab</strong>
<p>
Click the extension icon on a tab. It turns green when connected.
</p>
<p>Click the extension icon on a tab. It turns green when connected.</p>
</div>
</div>
@@ -238,9 +312,7 @@ playwriter -s 1 -e "await page.goto('https://example.com')"</code></pre>
<span class="step-number">4</span>
<div class="step-content">
<strong>Add the skill to your agent</strong>
<p>
Install the Playwriter skill so your agent can call the CLI:
</p>
<p>Install the Playwriter skill so your agent can call the CLI:</p>
<pre><code class="language-bash"># add playwriter skill to your coding agent
npx -y skills add remorses/playwriter</code></pre>
</div>
@@ -262,22 +334,10 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"</code></pre>
<h2>How It Works</h2>
<ul>
<li>
<strong>No new Chrome instances:</strong> Works with your current
browser session
</li>
<li>
<strong>No CDP mode required:</strong> No need to restart Chrome
with special flags
</li>
<li>
<strong>Full CDP access:</strong> Complete Chrome DevTools Protocol
capabilities
</li>
<li>
<strong>Visual feedback:</strong> Extension icon changes color to
indicate connection status
</li>
<li><strong>No new Chrome instances:</strong> Works with your current browser session</li>
<li><strong>No CDP mode required:</strong> No need to restart Chrome with special flags</li>
<li><strong>Full CDP access:</strong> Complete Chrome DevTools Protocol capabilities</li>
<li><strong>Visual feedback:</strong> Extension icon changes color to indicate connection status</li>
</ul>
</section>
@@ -296,26 +356,24 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"</code></pre>
<h2>Privacy &amp; Security</h2>
<p>
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.
</p>
</section>
<section>
<h2>MCP Setup (Optional)</h2>
<p>
The CLI is the recommended way to use Playwriter. If you need MCP
server setup, auto-configure it with:
</p>
<p>The CLI is the recommended way to use Playwriter. If you need MCP server setup, auto-configure it with:</p>
<pre><code class="language-bash"># auto-configure MCP server for your editor
npx -y @playwriter/install-mcp playwriter@latest</code></pre>
<p>
For full MCP instructions, see
<a href="https://github.com/remorses/playwriter/blob/main/MCP.md" target="_blank" rel="noopener noreferrer">MCP.md</a>.
<a href="https://github.com/remorses/playwriter/blob/main/MCP.md" target="_blank" rel="noopener noreferrer"
>MCP.md</a
>.
</p>
</section>
@@ -324,11 +382,7 @@ npx -y @playwriter/install-mcp playwriter@latest</code></pre>
<p>
For issues, feature requests, or contributions, visit the
<a
href="https://github.com/remorses/playwriter"
target="_blank"
rel="noopener noreferrer"
>
<a href="https://github.com/remorses/playwriter" target="_blank" rel="noopener noreferrer">
GitHub repository
</a>
.
@@ -336,10 +390,7 @@ npx -y @playwriter/install-mcp playwriter@latest</code></pre>
</section>
<footer>
<p>
Playwriter &copy; Microsoft Corporation &middot; Licensed under
Apache-2.0
</p>
<p>Playwriter &copy; Microsoft Corporation &middot; Licensed under Apache-2.0</p>
</footer>
</main>
<script src="prism.min.js"></script>