Changing the color of a tab on a Firefox extension is a very straight forward task. You can use this code to change the color of all the tabs on a window:

1
2
3
4
5
6
7
8
9
var tabbrowser = window.getBrowser();
for (var i = 0; i < tabbrowser.browsers.length; i++)
{
    tabbrowser.tabContainer.childNodes[i].style.setProperty(
        "background-color",
        "#0f0",
        "important"
    );
}

If you don’t provide the third argument “important” you won’t be able to override the browser default and therefore you wont see your change.

Another thing to keep in mind is that probably the code above will change the color of all the tabs except the current one. This is because the current tab contains also a background image that you have not overridden. This line should do the trick:

1
2
3
4
5
tabbrowser.tabContainer.childNodes[i].style.setProperty(
        "background-image",
        "none",
        "important"
    );

If at any momment you want to remove your styles you can use the removeProperty function:

1
2
3
4
5
6
var tabbrowser = window.getBrowser();
for (var i = 0; i < tabbrowser.browsers.length; i++)
{
    tabbrowser.tabContainer.childNodes[i].style.removeProperty("background-color");
    tabbrowser.tabContainer.childNodes[i].style.removeProperty("background-image");
}
[ firefox_extension  javascript  xul  ]
Publish an extension to firefox directory firefox_extension javascript xul
Attaching event listeners to the current document on Firefox firefox_extension javascript xul
Detecting when a new tab or window is opened on Firefox firefox_extension javascript xul
Using Firefox preferences to store data firefox_extension javascript xul
Adding an icon to the status bar in a Firefox extension firefox_extension javascript xul