opencode-browser
基于Chrome DevTools协议的直接连接，实现浏览器自动化操作。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：opencode-browser。 它的用途是：基于Chrome DevTools协议的直接连接，实现浏览器自动化操作。 完整的 Skill 内容见：https://321skill.com/skills/opencode-browser/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我用 OpenCode Chrome DevTools 打开开发服务器页面，并检查首页的登录按钮是否存在。’ 它会先调用 `browser_navigate` 导航到指定URL，然后调用 `browser_snapshot` 获取页面可访问性树快照，你可以从中查找登录按钮的UID。或者，你可以说：‘自动登录测试账号并截图。’ AI会依次调用导航、填表、点击和截图工具来完成整个流程。
介绍
OpenCode Chrome DevTools 是一个浏览器自动化插件，它通过直接连接 Chrome DevTools Protocol (CDP) 来操控浏览器，无需安装浏览器扩展或本地代理。它解决了需要程序化控制浏览器进行网页交互、数据抓取或界面测试的问题。
使用前，需要先启动一个开启了远程调试端口的 Chrome/Chromium 浏览器实例，然后将其调试地址（如 http://127.0.0.1:9222）作为 browser_url 参数提供给该插件的各个工具。插件提供了导航、截图、点击、填表、执行脚本等一系列工具，通过 target_id 可以精确控制特定的标签页或窗口。
这个工具非常适合需要将浏览器操作集成到自动化流程中的开发者、测试工程师和数据分析师。它架构简洁，依赖明确，能直接对接各种基于 Chromium 的环境。
使用时请注意，确保浏览器已正确启动并开放了远程调试端口。由于工具是无状态的，每次调用需要明确指定 browser_url 和 target_id。在进行点击或填表操作前，务必先调用 browser_snapshot 获取最新的页面元素快照和 UID。
核心特点
采用无状态架构，每个工具调用都需显式传入浏览器地址和目标ID，无需维护会话状态，支持同时操作多个浏览器标签页和窗口；直接使用原生CDP连接，不依赖浏览器扩展或本地代理，兼容 Chrome、Chromium、Electron 及远程代理的CDP端点。
注意事项
不适合需要模拟复杂用户交互（如拖拽、手势）或处理需要浏览器扩展才能访问的页面内容（如特定插件数据）的场景。
常见问题
如何启动浏览器以供此插件连接？
在命令行中运行 Chrome 或 Chromium，并添加 `--remote-debugging-port=9222` 参数，然后将 `http://127.0.0.1:9222` 作为 `browser_url` 使用。
点击或填表时提示“没有快照缓存”怎么办？
在执行 `browser_click` 或 `browser_fill` 前，需要先对同一 `browser_url` 和 `target_id` 调用 `browser_snapshot` 工具来获取页面元素的 UID。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/opencode-browser/raw/index.md 读取 opencode-browser 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/opencode-browser/raw/index.md（查看排版版本）