DSH Web 提供了插件化能力,但原生的瀏覽器右鍵菜單通常難以直接定製。開發者在需要自定義操作(如特定節點的上下文操作)或集成系統工具(如直接打開工作區目錄)時,往往需要自己實現複雜的攔截邏輯。dsh-custom-context-menu 插件解決了這個問題,它通過全局接管瀏覽器的 contextmenu 事件,提供了一個零依賴的擴展框架,並內置了在文件管理器中打開工作區文件夾的功能。
插件概覽¶
這是一個 DeepSeek Harness Web UI 的自定義右鍵菜單插件。它由開發者 sulfide2085 維護,採用 MIT 許可證。插件的核心價值在於:第一,提供了一套可擴展的 Provider API,允許開發者通過代碼註冊自定義菜單項;第二,內置了針對 DSH 工作區側邊欄的“在資源管理器中打開文件夾”功能。
核心功能¶
- 全局接管與智能定位:插件會攔截頁面全局的右鍵事件(輸入框和菜單自身除外),並在屏幕邊緣自動調整位置,確保菜單始終可見。
- 可擴展 Provider API:支持通過
register函數註冊菜單項。支持常規項、分隔線、分組標題,並支持禁用、危險操作標記及提示信息。 - 無命中不打擾:如果沒有任何 Provider 匹配當前右鍵目標,插件會放行瀏覽器原生的右鍵菜單,避免顯示“暫無菜單項”的佔位符。
- 工作區文件夾打開:右鍵側邊欄的工作區行,提供“打開文件夾”選項。支持 Windows (explorer.exe)、macOS (open)、Linux (xdg-open),並在路徑失效時報錯。
- 鍵盤導航:支持使用方向鍵選擇菜單項,Enter 或 Space 觸發。
安裝與啓用¶
使用官方 CLI 進行安裝。
dsh plugin --profile web add "https://github.com/sulfide2085/dsh-custom-context-menu.git"
安裝完成後,重啓 DSH Web 進程即可生效。
典型用法¶
安裝後,可以通過瀏覽器控制台或擴展代碼調用 window.dshContextMenu 對象。
1. 註冊菜單項¶
使用 register 方法註冊一個回調函數,該函數接收目標元素和事件對象,返回菜單項數組。
window.dshContextMenu.register((target, event) => {
// 檢查是否爲目標元素
const row = target.closest("[data-session-row]");
if (row === null) return null; // 不處理,交給下一個 provider
return [
{ type: "label", text: row.dataset.title },
{ label: "複製標題", onClick: () => navigator.clipboard.writeText(row.dataset.title) },
{ type: "separator" },
{ label: "刪除會話", danger: true, onClick: () => { /* ... */ } }
];
});
2. 菜單項類型¶
菜單項支持以下形式:
* 字符串:簡寫,label 即爲字符串內容。
* 對象:包含 label、onClick、disabled、danger、hint 等屬性。
* 分隔線:{ type: "separator" }。
* 分組標題:{ type: "label", text: "標題" }。
3. 控制菜單¶
可以通過 API 控制菜單的開關和顯示。
// 開啓或關閉全局菜單
window.dshContextMenu.setEnabled(true);
// 命令式在指定座標彈出菜單
window.dshContextMenu.open(x, y, items);
適用場景與注意¶
- 單層菜單:當前版本不支持多級子菜單,菜單項爲扁平結構。
- 工作區匹配:“打開文件夾”功能依賴於 DSH Web 官方的 workspace 行結構與
ctx.workspaces服務。匹配規則包括行尾省略號按鈕的aria-label、行內首個文本 span 匹配 workspacetitle或目錄path的 basename。 - 原生菜單放行:在輸入框、文本域或可編輯元素上右鍵,或無匹配項時,插件會完全放行瀏覽器原生的右鍵菜單,保留複製粘貼等基礎功能。
總結¶
該插件通過簡單的 API 封裝,解決了 DSH Web 環境下的右鍵菜單定製需求,適合需要深度集成系統工具或自定義交互的開發者。