如何将操作按钮图标放在 Firefox 附加组件的地址/网址栏中答案

【问题标题】：How to put action button icon inside address/url bar of Firefox add-ons如何将操作按钮图标放在 Firefox 附加组件的地址/网址栏中
【发布时间】：2014-08-13 10:18:18
【问题描述】：

根据 Firefox addons sdk 的 UI/Button/Action 低级 API，我可以完美地将扩展图标放在工具栏上。实际上默认情况下，该按钮出现在 Firefox 工具栏中。

var buttons = require('sdk/ui/button/action');

var button = buttons.ActionButton({
    id: "XXXX",
    label: "XXXXXXYYYYY",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
onClick: handleClick
});

我在 API 文档中看不到将图标放在其他位置的任何选项。

但很少有 FF 扩展能够做到这一点。我想将扩展图标放在浏览器的地址栏中，如下图所示：

有什么解决方法吗？

【问题讨论】：

你试过我提供的代码了吗？我刚刚在 Australis 测试过，它仍然有效。

标签： firefox firefox-addon-sdk

【解决方案1】：

这是执行@ZER0 描述的一些代码。 ~~我没有在澳大利亚测试过，但我认为它应该仍然有效~~我已经测试过，它确实有效。

var loadUrlbarButton = function(doc, urlBtnClick) {
    var urlBarIcons = doc.getElementById('urlbar-icons')
    var btn = doc.createElement('toolbarbutton');
    btn.setAttribute('id', 'my-id');
    btn.setAttribute('image', require('sdk/self').data.url('my-icon.png'));
    btn.addEventListener('command', urlBtnClick, false);
    urlBarIcons.appendChild(btn);
    return btn;
}

var doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;

var onBtnClick = function(event) {
    //do something when URL bar button is clicked
}

var urlbarButton = loadUrlbarButton(doc, onBtnClick);

【讨论】：

你是个种马。有没有一种简单的方法可以从外部函数中修改按钮动态使用的图像？
是的，打电话给urlbarButton.setAttribute('image', data.url('my-activated-icon.png'));
好东西！太感谢了！有没有办法在更改按钮后刷新按钮？那部分似乎不起作用。
不用担心。只需将浏览器视为网页即可。一旦你可以访问一个元素，你就可以添加一个子元素、一个监听器、一些 CSS……如果你想多浏览一下浏览器/chrome，请查看 DOM inspector extension。
内置浏览器工具箱实际上执行与该扩展相同的功能，因此不再需要它。

【解决方案2】：

目前无法使用附加 SDK 或可自定义的 UI API；你基本上必须手动完成——这意味着，跟踪所有浏览器窗口，并在正确的位置附加一个 XUL DOM 节点，然后处理点击。

这样的功能实际上是计划好的，但是因为在新的 Australis 界面中，UX 团队决定让位置栏更干净，删除所有图标——注意书签星形图标也被移到了外面——它被取消了优先级。然而，我们有一个错误，我有一个这样的功能原型，除非用户体验仍然对此有强烈的感觉，否则我想登陆。如果是这样的话，我可能会发布这样的模块作为 3rd 方模块。

【讨论】：