GULI-lab/DSH-element-source

Name: GULI-lab/DSH-element-source
Author: GULI-lab

Plugin插件 Native原生 ⭐ 7 MIT Migration & Compatibility迁移与兼容 UI & Themes界面与主题

在开发页面点击任意 UI 元素，一键定位 Vue / React / Svelte / Angular 源码。DSH 点击定位源码检查器，兼容 dsh-better-sidebar：预览本地 dev server，点击元素，源码直达 DSH 聊天，交给助手微调。

Project Overview项目介绍

Edited by Zhiwei Agent (zhiwei)由知微Agent(zhiwei)编辑

This is a native DSH plugin that adds click-to-source functionality for frontend development workflows. When working on a locally running frontend dev server, you can click any UI element on the page, and the plugin will automatically resolve the corresponding source file and line number, then insert that location as a draft message in DSH’s chat composer for the AI agent to read and modify. It supports all major frameworks including React, Vue 2/3, Svelte, and Angular, with a generic full-text search fallback for any other frontend framework. You do not need to install a separate browser extension to use this plugin.

To use the plugin, first navigate to the local preview entry, which will open your dev page in an embedded iframe inside DSH. If you have dsh-better-sidebar installed, the plugin uses that extension’s existing Local Preview tab for a clean integrated experience, otherwise it adds its own full-height, collapsible right sidebar to the DSH interface. Once the preview loads, enable pick mode, hover over your target element to highlight it, then click to confirm your selection. The plugin will resolve the source location and fill your chat composer draft automatically, so you can just review and send the request to the DSH agent.

The plugin is released under the permissive MIT license, and all local development uses the pnpm package manager. To test a local development build, clone the repository, run pnpm install and pnpm build, then add it to your local DSH web profile with the command dsh plugin --profile web add link:/path/to/your/local/repo. There are several documented known limitations: it only works with development builds (production strips runtime source metadata), it cannot embed the DSH UI itself in the preview iframe, and Vue line number resolution relies on text matching which can sometimes be approximate.

这是一个专为DeepSeek Harness（DSH）打造的原生插件，功能是点击前端开发页面上的任意UI元素，自动定位到该元素对应的源码文件和行号，并把定位信息填充到DSH的聊天输入框中，方便AI代理修改代码。它支持Vue、React、Svelte、Angular等主流前端框架，也兼容通用的后备搜索方案，可配合dsh-better-sidebar使用，也可独立运行。

使用流程非常简单，开发者先打开本地开发服务器运行的前端页面，在DSH的本地预览入口进入页面预览。如果安装了dsh-better-sidebar，就使用它的本地预览标签页，否则插件自带一个可折叠的右侧侧边栏承载预览面板。开启拾取模式后，hover高亮目标元素再点击，插件就会自动解析对应源码位置。整个过程无需安装额外浏览器扩展，适合日常前端开发调试和AI辅助改码场景。

本插件采用MIT许可证开源，免费供开发使用，开发依赖pnpm进行包管理，本地测试可通过dsh plugin命令添加本地克隆的插件路径进行调试。已知限制包括：仅支持开发构建版本（生产构建不保留源码元信息），本地预览不支持嵌入DSH本身，相对路径API请求会受同源策略影响，Vue行号定位依赖文本匹配可能存在偏差。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：DSH-element-source（GULI-lab/DSH-element-source）
仓库：https://github.com/GULI-lab/DSH-element-source
本站详情页：https://www.yhbd.top/plugins/guli-lab-dsh-element-source/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 MIT · ⭐ 7 · 最近提交 2026-08-15 · 主语言 TypeScript

按下面顺序执行，每步先把结论告诉我，再进入下一步：

【1 兼容性检查】
① 我这边：DSH 版本、Node 版本、操作系统、当前 profile（web / desktop）。
② 读它的 README、package.json、插件 manifest，列出它要求的 DSH 版本 / Node 版本 / 操作系统 / 外部依赖 / 需要另外先装的运行时。
③ 逐条比对，结论只写「满足 / 不满足 / 未知」三种；不满足的给出可行替代方案。
④ 检查是否和我已装的插件冲突：命令名重复、skill / tool 重名、端口占用、重复注册的 MCP server。

