Search code examples
javascriptfirefoxfirefox-addonxul

Changing Firefox extension icon programmatically

I am building a Firefox extension which communicates with a web service. In my extension, I am required to change the extension icon in the toolbar based on the login status of the user. Is there a way for me to programmatically access the toolbar icon and then change the image for the toolbar icon?

Solution

  • Here is what extensions usually do in such scenario

    • If it isn't already, style your toolbar button with CSS.
    • When the state changes, set or remove some attribute on your toolbar button via .setAttribute, e.g. .setAttribute("loggedin", "true"). I recently answered a question about dealing with modifying toolbar buttons no matter if it is visible.
    • Add new CSS rules defining the style of the button (e.g. a new icon) for when that attribute is set an has a specific value usung regular CSS selectors, e.g. #xulschoolhello-hello-world-button[loggedin="true"] { /* another icon */ }