firefox - 如何在 Firefox 插件的工具栏按钮上显示文本？

Question

我正在尝试在工具栏按钮中的图标上显示一个小文本(新消息计数)，例如 Chrome 和 Opera 扩展程序在工具栏图标上带有徽章。文字不应该覆盖整个图标，它应该在底部，这样用户仍然可以看到图标的主要部分并识别它是什么扩展名。我怎样才能做到这一点？

您可以在 Chrome 的此示例图像上看到我想要的内容:



我尝试在 stack 元素内使用 description、span 和 div，但我无法将它们定位在底部。 Description 和 div 始终在中心显示文本，而 span 将其显示在图标的右侧，使整个按钮变宽。

<toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton class="toolbarbutton-1">
        <stack>
            <image></image>
            <description right="0" bottom="0" value="4"></description>
            <!-- <html:div right="0" bottom="0">5</html:div> -->
        </stack>
    </toolbarbutton>
</toolbarpalette>

Answer 1

在Formula 1等待雨停时，我有一些时间可以浪费，所以我用 Canvas 做了这个工作:

更新 :当用户从工具栏中删除图标时，以前的方法存在缺陷，更新的方法更健壮且代码更少。

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;
}