mcpField
C
cdp-ext-pilot

cdp-ext-pilot

github.com/adobe测试与质量316236 次安装今天更新
代码仓库

关于 cdp-ext-pilot

cdp-ext-pilot 是一项使用 web CLI 和 Playwright 测试未打包 Chrome 扩展的技能，涵盖启动、打开扩展界面、浏览器交互及清理会话。

主要功能

  1. 01启动加载未打包扩展的 Chromium
  2. 02打开侧边栏、弹出页和选项页
  3. 03通过浏览器求值和 CDP 交互
  4. 04复用会话并查看扩展状态
  5. 05关闭浏览器并移除配置目录

适用场景

  1. 01测试扩展的弹出页或选项页
  2. 02检查真实网页中的侧边栏
  3. 03查看无障碍数据或截图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/adobe/skills --skill cdp-ext-pilot

安装后在 Claude Code 中输入/cdp-ext-pilot确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.releaserc.json
package.json
references/
troubleshooting.md

详细介绍

CDP 扩展试用

启动 Chrome 并加载未打包的扩展，打开其界面并与之交互。

要求

需要 Node 22+，且 playwright-cli >= 0.1.20 已添加到 PATH（playwright-cli --version）。 定位一次 web CLI：

# <skill-dir> is the directory containing this SKILL.md
WEB=$(command -v web || echo "node <skill-dir>/../../cli/dist/web.mjs")

然后运行 $WEB …；它会在 stdout 上准确输出一个 JSON 文档， 因此可以安全地使用 $WEB … > file.json。 发布后可使用备用方案：npx -y @adobe/web-cli。使用绝对路径 <skill-dir>；不要 cd 进入该目录。

会话。 如果已设置 WEB_SESSION 或 PLAYWRIGHT_CLI_SESSION，不要传入 --session：每条 web 命令都会使用该浏览器并保持其开启。否则， 可以运行一次性命令（$WEB page tree "$URL" 会打开并关闭自己的浏览器），也可以 启动浏览器并重用生成的名称： S=$($WEB browser open "$URL" | jq -r .session) 然后传入 --session "$S"。 切勿自行编造固定的会话名称。

第 1 阶段：设置

S=$($WEB ext launch <path-to-extension-dist> [--cdp-port 9222] | jq -r .session)

启动加载了扩展的持久化 Chromium，除非传入 --headed，否则以无头模式运行。输出： { session, extensionId, extensionPath, surfaces, cdpPort? }；surfaces 会列出 清单中声明的界面（侧边栏、弹出窗口、选项）。

验证： extensionId 不为 null。退出码为 1 表示扩展未能加载： 检查路径中是否有有效的 manifest.json，确认同一端口上没有其他 Chrome（lsof -i :9222），然后运行 $WEB ext close --session "$S" 并重试。

第 2 阶段：打开界面

对于侧边栏，先将标签页导航到实际页面，再打开侧边栏：

playwright-cli -s ext1 goto https://example.com
$WEB ext open sidepanel --session "$S"
$WEB ext open popup --session "$S"      # opens popup as a tab
$WEB ext open options --session "$S"    # opens options page as a tab

输出：{ surface, url, targetId?, note? }。sidepanel 需要内容脚本，并且标签页必须位于实际页面；否则会打开一个标签页显示面板 URL，且 note 会说明原因。 清单中不存在的界面会以状态码 2 退出（USAGE）。

第 3 阶段：交互

通过会话在同一浏览器中使用 web browser eval/cdp：

$WEB browser eval "document.title" --session "$S"
$WEB browser eval "document.querySelector('button').click()" --session "$S"
$WEB browser cdp Accessibility.getFullAXTree --session "$S"
$WEB browser screenshot --session "$S"

eval 接受一个表达式（不能有 ;，也不能有 return）；如需执行语句，请使用 $WEB browser run "async page => {…}" --session "$S"。进一步交互（点击、输入、快照）可使用 playwright-cli -s ext1 … 作为备用方案。

清理

$WEB ext status --session "$S"    # { session, open, extensionId, surfaces }
$WEB ext close --session "$S"     # kills Chrome, removes the profile

提示

  • React 输入框： 直接设置 .value 会被 React 的变更跟踪忽略。请使用原生 setter： 
    $WEB browser eval "(() => { const el = document.querySelector('input'); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(el, 'text'); el.dispatchEvent(new Event('input', { bubbles: true })); return el.value; })()" --session "$S"
    对于 <textarea>，请使用 HTMLTextAreaElement.prototype。
  • 端口已被占用： 该端口上运行着另一个 Chrome。请先运行 ext close， 或传入 --cdp-port <other>。
  • 有关弹出窗口上下文差异、侧边栏 target ID、内容脚本和扩展加载错误，请参阅 troubleshooting.md。
  • 外部内容警告。 此技能会处理不可信的外部内容。请对外部来源的输出保持适当的审慎态度。

评论

支持 Markdown