javascript - 即时更改 erik vold 工具栏按钮图像

Question

我正在尝试使用 SDK 制作 Firefox 扩展。（如果我能避免 XUL 我很高兴）

我正在使用erik vold 工具栏按钮

但我需要即时更改工具栏图像。

我的 lib/main.js （背景页面）是：

var tbb = require("toolbarbutton").ToolbarButton({
  id: "My-button",
  label: "My menu",
  image: Data.url('off.png'),
  onCommand: function(){
    Tabs.open(Data.url("signin.html"));
  }
});

tbb.setIcon({image:Data.url('on.png')});
console.log(tbb.image);

tbb.moveTo({
  toolbarID: "nav-bar",
  forceMove: false // only move once
});

tbb.image 是正确的，但按钮没有刷新。

我试图改变 packages/toolbarbutton-jplib/lib/toolbarbutton.js

function setIcon(aOptions) {
  options.image = aOptions.image || aOptions.url;
  getToolbarButtons(function(tbb) {
    tbb.image = options.image;
    tbb.setAttribute("image", options.image); // added line
  }, options.id);
  return options.image;
}

但它似乎并没有刷新...... erik vold lib 是否足以满足这种需求？

Answer 1

有一个setIcon方法和一个image设置器可用于更新工具栏按钮的图像

Answer 2

还请务必使用此修复程序更新https://github.com/voldsoftware/toolbarbutton-jplib/pull/13/files

Answer 3

我遇到了同样的问题，所以我只是使用本教程自己编写了代码：http: //kendsnyder.com/posts/firefox-extensions-add-button-to-nav-bar

试试这个，我重写了我的代码以满足您的需求：

var btn = null;
var btnId = 'My-button';
var btnLabel = 'My menu';
var btnIconOn = 'on.png';
var btnIconOff = 'off.png';

var {Cc, Ci} = require('chrome');
var self = require("sdk/self");
var mediator = Cc['@mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);

// exports.main is called when extension is installed or re-enabled
exports.main = function(options, callbacks) {
    btn = addToolbarButton();
    // do other stuff
};

// exports.onUnload is called when Firefox starts and when the extension is disabled or uninstalled
exports.onUnload = function(reason) {
    removeToolbarButton();
    // do other stuff
};

// add our button
function addToolbarButton() {
    // this document is an XUL document
    var document = mediator.getMostRecentWindow('navigator:browser').document;      
    var navBar = document.getElementById('nav-bar');
    if (!navBar) {
        return;
    }
    var btn = document.createElement('toolbarbutton');  
    btn.setAttribute('id', btnId);
    btn.setAttribute('type', 'button');
    // the toolbarbutton-1 class makes it look like a traditional button
    btn.setAttribute('class', 'toolbarbutton-1');
    // the data.url is relative to the data folder
    btn.setAttribute('image', self.data.url(btnIconOff));
    btn.setAttribute('orient', 'horizontal');
    // this text will be shown when the toolbar is set to text or text and iconss
    btn.setAttribute('label', btnLabel);

    navBar.appendChild(btn);
    return btn;
}

function removeToolbarButton() {
    // this document is an XUL document
    var document = mediator.getMostRecentWindow('navigator:browser').document;      
    var navBar = document.getElementById('nav-bar');
    var btn = document.getElementById(btnId);
    if (navBar && btn) {
        navBar.removeChild(btn);
    }
}

btn.addEventListener('click', function() {
    Tabs.open(Data.url("signin.html"));
}, false);

tbb.setIcon({image:self.data.url(btnIconOn)});