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

Question

我正在尝试在工具栏按钮上的图标上显示一个小文本（新消息计数），类似Chrome和Opera扩展程序的工具栏图标上有徽章。文本不应覆盖整个图标，它应位于底部，以便用户仍然可以看到图标的主要部分并识别它的扩展名。我怎么能这样做？

您可以在Chrome上的示例图片中看到我想要的内容：

我在stack元素中尝试了description，span和div，但我无法将它们都放在底部。描述和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

在等待下雨停止参加一级方程式赛车时，我有时间浪费时间，所以我用帆布做了这个工作：

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

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

Answer 2

我的变体与html：div

P.S。你也可以尝试使用z-index

看起来如何http://f3.s.qip.ru/fTUvr2Cj.jpg

XUL

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
    <toolbar id="nav-bar">
    <hbox>
    <html:div style="color: #000000;
        font-size: 10px;
        font-weight: bold;
        margin-right: 10px;
        margin-top: 16px;
        position: fixed;
        right: 0;">5</html:div>
    <toolbarbutton  insertafter="search-container" type="menu">
    <menupopup>
    <menuitem   class="menuitem-iconic" label="&count;"></menuitem>

    <menuitem   class="menuitem-iconic" label="&size;"></menuitem>

    <menuitem  class="menuitem-iconic" label="&time;"></menuitem>
    <menuseparator></menuseparator>
    <menuitem  class="menuitem-iconic" label="&settings;"></menuitem>
    </menupopup>
    </toolbarbutton>
    </hbox>
    </toolbar>
</overlay>

Answer 3

我刚使用了 browser-action-jplib

中的库

它在 simple addons

上运行良好

如果您使用该库，您可能会遇到AMO-review

的一些问题

可以通过 issue

解决