在 Firefox 自定义附加组件中扩展状态栏 statusbar 的内容一般通过在附件组件的 XUL 定义文件中添加 statusbarpanel 元素来实现。

每个 statusbarpanel 都可以定义不同的 CSS 样式。比如对于 <statusbarpanel id="zealiTestExt-panel" label="test label"/> ，可以用常规的方式来修改样式：

var pTargetEle = document.getElementById('zealiTestExt-panel');
with(pTargetEle.style){
    fontWeight = 'bold';
    color = '#f00';
}

但如果想修改 statusbarpanel 的背景，直接这样写你会发现没有起任何效果：

... backgroundColor = '#0f0';

原因是 Firefox 对状态栏的元素应用了基于操作系统的样式，或者当前使用的主题样式定义覆盖了用户自定义组件的样式。解决方法是加入 mozilla 的扩展CSS样式 -moz-appearance 以及 !important 声明：

...
pTargetEle.setAttribute('style','-moz-appearance: none !important; background-image: none !important;background-color: #0f0 !important;');

将 -moz-appearance 设置为 none 并加上 !important 强制 Firefox 不对该状态栏区域应用缺省系统样式；同时强制清除当前背景图片的样式并设定新的背景颜色。