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