ColorfulTabs – Custom Colors For Individual Firefox Tabs

Goal:  Color Firefox tabs individually on the fly (without having to use userChrome.css).

The reason this feature is useful to me is because I often work with many tabs at a time (15+) and being able to color certain tabs makes it easier for me to tell them apart.  For instance I would use a certain color for a specific category of tabs I was working.  This just allows me to switch between the tabs faster and I’m able to be more productive.

I tried out several different addons but most of them just automatically colored every single one of my tabs.  I eventually came across an addon called ColorfulTabs (you can download their latest version at the addon website HERE).  I found it odd that the description on both the Firefox addon page and on the addon homepage didn’t give a solid feature list but one is included in the “Plugin Installed” page after the addon is installed and the browser is restarted.  You can view this page prior to installing the addon HERE.

This addon gave me the ability I was looking for but it also automatically colored all of my tabs.  On the completed install page in the right sidebar I saw another addon entitled “ColorfulTabs Plus” so I installed it in hopes of  the plus version having the ability to only color individual tabs.  To my surprise this “Plus” version is actually just a previous version of the ColorfulTabs addon.  However, in the addons option page under “Coloring Scheme” there was a new option titled “Color On Demand (No Color By Default, Right Click Tab And Set Color Manually)”.

At this point I decided to just use this older version of the addon but when I went to change the color of a tab there was no ColorfulTabs option in the tabs context menu.  In order to fix the issue I decided to compare the code of the two addon versions.  What I found was that the functionality of the of the Color On Demand option was still in the updated addons code (located in clrtabs.js) but the code for the option in the user interface was removed from clrtabsopt.xul.  To fix this issue I simply needed to add the option back into the clrtabsopt.xul file of the updated addon.

Here’s how you can update the addon yourself:
1a. If you have the updated addon already installed type “about:support” into the Firefox navigation bar and hit enter.
Under “Extensions” look for “ColorfulTabs” and take note of the addons ID.
Go to your extensions folder in your Firefox profile folder located at C:\Users\[User]\AppData\Roaming\Mozilla\Firefox\Profiles\[Your Profile]\extensions and find the file that has the ID you just looked up.

1b. If you don’t have the latest version then you can either update to the latest version now or you can save the .xpi addon file to your desktop and edit the files prior to installing/updating the addon (by right clicking on the download link and choosing “Save Link As…”). Make sure you add .xpi to the end of the file name.

2. Once you’ve found the file open it with your program of choice for working with zip files (I use 7-Zip).
3. Click on chrome.
4. Click on content.
5. Open clrtabsopt.xul from WITHIN the zip program.
6. Add the following code at line 46 (for version 10.1) after the last {html}{/html}

[crayon start-line=”46″ lang=”html” title=”clrtabsopt.xul”]

[/crayon]

7. Save the file and close out of your zip program.
8a. If you were doing this while your browser was open then just restart the browser and you can enable the option in the ColorfulTabs option page.
8b. Simply drag and drop your edited .xpi file into the Firefox browser window and you’re all set!

Note: I am using ColorfulTabs along with the TreeStyleTab (for a vertical tab bar) addon and I’ve never viewed the colored tabs with the default horizontal tab bar setup. With that being said I don’t particularly like the way the colored tabs look with the TreeStyleTab theme that I’m using but the addon serves it purpose.