远程可视化浏览器（noVNC + Chromium + CDP）

技能文档

---
name: tencent-novnc-chromium-cdp
title: 远程可视化浏览器（noVNC + Chromium + CDP）
category: 开发工具
description: 部署 noVNC + Chromium + CDP 三合一远程可视化浏览器（支持 Linux 云服务器/NAS/本地），或一键接管 Windows 本机 Edge/Chrome 远程调试，让 Agent 与用户共享同一个浏览器：遇登录、扫码、滑块、验证码由用户在可视化页面人工处理后 AI 继续自动化。当用户需要可视化网页自动化、远程浏览器部署、人机协作过验证、CDP 控制浏览器时触发。触发词：远程浏览器、可视化浏览器、网页自动化、CDP、noVNC。
---

# noVNC + Chromium + CDP 远程可视可控浏览器（Linux / Windows 双平台）

## 技能简介

本技能同时支持 Linux 和 Windows，覆盖云服务器与本地环境：Linux 服务器上部署 noVNC + Chromium 远程可视化浏览器，Windows 本机通过 CDP 远程调试直接接管 Edge/Chrome 浏览器。

它解决的是传统 Headless 浏览器自动化最常见的痛点：遇到登录、扫码、滑块、验证码、风控验证时，AI 可以暂停并让用户在 noVNC 页面中手动完成验证，验证通过后再继续由 AI 接管操作。

适合用于某音创作者中心、某博、某茄小说、各类后台管理系统等需要"AI 自动化 + 人工验证协作"的网页场景。

## 核心能力

- **可视化浏览器**：Chromium 运行在 Xvfb 虚拟屏幕上，用户可通过 noVNC 网页实时查看画面。
- **AI 可控**：Agent 通过 CDP 连接 `127.0.0.1:9223`，可执行打开网页、点击、输入、读取页面、截图等操作。
- **人机协作**：遇到登录、二维码、滑块、验证码时，用户可在 noVNC 中手动处理，处理完成后 AI 继续执行。
- **权限预检**：安装前先确认 root/sudo 权限，权限不足时主动提醒用户授权方式，避免半安装状态。
- **安全边界**：默认只建议开放 noVNC 的 `6080/tcp`，CDP 调试端口 `9223/tcp` 不建议暴露到公网。
- **完成反馈**：部署完成后，Agent 必须先主动发送 noVNC 访问地址、访问密码、开机自启状态和端口开放提醒；截图作为最后一步补充确认发送，截图失败不得阻塞前面的核心信息。
- **Windows 本机模式**：Agent 自动启动 Edge/Chrome 远程调试端口，通过 CDP 接管浏览器，本机屏幕实时可见，截取当前页面反馈，无需安装额外组件。

部署完成后，Agent 通过 CDP 控制浏览器（详见「七、通过 CDP 控制浏览器」）。

> ⚠️ **铁律（最高优先级）**：本技能部署完成后，用户让 AI Agent「打开浏览器 / 看网页 / 截图 / 点击 / 登录」等任何浏览器操作，**默认必须使用本技能部署的 CDP 浏览器**（`127.0.0.1:9223`）。Linux 下即 noVNC 里 `:99` 上的 Chromium，Windows 下即用户本机屏幕上的 Edge/Chrome。**禁止使用 Agent 自带的内置 headless 浏览器或临时拉起其他实例**，否则用户和 Agent 看到的画面不同频。完整规则见「十一、重要原则」。

## 使用说明

对 Agent 说「使用远程可视化浏览器技能」，Agent 会自动完成：检测系统环境 → 安装依赖 → 启动远程浏览器 → 配置开机自启 → 发送 noVNC 访问地址与密码 → 截图确认。

> 部署完成后遇到登录、验证码、滑块，在 noVNC 页面上手动操作即可，完成后告诉 AI 继续。

## 技能工作流

### 步骤1：系统检测与环境确认

