chendefine/dsh-cdp-live-view

README 摘要

dsh-cdp-live-view DSH 双端插件:在 DSH Web 侧边栏中实时查看并操控一个外部 Chromium 浏览器。 目标网页 不会 作为 iframe 运行在 DSH 页面里——Host 进程独占 CDP 连接,把页面抓成像素帧推给浏览器,Client 只在 Canvas 上渲染,并回传一组 严格受限 的交互命令。没有任意 CDP 透传,没有跨源 iframe 的麻烦。 依赖 :本插件基于侧边栏框架 dsh-better-sidebar( =0.13.0 )注册 Tab。它是 必选 peer 依赖 ——不安装它,本插件的 Tab 不会出现。请用下面的一句组合命令一起安装。 用途 - 在 DSH Web UI 内提供一个「CDP 实时视图」侧边栏 Tab:看到 Chromium 里正在发生什么,并在允许的范围内直接操作它; - Host 是唯一接触 raw CDP WebSocket 的一端:Client 浏览器既拿不到 CDP 地址,也发不出任意 CDP 命令; - 像素流 + 受控输入的模型,天然适合把一个浏览器会话「投影」给多个观察者,或交给 AI 会话的操纵者监督。 使用场景 - 远程 / 无头 Chromium 可视化 :浏览器跑在服务器或容器里,你在 DSH 界面里直接看、直接点; - 在 DSH 会话中观察浏览器自动化 :让 agent 操作浏览器的同时,人可以实时盯着画面,随时接管; - 轻量 VNC 替代 :只针对浏览器这一种「远程桌面」,不需要装任何客户端; - 受控演示 / 排查 :把一个测试浏览器投影给同事看,导航、点击都在你的权限模型之内。 安装方法 前提 - Node.js = 20; - DSH Web profile( web ); - dsh-better-sidebar = 0.13.0 (见顶部依赖说明); - 一个已启动、且能从 DSH Host 进程访问的 Chromium CDP endpoint。示例: 从 npm 安装(推荐) 一条命令同时安装两个插件(DSH 按 profile 直接依赖激活插件层,缺了 better-sidebar 本插件不会生效): 安装后重启 dsh web 使新插件层生效。 pnpm 可能拦截 better-sidebar 的原生依赖构建(如 node-pty ),按提示把具体包名加入 profile 目录下 pnpm-workspace.yaml 的 allowBuilds 后重跑即可。 从 GitHub 源安装 git 依赖在安装时通过 prepare 脚本构建,同样需要在 allowBuilds 放行 dsh-cdp-live-view (pnpm 会打印确切的 key)。 使用方法 配置 CDP 地址 CDP 地址 在 DSH Web 设置页配置 ,不需要改 p…

分类