在一级方程式比赛中等待雨停时，我有一些时间可以浪费，所以我用画布完成了这项工作：
更新：以前的方法在用户从工具栏中删除图标时存在缺陷，更新后的方法更健壮且代码更少。
XUL
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
<hbox hidden="true">
<html:canvas id="toolbar_button_canvas" width="24" height="24"></html:canvas>
</hbox>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="toolbar_button" class="toolbarbutton-1" />
</toolbarpalette>
</overlay>
CSS
#toolbar_button {
list-style-image:url("chrome://your_extension/skin/icon_024.png");
}
toolbar[iconsize="small"] #toolbar_button {
list-style-image:url("chrome://your_extension/skin/icon_016.png");
}
JavaScript
show_status: function(display_text)
{
var btn = document.getElementById("toolbar_button");
var canvas = document.getElementById("toolbar_button_canvas");
var img_src = window.getComputedStyle(btn).listStyleImage.replace(/^url\("(chrome:\/\/your_extension\/skin\/icon_0\d{2}.png)"\)$/, "$1"); // get image path
var csize = img_src.replace(/^chrome:\/\/your_extension\/skin\/icon_0(\d{2})\.png$/, "$1"); // get image size
canvas.setAttribute("width", csize);
canvas.setAttribute("height", csize);
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function()
{
ctx.textBaseline = "top";
ctx.font = "bold 9px sans-serif"; // has to go before measureText
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
if (display_text !== "")
{
var w = ctx.measureText(display_text).width;
var h = 7; // 9 = font height
var rp = ((canvas.width - 4) > w) ? 2 : 1; // right padding = 2, or 1 if text is wider
var x = canvas.width - w - rp;
var y = canvas.height - h - 1; // 1 = bottom padding
ctx.fillStyle = "#f00"; // background color
ctx.fillRect(x-rp, y-1, w+rp+rp, h+2);
ctx.fillStyle = "#fff"; // text color
ctx.fillText(display_text, x, y);
//ctx.strokeText(display_text, x, y);
}
btn.image = canvas.toDataURL("image/png", ""); // set new toolbar image
};
img.src = img_src;
}