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

Question

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

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

我尝试使用说明、 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

在一级方程式赛车中，我在等待雨停时浪费了一些时间，因此我使用画布进行了这项工作：

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

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 变

体你也可以尝试使用 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

它在我的简单插件上运行良好>

如果您使用图书馆，您可以AMO-review 遇到一些问题

可以通过 解决问题