remorses/playwriter

playwriter 是做什么的？

通过 Playwriter 扩展和 Playwright 代码片段在状态化的本地 JavaScript 沙箱中控制用户自己的 Chrome 浏览器。相比其他 Playwright MCP，此技能直接连接用户已有的 Chrome 实例，无需启动新浏览器；适用于浏览 Instagram、Twitter 等 JS 密集型网站，绕过 cookie/登录限制及处理懒加载界面。使用任何 playwriter 命令前务必先加载本技能。

工作原理

playwriter 通过 Playwriter 浏览器扩展与用户的 Chrome 浏览器建立端口连接。扩展在 Chrome 中注入一个沙箱化的 JavaScript 执行环境，AI 代理可向其发送 Playwright 代码片段。这些代码片段会在真实浏览器上下文中运行，能够访问当前页面的 DOM、Cookies、存储和网络请求。

前提条件

1. 安装 Playwriter 扩展：从 Chrome 网上应用店安装 Playwriter 扩展。
2. 开启 Chrome 远程调试：使用 --remote-debugging-port=9222 标志启动 Chrome。

   # macOS
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   # Windows
   "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
   # Linux
   google-chrome --remote-debugging-port=9222
   

3. 加载技能：在 AI 编程助手的设置或对话中加载此技能文件。

使用方法

加载技能后，AI 代理即具备以下能力：

• 导航与交互：跳转到指定 URL、点击按钮、填写输入框、滚动页面。
• 数据提取：使用 Playwright 选择器从页面中提取文本、属性或截图。
• 状态管理：会话期间保持登录状态和 Cookies。
• 高级自动化：处理弹窗、iframe、文件下载和网络拦截。

所有操作均通过标准的 Playwright API 和代码片段执行。

示例

// 导航到 Hacker News 并获取顶部故事的标题
await page.goto('https://news.ycombinator.com');
const titles = await page.$$eval('.titleline > a', els => els.map(e => e.textContent));
console.log(titles.slice(0, 5));

// 登录推特账户
await page.goto('https://twitter.com/login');
await page.fill('input[name="text"]', 'your_username_or_email');
await page.click('div[role="button"]:has-text("下一步")');
await page.waitForSelector('input[name="password"]');
await page.fill('input[name="password"]', 'your_password');
await page.click('div[role="button"]:has-text("登录")');
await page.waitForNavigation();

优势

• 保留浏览器状态：登录信息、Cookies 和扩展均按原样保留。
• 接近真实用户：与网站交互的方式如同真实用户，不易触发反爬机制。
• 性能优化：无需在每次任务时启动新的浏览器实例。
• 灵活性高：支持 Playwright 所有能力，包括网页抓取、表单提交和截图。

注意事项

• 确保 Chrome 远程调试端口在其他应用程序中未被占用。
• 在 AI 会话期间保持 Chrome 打开且稳定。
• 在使用 playwriter 命令前始终先加载此技能。