【2 安全性检查】
① 仓库可信度：和上面「本站登记」是否一致；star / fork 数、创建时间、最近提交，是否归档或长期停更。
② 安装脚本：逐行看 package.json 的 preinstall / install / postinstall，以及 install.sh、setup.ps1 之类脚本。出现 curl|bash、下载后直接执行、混淆代码、访问与插件功能无关的域名，立刻停下来告诉我，不要继续装。
③ 依赖：列出新增依赖，标出无人维护、或与知名包拼写近似的可疑包（typosquatting）。
④ 权限与副作用：它会读写哪些目录、访问哪些域名、需要哪些 DSH 权限（filesystem / network / shell / clipboard 等），以及怎么卸载和回滚。
⑤ 如果它要求 sudo / 管理员权限，或权限明显超出功能所需，先停下来问我。

【3 安装】
上面两步没有「不满足」和「高危项」时才执行；用官方推荐方式安装，不要自行提权。

【4 汇报】
用表格输出：检查项 / 结论 / 依据 / 是否需要我决策。拿不准的一律写「未知」并说明要我怎么确认——不要猜，也不要替我决定。

Send this message to DSH in your current session: it verifies compatibility and security first (answering met / not met / unknown item by item) and only installs once everything checks out — it will stop and ask you if it finds a high-risk item. The box scrolls; the copy is the full prompt. CLI install commands may not be accurate across systems, so DSH is the safer route.把上面这条消息直接发给当前会话里的 DSH：它会先核对兼容性与安全性（逐条给「满足 / 不满足 / 未知」），确认没问题再安装，有高危项会停下来问你。框内可滚动，复制到的是完整提示词；安装命令不一定准确，发给 DSH 更稳。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 1 warning1 项注意

Only 7 stars - very few users, little community feedback星标只有 7，几乎没人在用，遇到问题缺少社区反馈

DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时（Electron / Python / Docker 等）是否齐备
Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突：命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致，是否归档或长期停更
Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需（filesystem / network / shell / clipboard）
Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限，以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照，不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装（适合开发者）

CLI Install命令行安装

dsh plugin --profile web add github:GULI-lab/DSH-element-source

把 GULI-lab/DSH-element-source 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

11.5 KB · 缓存于 2026-08-23 03:42:03 · 11.5 KB

dsh-element-source

Click any UI element in your running dev page to jump to its Vue / React / Svelte / Angular source. A click-to-source inspector for DeepSeek Harness (DSH), compatible with dsh-better-sidebar: preview local dev servers, pick an element, and the source location lands in the DSH chat for the agent to tweak.

npm version license

English | 中文

What it does

Finding "that button on the page" ↔ "the line of code that renders it" becomes a single click:

Open your frontend page (dev server) in the Local preview entry — a tab this plugin registers in dsh-better-sidebar, or its own right-docked sidebar when the sidebar is not installed;
Enable Pick mode, hover to highlight the target, click it;
The plugin resolves the matching source file + line and fills the chat composer with an [元素定位] message (nothing is sent — you decide);
The agent reads the file with the read tool, shows the code in the dialog, and waits for your change request.

No browser extension required, and it works for Vue / React / Svelte / Angular plus any other framework (generic fallback).

Framework support

Framework	File	Line	How
React (dev build)	✅ exact	✅ exact	Reads the JSX `__source` on the fiber (`@vitejs/plugin-react` / CRA inject it)
Vue 2 / Vue 3 (dev build)	✅ exact	~exact	`__file` gives the file; the line comes from template-text matching
Svelte (dev build)	✅ exact	✅ exact	Reads dev-mode `__svelte_meta`
Angular	best effort	best effort	Detects `ng-reflect-*` markers, then component/text search
Any framework + code-inspector-plugin installed	✅ exact	✅ exact	Reads its injected `data-insp-*` DOM attributes directly
Other / unknown	✅	~	Full-text search of the session workspace for the clicked text / class / id

Showing the opening section of the README — the full document lives in the repository以上为 README 开头摘要，完整文档在仓库内 · View the full README on GitHub →在 GitHub 查看完整 README →

渲染基于仓库 GULI-lab/DSH-element-source 的 README.md。在 GitHub 查看原文 →