即時更改erik vold toolbarbutton圖像

Question

我在嘗試使用SDK製作Firefox擴展程序。 （如果我能避免XUL我很高興）

我使用erik vold toolbarbutton

但我需要動態更改工具欄圖像。

我的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是正確的，但按鈕不被刷新。

我試圖改變包/的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; 
} 

但它似乎並沒有刷新... 是埃裏克vold的LIB足夠的這種需求？

Answer 1

也一定要與此修復程序https://github.com/voldsoftware/toolbarbutton-jplib/pull/13/files

Answer 2

更新有一個setIcon方法和image二傳手，您可以使用更新工具欄按鈕的圖像

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