Hermes WebUI 扩展开发零基础给 WebUI 加自定义功能的实操指南【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webuiHermes WebUI 是 Hermes Agent 的网页操作台浏览器里就能管会话、看文件手机上也能用。扩展开发则让你不动一行核心代码就把自己写的界面功能挂进 WebUI 页面比如加个速记面板、把会话列表展示到自定义区域。只要项目装好、会基础 HTML/CSS/JS几十分钟就能做出第一个 Hermes WebUI 自定义功能。 30 秒看懂一个文件夹如何变成页面功能把扩展想成一件贴上去的家具你单独准备一个文件夹里面摆好两样东西——管长相的app.css和管行为的app.js。WebUI 启动时会把这两个文件自动挂进页面CSS 插在head里JS 插在/body之前。至于文件夹里的其余内容一律挂在/extensions/这个地址后面对外提供。这套机制默认是关着的。只有当环境变量HERMES_WEBUI_EXTENSION_DIR被设置、且指向一个真实存在的目录扩展才会激活没配置时整条链路根本不存在。能做的基本就是改页面这一层改外观注入同源的样式表加交互注入同源的脚本查数据用fetch调 WebUI 已开放的接口做不到的同样清楚绕开登录验证拿到你拿不到的权限读到扩展目录之外的文件引入第三方域名的脚本或样式直接改 Agent 的权限、模型等配置——只能经由现有接口、走正常登录 环境与三步准备先打开终端敲下这行命令把源码拉到本地GitCode 镜像git clone https://gitcode.com/GitHub_Trending/he/hermes-webui进入hermes-webui目录建好存放扩展的独立文件夹mkdir -p ~/.hermes/webui-extension再在文件夹里准备两个空文件分别放样式和交互touch ~/.hermes/webui-extension/app.css ~/.hermes/webui-extension/app.js 实战给 WebUI 加一个速记面板第 1 步把目录结构立起来上面的命令已经把结构立好了展开看一眼tree ~/.hermes/webui-extension运行后你会看到app.css和app.js并排躺在webui-extension目录下——这就是一个完整扩展的全部家当。第 2 步写 app.css只定义速记面板的样式样式里所有类名都带qnote-前缀避免和 WebUI 自带样式撞车。刷新页面后面板里的标题、输入框、按钮和每条便签都会按这里的规则渲染。.qnote-panel .qnote-title { margin-bottom: 10px; } .qnote-panel .qnote-input { width: 100%; padding: 6px 10px; margin-bottom: 8px; } .qnote-panel .qnote-add { padding: 5px 12px; border-radius: 6px; border: none; } .qnote-panel .qnote-item { padding: 4px 0; border-bottom: 1px dashed currentColor; }第 3 步写 app.js让面板能加、能删便签JS 开头先做防重复执行检查避免刷新后按钮越叠越多。运行后页面上会出现速记面板点按钮把输入内容变成一条便签点便签本身可以删掉它。(() { if (window.__qnoteReady) return; window.__qnoteReady true; const panel document.createElement(section); panel.id qnote-panel; panel.className main-view qnote-panel; panel.hidden true; panel.innerHTML h2 classqnote-title速记/h2 input classqnote-input placeholder记点什么 button classqnote-add存一条/button ul classqnote-list/ul; document.querySelector(main)?.appendChild(panel); const input panel.querySelector(.qnote-input); const list panel.querySelector(.qnote-list); panel.querySelector(.qnote-add).addEventListener(click, () { const text input.value.trim(); if (!text) return; const li document.createElement(li); li.className qnote-item; li.textContent text; li.title 点击删除; li.addEventListener(click, () li.remove()); list.appendChild(li); input.value ; }); window.addEventListener(keydown, (e) { if (e.altKey e.key n) panel.hidden !panel.hidden; }); })();按AltN就能显示或隐藏这个面板。第 4 步三个环境变量启用扩展并启动这三行分别是告诉 WebUI 扩展文件夹在哪、哪个文件当脚本注入、哪个文件当样式注入。把export和启动命令写在同一次终端会话里然后./start.sh起服务打开页面就能看到速记面板。export HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension export HERMES_WEBUI_EXTENSION_SCRIPT_URLS/extensions/app.js export HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/app.css ./start.sh 让扩展开口调一次现有接口面板跑起来后下一步通常是接上真实数据。下面这段直接替换app.js里原有的按钮逻辑即可它请求/api/sessions把拿到的会话逐条渲染成可点击的标题接口异常时则在列表区给出一句错误说明而不是让面板悄悄空白。async function loadSessions() { try { const resp await fetch(/api/sessions); if (!resp.ok) throw new Error(HTTP resp.status); const data await resp.json(); const items Array.isArray(data) ? data : (data.sessions || []); const list document.querySelector(#qnote-panel .qnote-list); list.innerHTML ; items.slice(0, 10).forEach((s) { const li document.createElement(li); li.className qnote-item; li.textContent s.title || s.id || 未命名会话; list.appendChild(li); }); if (!items.length) list.textContent 还没有会话; } catch (err) { console.error(拉取会话失败, err); document.querySelector(#qnote-panel .qnote-list).textContent 加载失败 err.message; } } loadSessions(); 扩展不加载怎么排查改动静态文件后多数情况下刷新页面就生效不用重启服务。没生效时按这张表从上往下查现象先查哪里说明扩展不加载HERMES_WEBUI_EXTENSION_DIR的取值目录必须真实存在路径写错时 WebUI 会当作未启用直接跳过不报错样式/脚本没注入另外两个*_URLS变量值必须以/extensions/开头写错的 URL 会被静默忽略页面行为异常F12 的 Console 与 Network 标签先看有没有红色报错再确认/extensions/app.js请求到了、状态是 200以上都对仍无头绪WebUI 服务端日志扩展启用、加载失败等关键动作都会留痕更细的机制、清单manifest写法、状态端点等内容仓库里的 docs/EXTENSIONS.md 讲得很全遇到进阶问题直接翻它。 安全红线与好习惯只加载自己写的、或你完全信任的扩展代码——它拥有当前登录用户的全部接口权限扩展目录里不存放任何密钥、密码类名和 ID 一律加自有前缀避免和主程序样式打架代码保持短小方便你自己随时审查从三个环境变量到一个能加删便签、还能拉取会话列表的面板你已经走完了 Hermes WebUI 扩展开发的完整闭环一个文件夹、两个文件核心代码一行未改个性化功能就长在了 WebUI 里。想继续深入官方文档 docs/EXTENSIONS.md 是唯一的下一步。【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考