判断运行环境为 Linux（云服务器 / NAS / 本地）或 Windows，确定部署模式与 IP 选择，详见 `references/linux-deploy.md` 的「零、系统检测」。

### 步骤2：配置检查与端口提醒

按下方「服务器配置要求与端口提醒」向用户确认配置要求与需放行端口（`6080/tcp` 对外、`9223/tcp` 仅本机），再继续部署。

### 步骤3：权限预检与依赖安装

确认 root/sudo 权限后安装 Xvfb、x11vnc、noVNC、Chromium 等依赖，详见 `references/linux-deploy.md` 的「二、权限预检」「三、安装依赖」。

### 步骤4：部署与启动

生成一键启动脚本、启动远程浏览器并配置开机自启（systemd），详见 `references/linux-deploy.md` 的「四」至「六-bis」。

### 步骤5：交付确认

按「发送顺序铁律」先发送 noVNC 访问地址、访问密码、开机自启状态与端口开放提醒，最后截图补充确认；回复模板见 `references/reply-templates.md`，验证清单见 `references/verify-and-troubleshooting.md`。

### 步骤6：CDP 接管与人机协作

Agent 通过 CDP（`127.0.0.1:9223`）控制浏览器执行打开网页、点击、输入、截图等操作（参考 `references/cdp-control.md`）；遇到登录、扫码、滑块、验证码时请用户在 noVNC 页面手动处理，完成后继续自动化。

### Windows 模式

本机 Edge/Chrome 以远程调试模式启动、CDP 接管，无需额外组件，完整流程见 `references/windows-cdp.md`。


## 服务器配置要求与端口提醒

### 开始部署前必须先提醒用户

本技能需要安装系统依赖、下载 noVNC、启动 Chromium 图形浏览器和 VNC 转发服务，步骤较多。Agent 在正式执行安装前，应先发一条简短提醒，让用户知道部署需要等待一段时间。

推荐提醒话术（根据检测到的环境类型选择对应话术）：

**CLOUD（云服务器）环境：**
```text
开始部署 noVNC + Chromium + CDP 远程可视可控浏览器。

重要提示：服务器建议至少 2H4G。
端口提醒：必须在云服务器安全组放行 6080/tcp；5900/tcp 为高级用途，可选开放，开放时建议限制来源 IP。9223/tcp（CDP 调试端口）仅供 Agent 本机使用，不建议对公网开放。
预计耗时：通常约 5-15 分钟；如果服务器配置较低、网络较慢或需要安装大量依赖，可能需要 20-30 分钟。部署过程中请耐心等待，不要中断。
Token 提醒：顺利部署预计消耗约 2万-5万 tokens；如果网络较慢、依赖安装失败、需要自动修复或多次重试，可能消耗 5万-10万+ tokens，实际以执行过程为准。开始前请确认当前会话/套餐剩余 Token 必须大于预计消耗，建议至少预留 10万 tokens 以上，避免部署过程中因 Token 不足中断。
进度提醒：安装过程中我会每 30 秒检查一次进度和服务状态，如有常见问题会先自动修复；并且每分钟向你汇报一次部署进度，直到安装成功。
```

**NAS 环境：**
```text
开始部署 noVNC + Chromium + CDP 远程可视可控浏览器。

重要提示：NAS 建议至少 2H4G。
端口提醒：部署完成后通过局域网地址访问。如需外网访问，请在路由器上设置端口转发 6080 TCP → <NAS_IP>。9223/tcp（CDP 调试端口）仅供 Agent 本机使用，不建议开放。
预计耗时：通常约 5-15 分钟；如果 NAS 性能较低、网络较慢，可能需要 20-30 分钟。部署过程中请耐心等待，不要中断。
Token 提醒：顺利部署预计消耗约 2万-5万 tokens；实际以执行过程为准。建议至少预留 10万 tokens 以上。
进度提醒：安装过程中我会每 30 秒检查一次进度并每分钟汇报，直到安装成功。
```

