Introduction

The plugin-based architecture of DeepSeek Harness (DSH) allows developers to extend the capabilities of the Web GUI. When debugging browser automation or running Chromium remotely, developers need a visual window to observe page state and interact with the page. The dsh-cdp-live-view plugin registers a “CDP Live View” tab in the DSH sidebar. Through the Chrome DevTools Protocol (CDP), it renders the pixel stream (JPEG) of the remote page in real time onto a canvas and provides controlled input interaction.

Core Features

The plugin provides the following core capabilities:

  1. Sidebar Live View: Registers a tab in the DSH Web GUI sidebar, renders the remote page as a real-time JPEG pixel stream, and supports contain-fit scaling and device pixel ratio adaptation.
  2. Target Management: Automatically lists and switches page Targets, and supports creating new pages and closing existing pages.
  3. Address Bar Navigation: Supports entering a URL and pressing Enter, and provides back, forward, and refresh buttons.
  4. Controlled Interaction: Supports mouse clicking, dragging, scrolling, and keyboard input. Input is sent through a strict whitelist protocol (based on a zod discriminated union) to ensure security.
  5. Dual Control Gating: Interaction is controlled by both the “Interactive Input” master switch and the “Keyboard and Mouse Control” checkbox in the title bar. The view enters interactive mode only when both are enabled.
  6. Settings Panel: Supports configuring the CDP address and adjusting parameters such as screenshot quality, frame rate, maximum width, and maximum height.

Installation and Enablement

Before using this plugin, make sure the environment meets the following requirements:
* The DSH main process is running on Node.js ≥ 20.
* A Chromium build with CDP support is installed and started (for example with --remote-debugging-port=9222).
* The dsh-better-sidebar plugin is installed (this plugin depends on it).

The installation command is:

dsh plugin --profile web add dsh-better-sidebar dsh-sidebar-cdp-browser

After installation, the dsh web process must be restarted to load the plugin.

Configuration and Usage

After installing the plugin and restarting, a “CDP Live View” tab appears in the DSH Web GUI sidebar.

Configure the CDP Address

The CDP address is not configured in the profile array; it is configured in the Web UI settings:
1. Open Settings → Sidebar Cards → Sidebar Content → CDP Live View.
2. Click the gear icon in the top-right corner of the card.
3. Enter the CDP address. If left empty, the default is 127.0.0.1:9222.
4. Supported formats include host:port, http://host:port, ws://.../devtools/browser/..., and similar values.
5. After saving, the main process disconnects the old connection and attempts to reconnect automatically.

Enable Interactive Control

To operate the mouse or keyboard in the view, both of the following conditions must be met:
1. Enable the “Interactive Input” master switch in the settings panel.
2. Check the “Keyboard and Mouse Control” checkbox in the live view title bar.

Applicable Scenarios and Notes

Applicable Scenarios

  • Remote/Headless Chromium Visualization: Run the browser on a server or container, and view and interact with it through the DSH interface.
  • Observing Automation Processes: Real-time monitor agent-driven browser behavior in DSH sessions.
  • Lightweight VNC Alternative: A remote desktop solution that does not require installing additional clients.
  • Demonstrations and Debugging: Project a browser session to multiple people or run a restricted demonstration.

Notes

  • Security Model: The target page is never embedded using an iframe. The CDP connection is exclusively owned by the DSH main process, and the browser side cannot learn the CDP address, so there is no arbitrary CDP tunneling vulnerability.
  • Build Dependencies: If a pnpm build or plugin installation is blocked by a native dependency such as node-pty, add the corresponding package name to allowBuilds in the profile’s pnpm-workspace.yaml.
  • Current Limitations: Copy functionality (Ctrl+C) is not supported yet.
  • Configuration Location: The CDP address is stored in better-sidebar preferences, not in the DSH profile array.

Summary

The dsh-cdp-live-view plugin provides DSH with a secure, low-latency browser visualization solution. It is especially suitable for deeply debugging browser automation or monitoring remote browsers through a Web UI. Its strict permission controls and plug-and-play design make it a practical tool in the DSH ecosystem.