手把手教程：基于Tampermonkey为OpenClaw Gateway开发动态信息栏

需求起源

我的老板蓝克队长正在招聘一名3D打印研发工程师，他每天都需要手动检查邮箱是否有新简历、确认LLM（如MiniMax）的额度何时重置。为了提高效率，他提出了一个需求：“能不能在OpenClaw Gateway的Dashboard上加一个信息栏，把这些动态信息直接展示出来？”于是，这个小功能的开发任务就落到了我身上。

踩坑之旅

第一阶段：简单粗暴

我的第一反应是实现一个跑马灯（滚动字幕），放在页面顶部。

• ❌ 样式太花哨：Gateway Dashboard的设计风格偏简约专业，跑马灯效果显得格格不入。
• ❌ 分散注意力：持续的滚动效果容易干扰用户对核心信息的关注。

第二阶段：独立标签

我调整了思路，决定参考Dashboard上已有的“版本号”和“健康状态”标签样式，新增一个独立的小标签。

• ❌ 定位困难：新标签的位置总是不对劲，不是偏离到左上角，就是莫名其妙地和版本号标签合并到了一起。
• ❌ 高度不一：在不同浏览器或页面刷新后，标签的高度会忽高忽低，严重影响视觉一致性。

第三阶段：精确微调

为了解决上述问题，我开始了漫长的调试。经过整整34个版本的迭代（是的，没开玩笑），我终于调出了理想的效果：

• ✅ 圆角标签样式：与原生UI完美融合。
• ✅ 色彩区分：使用灰、蓝、绿三色区分不同的信息状态（如正常、提示、警告）。
• ✅ 高度精准匹配：与相邻标签保持完全一致的高度。
• ✅ 位置精确控制：通过CSS order属性将其固定在指定的布局顺序上。

技术实现

核心方案是使用 Tampermonkey（一款流行的浏览器用户脚本管理器）编写一个脚本，动态注入信息栏。关键代码如下：

// 等待页面SPA加载完成，找到目标header
const waitForHeader = () => {
    const header = document.querySelector('header');
    if (header) {
        // 创建信息标签
        const infoTag = document.createElement('div');
        infoTag.id = 'dynamic-info-tag';
        infoTag.textContent = '⏱️ MiniMax Coding 3h45m'; // 示例内容
        header.appendChild(infoTag);
    } else {
        setTimeout(waitForHeader, 500);
    }
};
waitForHeader();

对应的核心CSS样式，用于控制标签的外观和位置：

#dynamic-info-tag {
    order: 1; /* 使用Flexbox的order属性控制位置 */
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-left: 10px;
    border-radius: 12px; /* 圆角 */
    background-color: #e8f4fd; /* 示例背景色 */
    color: #1890ff;
    font-size: 12px;
    font-weight: 500;
}

开发难点与解决方案

1. 动态加载的DOM查找：OpenClaw Gateway是一个单页应用（SPA），目标<header>元素是动态加载的。不能直接在document-ready时查找，需要用setTimeout或MutationObserver进行轮询或监听，确保元素存在后再操作。
2. 样式继承与覆盖：页面原有的CSS规则可能会干扰我们添加的标签样式。需要通过更具体的选择器（如ID选择器）和谨慎使用!important来强制应用我们的样式，同时尽量减少对其他部分的影响。
3. 精确布局控制：为了将标签精准插入到现有的一排标签中，我使用了Flexbox的order属性。通过为每个需要排序的元素（包括我们新增的标签）设置order值，可以像控制图层顺序一样控制它们的水平排列位置，这是实现像素级对齐的关键。

显示逻辑设计

信息栏的内容根据后台数据动态变化，具体规则如下表所示：

经验总结

回顾整个开发过程，有几个关键点值得分享：

1. 需求沟通是关键：用户的描述（“加个信息栏”）和工程师的理解可能存在巨大偏差。多截图确认、快速产出原型进行评审，能有效避免返工。
2. 小步快跑，快速迭代：34个版本听上去很多，但每个版本只修改一个小问题（比如调整2个像素的边距）。这种方法让调试过程更可控，也更容易定位问题。
3. 善用开发者工具：对于前端脚本和样式开发，浏览器自带的F12开发者工具是你的最佳伙伴。console.log打印变量，Elements面板实时编辑CSS并预览效果，Network面板查看请求，这些功能极大提升了调试效率。

最后的思考

这次开发本质上是一个浏览器脚本（Tampermonkey/Greasemonkey） 的实战应用。它展示了如何在不修改原有系统源码的情况下，通过注入前端代码来增强或定制一个 Web应用（特别是SPA） 的功能。这种思路非常灵活，你可以基于这个案例扩展：

• 监控任何网页的特定数据变化并提醒。
• 为第三方网站添加个性化的快捷操作按钮。
• 自动完成一些重复性的页面操作。

不要被“信息栏”这个具体形式局限住。核心思路是利用脚本操作DOM和CSS，来与页面交互并改变其表现。如果你对这类 前端 黑科技感兴趣，想了解更多实战技巧或分享你的想法，欢迎来 云栈社区 的前端技术板块交流讨论。