**LOCAL（本机 Linux）环境：**
```text
开始部署 noVNC + Chromium + CDP 远程可视可控浏览器。

重要提示：本机建议至少 2H4G。
端口提醒：部署完成后通过内网地址访问。如需外网访问，请在路由器上设置端口转发 6080 TCP → <本机IP>。9223/tcp（CDP 调试端口）仅供 Agent 本机使用，不建议开放。
预计耗时：通常约 5-15 分钟。部署过程中请耐心等待，不要中断。
Token 提醒：顺利部署预计消耗约 2万-5万 tokens。
进度提醒：安装过程中我会每 30 秒检查一次进度并每分钟汇报，直到安装成功。
```

如果检测到服务器配置低于 2H4G，应额外提醒用户可能出现 Chromium 卡顿、白屏或被系统杀掉的问题。

### 安装过程进度监控与自动修复

部署本技能时，Agent 不应长时间静默等待。正式开始安装后，应执行以下进度监控规则：

1. **每 30 秒检查一次进度**：检查当前安装命令是否仍在运行，查看最近日志，确认是否卡在依赖安装、软件下载、服务启动或端口监听阶段。
2. **每 30 秒检查关键状态**：重点检查 `Xvfb`、`chromium`、`x11vnc`、`websockify/noVNC` 是否启动，`6080/tcp` 和 `9223/tcp` 是否正常监听。
3. **常见问题优先自动修复**：如依赖缺失、包管理锁、残留旧进程、端口占用、Chromium 启动失败、noVNC 未下载完整等，应先尝试清理旧进程、重新安装依赖、重新启动服务或重新下载组件。
4. **每分钟汇报一次进度**：向用户发送简短消息，说明当前阶段，例如“正在安装系统依赖”“正在启动 Chromium”“正在检测 6080 端口”“正在准备完成信息”“正在执行最后截图确认”。
5. **不要刷屏**：进度消息保持简短，每分钟一次即可；只有遇到需要用户处理的问题时才立即额外提醒。
6. **直到成功或需要人工介入**：持续监控并汇报，直到 noVNC 地址可访问、Chromium 已打开百度页面、核心完成信息已发送、最后截图已发送或已明确报告截图失败原因；如果自动修复失败，应明确告诉用户失败步骤、原因和下一步需要用户做什么。

### 最低服务器配置

本技能会启动 Chromium 图形浏览器、虚拟显示器和 VNC 转发服务，资源占用高于普通命令行脚本。建议服务器配置不低于：

```text
最低推荐：2 核 CPU / 4GB 内存（2H4G）
系统推荐：Debian 10+ / Ubuntu 20.04+
磁盘建议：至少预留 5GB 可用空间
```

低于 2H4G 的服务器也可能启动成功，但容易出现 Chromium 卡顿、页面白屏、验证码页面 CPU 飙高、浏览器被系统杀掉等问题。

### 端口开放说明

必须开放：

- `6080/tcp`：noVNC 网页访问端口。用户通过 `http://<服务器公网IP>:6080/vnc.html` 打开远程 Chromium 浏览器。

可选开放：

- `5900/tcp`：VNC 原生端口。默认仅供本机 websockify 转发使用，一般不需要公网开放；只有需要用 VNC 客户端直连时才考虑开放，并建议限制来源 IP。
- `9223/tcp`：Chromium CDP 调试端口。默认仅供 Agent 在服务器本机控制浏览器使用；只有明确需要远程调试时才考虑开放，并必须限制来源 IP，避免浏览器被他人接管。

## 适用场景

本技能覆盖两种使用模式：

- **Linux 服务器模式**：在云服务器上启动可视化浏览器，用户通过 noVNC 网页实时查看和手动操作，AI Agent 通过 CDP 控制同一实例。
- **Windows 本机模式**：直接在用户本机启动 Edge/Chrome 远程调试端口，Agent 通过 CDP 接管，用户在本机屏幕上实时看到所有操作。

