Waybar中为运行中的应用添加背景颜色指示器

背景介绍

Waybar作为一款现代化的Wayland状态栏工具，提供了高度可定制化的界面元素。在实际使用中，用户经常需要直观地了解哪些应用程序正在运行。本文将详细介绍如何在Waybar中为应用程序图标添加运行状态指示功能，通过背景颜色的变化来区分应用是否正在运行。

实现原理

Waybar的custom模块本身并不直接提供应用运行状态检测功能，但我们可以通过结合shell脚本和JSON输出来实现这一需求。核心思路是：

1. 使用shell脚本检测目标进程是否存在
2. 根据检测结果输出不同的CSS类名
3. 在CSS中为不同类名定义不同的样式

具体实现步骤

1. 配置Waybar模块

首先需要在Waybar的配置文件中设置一个custom模块：

"custom/firefox": {
    "format": " {} ",
    "exec": "~/.config/scripts/firefox_state.sh",
    "on-click": "firefox",
    "on-right-click": "killall firefox",
    "return-type": "json",
    "interval": 5
}

关键配置项说明：

• exec: 指定检测脚本路径
• return-type: 设置为json以支持类名输出
• interval: 设置检测间隔时间(秒)

2. 编写状态检测脚本

创建一个shell脚本(如firefox_state.sh)用于检测应用运行状态：

#!/bin/bash
if pgrep firefox > /dev/null; then
    echo '{"text":"","class":"firefox-running"}'
else
    echo '{"text":"","class":"firefox-not-running"}'
fi

脚本功能说明：

• 使用pgrep命令检测firefox进程
• 根据检测结果输出不同的JSON对象
• text字段显示图标(Font Awesome图标)
• class字段指定CSS类名

3. 定义CSS样式

在Waybar的CSS样式文件中添加以下规则：

#custom-firefox.firefox-running {
    background-color: #505050;
    border-radius: 5px;
    padding: 0 10px;
}

#custom-firefox.firefox-not-running {
    background-color: #000000;
    padding: 0 10px;
}

样式设计建议：

• 使用明显的颜色对比区分状态
• 添加适当的圆角和内边距美化显示
• 可以根据个人喜好调整颜色值

扩展应用

此方法不仅适用于Firefox，可以轻松扩展到其他应用程序：

1. 对于Chrome浏览器：

#!/bin/bash
if pgrep chrome > /dev/null; then
    echo '{"text":"","class":"chrome-running"}'
else
    echo '{"text":"","class":"chrome-not-running"}'
fi

2. 对于VS Code编辑器：

#!/bin/bash
if pgrep code > /dev/null; then
    echo '{"text":"","class":"vscode-running"}'
else
    echo '{"text":"","class":"vscode-not-running"}'
fi

优化建议

1. 性能考虑：对于频繁检测的应用，可以适当增加检测间隔(如10秒)
2. 视觉效果：除了背景色，还可以考虑添加边框、阴影等效果
3. 多状态指示：扩展脚本以检测更多状态(如窗口焦点状态)
4. 错误处理：在脚本中添加错误处理逻辑，确保Waybar稳定运行

总结

通过结合Waybar的custom模块、shell脚本和CSS样式，我们可以创建直观的应用状态指示器。这种方法灵活性强，可以轻松适配各种应用程序，为用户提供清晰的状态反馈。实际使用时，可以根据个人喜好调整图标、颜色和样式，打造个性化的桌面环境。