dsh-plugin-inspector:在插件詳情頁直接查看聲明式配置與代碼

前言

DSH 的理念是「一切皆插件」,插件通過 profile 裏的 cordis.patch.yml 打進 UI,再由 Host 加載 package.json 裏的聲明。問題是:想知道某個插件究竟聲明瞭什麼、裝了哪些文件,只能回到命令行翻 profile 目錄和 node_modules,UI 上沒有入口。對於排查「這個插件爲什麼會改變某棵樹」這類問題,這是個高頻的排查起點。

dsh-plugin-inspector(包名 @liuweibing7/dsh-plugin-inspector,版本 1.0.0,MIT,作者 liuweibing7)把這件事收進了插件詳情頁:維護者的工具分類是客戶端,瀏覽器端在插件頁內新增一個 inspector 區,把聲明用的 YAML 原文和實際安裝的代碼文件分兩個標籤頁列出來。目前 GitHub 星標爲 0,屬於很新的小工具。

這個插件是什麼

一句話定位:一個 DSH 客戶端插件,在 http:// Web GUI 的插件詳情頁上加一個 inspector 區,展示目標插件由哪些 YAML patch 條目聲明、背後安裝了哪些代碼文件。它解決的是「插件聲明與實際文件對不上」的排查問題,讓你不用離開界面去讀 profile 和包目錄。

它不是插件管理器,也不做安裝、啓用或卸載。它只讀、只展示。

核心功能

下面兩節按 README 裏的描述整理,分「聲明」與「代碼」兩塊。

Declaration 標籤頁:插件是怎麼聲明的

  • 讀取當前 profile 的 cordis.patch.yml 和插件 bundle 自帶的 cordis.patch.yml,定位聲明該插件的精確 YAML list-item。
  • 每一段展示來源文件路徑、具體文本、對應條目,並提供整份文件的查看。
  • 頁面打開即加載聲明,不需要切標籤。

Code 標籤頁:插件裝了哪些文件

  • 列出插件安裝出來的文件:package.json、Host 入口、瀏覽器 bundle、隨包發佈的 src/ 源碼、README 和類型入口。
  • YAML、JSON、JS/TS、Markdown 均有語法高亮。
  • Markdown 默認渲染,並提供 rendered/raw 切換。
  • 該標籤頁只在你首次打開時才發起加載,不是默認拉取。

瀏覽器端不能直接讀文件,所有文本都來自 Host 側接口,這是後文「工作流程」要展開的地方。

安裝與啓用

先說明前提:這個能力要求 DSH Web GUI 跑在 http:// 下,file:// 外殼裏該區塊不可用;並且目標插件必須有對應頁面(bundle 頁、行配置頁或官方插件頁),否則 inspector 無從掛載。

遠端安裝(來自 README):

dsh plugin --profile <profile> add github:liuweibing7/dsh-plugin-inspector

本地 checkout 安裝:

dsh plugin --profile <profile> add /path/to/dsh-plugin-inspector

裝完根據宿主情況重啓或刷新 Web UI。插件本身註冊一個詳情頁區塊(slot plugins.detail.section,id plugin-inspector)和一個 Host 路由(/plugin-inspector),不改動其他 UI。

典型用法

安裝完成後,在 Plugins 界面打開任意插件詳情頁,滾動到 inspector 區即可。README 給出的 screenshots 展示了三個時點:插件詳情頁中的 inspector 區、Declaration 標籤頁(yaml 原文與文件路徑並列)、Code 標籤頁(語法高亮與 rendered/raw 切換)。

如果你要排查某個插件爲什麼生效,操作路徑是:打開它的詳情頁 → 先看 Declaration,確認是哪條 patch 條目把它接進來的 → 再切到 Code,看實際入口和 bundle 與聲明是否一致。類比手工排查時在 profile 目錄裏 grep YAML、在 node_modules 裏翻 package.json,這兩步就是 inspector 的替代。

工作流程

README 描述了兩端各自的職責:

  • Host 半(index.js、blocks.js)註冊同源 POST /plugin-inspector 路由,讀取當前 profile 的 patch 文件和已安裝的包文件,返回 JSON,不做任何寫入。blocks.js 負責精確提取 YAML list-item。
  • 瀏覽器半(client.js)註冊 plugins.detail.section 並渲染兩個標籤頁,所有文本來自 Host 路由。
  • 路由拒絕跨域請求,也不設置 CORS 頭;服務由 Host 的 loopback Web 服務器提供。
  • 聲明與代碼的載荷在頁面內按目標緩存,上限 10 個目標;Code 標籤首次打開才請求。

權限範圍與安全注意

這部分直接關係到能不能放心在生產環境使用,README 有明確聲明:

  • 這是本地排查工具。它會讀當前 profile 的 cordis.patch.yml / cordis.yml / patch overlays,以及你打開的插件包的 package.json 和已安裝文件。
  • 它不寫文件、不向網絡發送任何內容、不執行插件代碼。
  • 渲染 Markdown 時輸出的是轉義後的 HTML:README 裏的裸 HTML 按文本顯示,javascript: 鏈接不會被渲染成可點的鏈接,鏈接一律在新標籤頁打開。
  • 受限於 dsh 進程本身的權限,它能讀到的就是你啓動 DSH 時能看到的文件。安裝前如需嚴格審計,仍應自行檢查插件源碼與許可證(本包爲 MIT),而不是默認信任。

邊界與已知限制

  • 大多數包只發布構建後的 lib/*.js,TypeScript 源碼只在包發佈 src/ 時可見(例如 @deepseek-ai/cordis)。
  • 單文件截斷到 256 KiB,整體響應上限 1.6 MiB,最多返回 16 個文件;高亮只覆蓋單段的前 120 KiB。
  • Markdown 渲染覆蓋標題、段落、列表、引用、圍欄/行內代碼、鏈接、強調、分隔線和簡單表格;嵌套列表會被拍平,圖片轉成鏈接,裸 HTML 被轉義。
  • file:// 運行時不可用。

開發形態

無構建步驟。包是純 ESM 加一個手寫瀏覽器 bundle,由 window.__ModuleLoader__ 加載。關鍵文件劃分如下:

package.json         dsh.bundle.patch + dsh.client + exports
cordis.patch.yml     插入 plugin-inspector 行
index.js             Host 半:路由 + profile/patch/package 讀取
blocks.js            精確 YAML list-item 提取
client.js            瀏覽器半:插槽、標籤頁、高亮、Markdown
locale/*.json        展示元數據(標題/描述)
icon.svg             插件圖標

package.json 中 dsh.client 聲明 platform: web、immediately: true,注入 @deepseek-ai/dsh-client-locale;dsh.bundle.patch 指向 ./cordis.patch.yml。

結尾

dsh-plugin-inspector 把插件「聲明瞭什麼、裝了哪些文件」這兩件事搬到詳情頁裏,省掉了翻 profile 和 node_modules 的往返。它只讀不寫、不聯網、不執行代碼,屬於排查階段的輔助工具,而不是插件管理方案。

目錄頁:https://www.skillhub.cn/plugins/liuweibing7/dsh-plugin-inspector

GitHub:https://github.com/liuweibing7/dsh-plugin-inspector

需要說明的是,社區插件目錄是獨立站點,與 DeepSeek / 幻方無官方從屬關係。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