典型场景：

- 登录类后台：某音创作者中心、某博、某众号后台等。
- 风控验证：滑块验证、扫码登录、短信验证、图形验证码、设备验证等。
- 内容发布：自动打开发布页、填写标题/正文/标签/封面，并让用户处理最后的人工验证。
- 网页调试：需要用户和 AI 同时看到同一个浏览器画面，方便排查页面状态。

不适合场景：

- 纯 API 调用任务，不需要浏览器画面。
- 对安全要求极高、不能暴露任何远程桌面入口的生产环境。
- Linux 模式：无法开放 `6080/tcp` 或无法提供 root/sudo 权限的服务器。（Windows 模式无此限制）

最终效果：

**Linux 模式：**
- 用户访问：`http://<服务器IP>:6080/vnc.html`
- Agent 控制：`http://127.0.0.1:9223/json` / CDP WebSocket
- 浏览器运行在虚拟显示器 `:99`

**Windows 模式：**
- 用户在本机屏幕直接看到 Edge/Chrome 浏览器
- Agent 控制：`http://127.0.0.1:9223/json` / CDP WebSocket
- 无需额外安装任何组件

> 💡 统一使用 **9223** 端口，避免与 AI Agent 自带的 Playwright/Chromium 抢占 **9222** 端口。

数据流：

**Linux：** Xvfb → 虚拟显示器 `:99` → Chromium (CDP `9223`) → x11vnc → noVNC/websockify → 用户浏览器
**Windows：** Edge/Chrome (CDP `9223`) + 本机屏幕 → Agent 控制，无需额外组件

## 十一、重要原则

> ⚠️ 部署后，Agent 所有浏览器操作必须通过 CDP（`127.0.0.1:9223`）控制本技能部署的浏览器——Linux 下为 noVNC 中 `:99` 上的 Chromium，Windows 下为用户本机 Edge/Chrome。**严禁给 Chromium 添加 `--headless` 或 `--headless=new` 启动参数**，否则 noVNC 画面无法正常显示。**禁止使用 Agent 内置 headless 浏览器或其他实例**，否则用户与 Agent 画面不同频，无法协作处理验证码。唯一例外：用户明确要求使用其他浏览器。

## 参考文档

- Linux 部署全流程（系统检测/权限/依赖/脚本/自启）→ `references/linux-deploy.md`
- 通过 CDP 控制浏览器 → `references/cdp-control.md`
- 回复模板与发送顺序 → `references/reply-templates.md`
- 验证清单与常见问题 → `references/verify-and-troubleshooting.md`
- Windows 模式（Edge/Chrome CDP 接管）→ `references/windows-cdp.md`

使用说明

# 远程可视化浏览器（noVNC + Chromium + CDP）

一键部署 Linux 远程可视化浏览器（noVNC + Chromium + CDP 三合一）或接管 Windows 本机 Edge/Chrome，让 Agent 与你共享同一个浏览器：登录、扫码、滑块、验证码由你人工处理，其余自动化交给 Agent。

## 使用

对 Agent 说：

```text
使用远程可视化浏览器技能
```

Agent 会自动完成：检测系统环境 → 安装依赖 → 启动远程浏览器 → 配置开机自启 → 发送 noVNC 访问地址与密码 → 截图确认。部署后遇验证在 noVNC 页面手动完成即可。

## 工作原理

- Chromium 跑在 Xvfb 虚拟屏幕上，noVNC 网页实时可见，Agent 通过 CDP（`127.0.0.1:9223`）执行打开网页、点击、输入、截图等操作；
- Windows 模式下 Edge/Chrome 以远程调试启动、本机屏幕实时可见，无需额外组件；
- 安全边界：仅建议对外开放 `6080/tcp`（noVNC），CDP 端口仅限本机使用。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。