
Hermes WebUI 扩展开发3 步快速添加自定义功能不改核心代码【免费下载链接】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 的 Web 界面工具。本文带你用扩展开发的方式给 WebUI 加自定义功能——不碰一行核心源码。扩展机制一瞥扩展是怎么加载的默认情况下扩展系统是关着的。你设置环境变量HERMES_WEBUI_EXTENSION_DIR并指向一个已存在的目录它才会开启——环境变量就是递给程序的“开关旋钮”。开启后该目录下的文件会通过/extensions/路径对页面可见再用HERMES_WEBUI_EXTENSION_SCRIPT_URLS和HERMES_WEBUI_EXTENSION_STYLESHEET_URLS两个变量指定你的 JS 和 CSSWebUI 会在渲染时把它们注入到页面头部和底部。这套逻辑的核心在 api/extensions.py。能做从配置目录提供静态文件向页面头部注入你的 CSS向页面底部注入你的 JS调用 WebUI 现有的后端接口不能做绕过 WebUI 登录认证读取配置目录之外的文件加载第三方域名的脚本或样式注册新的后端路由为什么优于直接改源码你的代码放在独立目录里核心升级时不会起冲突想回滚把环境变量一取消即可不用翻 git 历史试完删掉目录就干干净净主程序始终保持在原始状态。三步上手创建你的第一个 WebUI 扩展步骤 1创建扩展目录目标只有一个给扩展一个家。用一条命令建目录再在里面放两个空文件app.css和app.js。环境要求就这两样能用的命令行以及 Hermes WebUI 源码。mkdir -p ~/.hermes/webui-extension cd ~/.hermes/webui-extension touch app.css app.js步骤 2编写样式与交互两个文件CSS 只管外观给类名加个独特前缀如my-ext-避免和主程序样式打架。JS 管交互建议整体包进一个自执行函数——就是“自己会立即执行的匿名函数”防止污染全局变量并在开头加一行重复初始化保护。最小版本是这样创建一个小角标写进页面。(() { if (document.getElementById(my-badge)) return; const badge document.createElement(div); badge.className my-ext-badge; badge.textContent 扩展已加载; document.body.appendChild(badge); })();步骤 3配置环境变量并启动验证把三个变量指到你的文件上然后启动 WebUI。打开页面看到右下角角标就成功了 HERMES_WEBUI_EXTENSION_DIR~/.hermes/webui-extension \ HERMES_WEBUI_EXTENSION_SCRIPT_URLS/extensions/app.js \ HERMES_WEBUI_EXTENSION_STYLESHEET_URLS/extensions/app.css \ ./start.sh进阶让扩展调用后端接口你的扩展 JS 和 WebUI 同源所以可以直接用fetch调登录用户本来就有权访问的接口——比如/api/sessions拿会话列表/api/extensions/status看扩展自身的加载状态const res await fetch(/api/sessions); const data await res.json(); console.log(会话数:, data.length);安全上记住一点扩展 JS 跑在当前会话的完整权限下只加载你自己写的或完全信任的代码多人共用的实例先给 WebUI 设好密码再开扩展。排障速查扩展不加载怎么办症状可能原因解法扩展完全不加载目录不存在系统不会自动创建或变量名拼错先建好目录确认变量拼写后重启静态文件能访问但 CSS/JS 没生效URL 变量没配或路径没以/extensions/开头改正两个 URL 变量后重启样式和主程序冲突类名撞车给你的类加独特前缀接口调用返回 401未登录或会话过期先登录再刷新页面重试改了变量却没变化环境变量只在启动时读取重启 start.sh只改文件内容则立即生效做完第一个扩展后面的事都是同一套写文件、指变量、浏览器里看效果。完整的特性清单和安全细节在官方文档 docs/EXTENSIONS.md 里。好了去给你的 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-webui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考