Update welcome.html
This commit is contained in:
Tommy D. Rossi
+127
-76
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -40,8 +40,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
||||||
Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
@@ -88,8 +87,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
||||||
"Liberation Mono", monospace;
|
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -155,38 +153,122 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Tomorrow (light) token colors */
|
/* Tomorrow (light) token colors */
|
||||||
code[class*="language-"],
|
code[class*='language-'],
|
||||||
pre[class*="language-"] {
|
pre[class*='language-'] {
|
||||||
color: #8959a8;
|
color: #8959a8;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #8e908c; }
|
.token.comment,
|
||||||
.token.punctuation { color: #8959a8; }
|
.token.block-comment,
|
||||||
.token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #c82829; }
|
.token.prolog,
|
||||||
.token.function-name { color: #4271ae; }
|
.token.doctype,
|
||||||
.token.boolean, .token.number, .token.function { color: #f5871f; }
|
.token.cdata {
|
||||||
.token.property, .token.class-name, .token.constant, .token.symbol { color: #eab700; }
|
color: #8e908c;
|
||||||
.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.punctuation {
|
||||||
.token.operator, .token.entity, .token.url { color: #3e999f; }
|
color: #8959a8;
|
||||||
.token.inserted { color: #718c00; }
|
}
|
||||||
|
.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 */
|
/* Tomorrow Night (dark) token colors */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
code[class*="language-"],
|
code[class*='language-'],
|
||||||
pre[class*="language-"] {
|
pre[class*='language-'] {
|
||||||
color: #b294bb;
|
color: #b294bb;
|
||||||
}
|
}
|
||||||
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #969896; }
|
.token.comment,
|
||||||
.token.punctuation { color: #b294bb; }
|
.token.block-comment,
|
||||||
.token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #cc6666; }
|
.token.prolog,
|
||||||
.token.function-name { color: #81a2be; }
|
.token.doctype,
|
||||||
.token.boolean, .token.number, .token.function { color: #de935f; }
|
.token.cdata {
|
||||||
.token.property, .token.class-name, .token.constant, .token.symbol { color: #f0c674; }
|
color: #969896;
|
||||||
.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.punctuation {
|
||||||
.token.operator, .token.entity, .token.url { color: #8abeb7; }
|
color: #b294bb;
|
||||||
.token.inserted { color: #b5bd68; }
|
}
|
||||||
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -195,10 +277,7 @@
|
|||||||
<section>
|
<section>
|
||||||
<h2>Getting Started with Playwriter</h2>
|
<h2>Getting Started with Playwriter</h2>
|
||||||
|
|
||||||
<p>
|
<p>Control your browser via Playwright API. Uses extension + CLI. No context bloat.</p>
|
||||||
Control your browser via Playwright API. Uses extension + CLI. No
|
|
||||||
context bloat.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Installation</h3>
|
<h3>Installation</h3>
|
||||||
|
|
||||||
@@ -206,10 +285,7 @@
|
|||||||
<span class="step-number">1</span>
|
<span class="step-number">1</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Pin the extension</strong>
|
<strong>Pin the extension</strong>
|
||||||
<p>
|
<p>Click the puzzle icon in Chrome's toolbar, then pin Playwriter so it's always visible.</p>
|
||||||
Click the puzzle icon in Chrome's toolbar, then pin Playwriter so
|
|
||||||
it's always visible.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -217,9 +293,7 @@
|
|||||||
<span class="step-number">2</span>
|
<span class="step-number">2</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Enable a tab</strong>
|
<strong>Enable a tab</strong>
|
||||||
<p>
|
<p>Click the extension icon on a tab. It turns green when connected.</p>
|
||||||
Click the extension icon on a tab. It turns green when connected.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -238,9 +312,7 @@ playwriter -s 1 -e "await page.goto('https://example.com')"</code></pre>
|
|||||||
<span class="step-number">4</span>
|
<span class="step-number">4</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Add the skill to your agent</strong>
|
<strong>Add the skill to your agent</strong>
|
||||||
<p>
|
<p>Install the Playwriter skill so your agent can call the CLI:</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
|
<pre><code class="language-bash"># add playwriter skill to your coding agent
|
||||||
npx -y skills add remorses/playwriter</code></pre>
|
npx -y skills add remorses/playwriter</code></pre>
|
||||||
</div>
|
</div>
|
||||||
@@ -262,22 +334,10 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"</code></pre>
|
|||||||
<h2>How It Works</h2>
|
<h2>How It Works</h2>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li><strong>No new Chrome instances:</strong> Works with your current browser session</li>
|
||||||
<strong>No new Chrome instances:</strong> Works with your current
|
<li><strong>No CDP mode required:</strong> No need to restart Chrome with special flags</li>
|
||||||
browser session
|
<li><strong>Full CDP access:</strong> Complete Chrome DevTools Protocol capabilities</li>
|
||||||
</li>
|
<li><strong>Visual feedback:</strong> Extension icon changes color to indicate connection status</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>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -296,26 +356,24 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"</code></pre>
|
|||||||
<h2>Privacy & Security</h2>
|
<h2>Privacy & Security</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Playwriter MCP runs locally in your browser and does not send any
|
Playwriter MCP runs locally in your browser and does not send any data to external servers. All browser
|
||||||
data to external servers. All browser control happens through the
|
control happens through the standard Chrome DevTools Protocol on your machine.
|
||||||
standard Chrome DevTools Protocol on your machine.
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>MCP Setup (Optional)</h2>
|
<h2>MCP Setup (Optional)</h2>
|
||||||
|
|
||||||
<p>
|
<p>The CLI is the recommended way to use Playwriter. If you need MCP server setup, auto-configure it with:</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
|
<pre><code class="language-bash"># auto-configure MCP server for your editor
|
||||||
npx -y @playwriter/install-mcp playwriter@latest</code></pre>
|
npx -y @playwriter/install-mcp playwriter@latest</code></pre>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
For full MCP instructions, see
|
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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -324,11 +382,7 @@ npx -y @playwriter/install-mcp playwriter@latest</code></pre>
|
|||||||
|
|
||||||
<p>
|
<p>
|
||||||
For issues, feature requests, or contributions, visit the
|
For issues, feature requests, or contributions, visit the
|
||||||
<a
|
<a href="https://github.com/remorses/playwriter" target="_blank" rel="noopener noreferrer">
|
||||||
href="https://github.com/remorses/playwriter"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
GitHub repository
|
GitHub repository
|
||||||
</a>
|
</a>
|
||||||
.
|
.
|
||||||
@@ -336,10 +390,7 @@ npx -y @playwriter/install-mcp playwriter@latest</code></pre>
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>Playwriter © Microsoft Corporation · Licensed under Apache-2.0</p>
|
||||||
Playwriter © Microsoft Corporation · Licensed under
|
|
||||||
Apache-2.0
|
|
||||||
</p>
|
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
<script src="prism.min.js"></script>
|
<script src="prism.min.js"></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user