自定义 CSS 注入 nguyenduclong-ict/dsh-plugin-custom-css

dsh-plugin-custom-css

为 DeepSeek Harness (DSH / DSH Desktop) 注入自定义 CSS。

它在设置弹窗中新增一行 —— Custom CSS —— 点击后打开一个页面，其中包含：

- 一个开关，用于启用或禁用注入，以及
- 一个 CSS 文本域，其内容会在你输入时实时注入到 Web GUI 中。

1. 功能说明

| 部分 | 行为 |
| 设置入口 | 在设置弹窗的导航栏中注册一行 settings.section（顺序为 40），标签为 Custom CSS。 |
| 开关 | 注入或停止注入代码片段。关闭时保留已保存的代码。 |
| 文本域 | 每次按键都会注入（宿主写入防抖，500 ms）。失焦时刷新到宿主。 |
| 注入目标 | 单个 元素，每次写入时都会重新追加到 末尾，以便在层叠中胜过 Harness 在启动过程中追加的样式。 |
| 存储 | ~/.dsh/plugins/dsh-plugin-custom-css/config.json（设置 $DSH_HOME 时优先使用它），通过 GET/POST /api/custom-css/config 提供，并镜像到 localStorage，以便在下次启动首次绘制前应用该代码片段。 |
| 语言包 | 在 custom-css 命名空间下注册了 zh、en、vi 字典（回退到 en）。 |

不会改动其他任何内容：其他来源注入的样式永远不会被移除，插件也不会修改 Harness 安装。

2. 安装（DSH Desktop，Windows）

1. From this repository's parent directory, install the package into the web profile
cd "$env:APPDATA\dsh-desktop\harness\profiles\web"
& "$env:APPDATA\dsh-desktop\harness\.desktop-bin\pnpm.cmd" add
e.g. pnpm add C:\Users\you\Desktop\Code\dsh-plugins\dsh-plugin-custom-css
or pnpm add https://github.com//dsh-plugin-custom-css

然后将包名添加到该 profile 的 bundle 列表中 —— 编辑 %APPDATA%\dsh-desktop\harness\profiles\web\package.json：

{
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-plugin-custom-css"
]
}
}
}

重启 DSH Desktop。插件必须位于 dsh.profile.bundles 中，否则 Harness 永远不会加载它。

注意 —— dsh.profile.bundles 中的任何条目都必须在启动期间激活。如果插件无法激活，整个 Web UI 将无法启动，并报错 web boot: N entries did not activate。

macOS / Linux

cd "$HOME/Library/Application Support/dsh-desktop/harness/profiles/web" # macOS
"$HOME/Library/Application Support/dsh-desktop/harness/.desktop-bin/pnpm" add
Linux: ~/.config/dsh-desktop/harness/profiles/web

DSH CLI

dsh plugin --profile web add

3. 使用方法

1. 打开 Settings（侧边栏底部）→ 左侧导航中的 Custom CSS 行。
2. 打开 Enable custom CSS 开关。
3. 将 CSS 粘贴或写入文本区域。它会立即被注入。
4. 关闭模态框——样式会保持应用状态，并在下次启动时恢复。

示例片段

/* Recolor the brand accent /
:root {
--dsw-alias-brand-primary: #22d3ee;
}

/ Wider, calmer conversation column /
[data-conversation-scroll] {
font-size: 15px;
line-height: 1.7;
}

片段可用的设计令牌是 Harness CSS 自定义属性（--dsw-alias-、--dsw-font-*），因此主题可以与 DSH 当前使用的任意浅色/深色变体保持一致。

4. 文件

| 文件 | 作用 |
| package.json | 清单：dsh.bundle.patch + dsh.client（platform: web、immediately、inject）。 |
| cordis.patch.yml | 将该包插入加载器树的 bundle 补丁。 |
| index.js | 宿主端：GET/POST /api/custom-css/config 以及基于 $DSH_HOME 的 JSON 存储。 |
| client.js | 浏览器端：样式注入、设置区块、开关 + 文本区域。 |
| install.ps1 | Windows 安装程序（pnpm add + 注册 bundle 条目）。 |
| config.json | 在运行时创建于 ~/.dsh/plugins/dsh-plugin-custom-css/ 下。 |
| smoke-test.mjs | 浏览器端测试：针对 DOM/React 桩运行 client.js，并断言注入、开关和持久化行为。 |
| host-test.mjs | 宿主端测试：在 node:http 上挂载真实路由，并断言 GET/POST/OPTIONS、合并语义和重启恢复。 |
| LICENSE | MIT。 |
| .gitignore | 将运行时状态（config.json、plugins/）排除在仓库之外。 |

测试

node smoke-test.mjs # browser half
node host-test.mjs # host half

5. HTTP API

| 方法 | 路径 | 请求体 | 响应 |
| GET | /api/custom-css/config | — | { "enabled": boolean, "css": string } |
| POST | /api/custom-css/config | { "enabled"?: boolean, "css"?: string } | 当前配置加上 saved: boolean |

6. 开发说明

- 浏览器 bundle 是手写的框架形式 CJS（window.__ModuleLoader__.load），并且仅需要平台种子模块——react、react/jsx-runtime——因此它不声明任何 dsh.client.external 边。
- 编辑 client.js 并重启应用（或者，如果你的设置会监视它，让 Harness HMR 重新加载插件 bundle）。
- 要重置一切，请删除 ~/.dsh/plugins/dsh-plugin-custom-css/config.json。

License

MIT © nguyenduclong-ict