Introduction

When debugging agent-driven web page interactions in the DeepSeek Harness (DSH) Web client, manually copying selectors or taking screenshots is often required. The dsh-plugin-browser plugin adds a Playwright-based browser panel to the right sidebar of DSH, providing real-time visuals, element selection, and model-invokable tools to reduce manual work.

Plugin Overview

  • Name: dsh-plugin-browser
  • Maintainer: TEGONG00
  • Category: Client
  • License: MIT

Core Features

1. Right-Sidebar Browser Panel

Click the “Browser” button at the bottom of the DSH sidebar to open the panel and display real-time Chromium visuals. It supports navigation, clicking, and text input. Mouse movement, clicking, double-clicking, wheel scrolling, and keyboard actions are forwarded to the controlled page. The screen stream is pushed over CDP screencast and is active only while the panel is visible.

2. Element Selectors

After enabling the “Select Element” toggle, clicking a page element generates a Lexical chip. The chip contains an element screenshot, selector, tag, text, and outerHTML. These references are appended to the end of the input box in the format “element1, element2, …”, allowing the model to precisely locate the elements to modify.

3. Model Tools

The plugin registers a set of browser operation tools that the model can invoke autonomously:

  • browser_navigate: Navigate to a specified URL
  • browser_screenshot: Capture the current page and render the result as an image attachment in the chat
  • browser_snapshot: Get an outline of interactive elements (for example, [12] <button> "Submit")
  • browser_click: Click an element by index
  • browser_type: Type text into an element

Installation and Enablement

Before installing, ensure your environment meets the requirements: dsh >= 0.1.5-rc.x and Node.js >= 20.

Install the plugin:

npx @deepseek-ai/dsh plugin --profile web add github:TEGONG00/dsh-plugin-browser

Install Playwright Chromium:

npx playwright install chromium

Typical Usage

  1. Open the panel: Click the “Browser” button at the bottom of the sidebar to open the panel.
  2. Navigate to a page: Enter an address in the URL bar and navigate.
  3. Interact with elements: Enable “Select Element”, click a page element, and insert its reference as a chip.
  4. Model operation: The model can autonomously operate the page using tools such as browser_navigate or browser_screenshot.

Use Cases and Notes

This plugin is suitable for scenarios that require directly debugging web interactions in the DSH environment and allowing the model to autonomously verify code changes.

Keep the following limitations in mind:

  • Selector scope: Selectors cover only the main frame and do not traverse shadow DOM or iframes.
  • Insertion location: Element reference chips are inserted at the end of the input box.
  • Stream push policy: Screen streams are pushed only while the panel is visible.
  • Security: Built-in routes are not integrated with session authentication and rely on Origin same-origin checks.
  • Event dependency: “Select Element” depends on real mouse events.

Summary

This plugin adds browser visualization capabilities to the DSH Web client. Through Playwright-driven controls and the Lexical chip mechanism, it enables the model to interact with web pages more naturally.

Directory | GitHub Repository