ChromaTabs Plus makes tabs more readily identifiable by tinting each tab a different color depending on the website loaded. Colors can be chosen at random or automatically matched to the site’s favicon.
Read this Mozilla Labs blog post for a more thorough discussion on the merits of colored tabs.
ChromaTabs Plus is an updated version of ChromaTabs 2.0 by Justin Dolske.
A Brief History
After the release of Firefox 3.0 in 2008, I had hoped that ChromaTabs would be brought over. It wasn’t. The original author had dropped support “due to differences in the way tabs are rendered.” Fortunately, I was able to use code from Colorful Tabs which did work in Firefox 3. Successive updates have followed major Firefox releases for compatibility and additional features.
Version 3.0.0 is in beta and adds support for Firefox 4.
What’s New in Version 2.3
The colored tabs mix well with the new Personas feature of Firefox 3.6. After tweaking some settings, tab coloring and your favorite Personas skins can coexist happily.
Some usability issues were also addressed. For example, when you changed settings in previous versions, the tabs still looked the same until you passed your mouse over them or restarted Firefox. Now, it repaints all tabs using the new settings immediately after hitting OK.
When keeping score of which color is the most common for the “”Most Frequent Color” mode, I wrote in a bit of flexibility so an icon that’s 30% “deep blue”, 30% “not so deep blue”, and 40% green would result in a blue colored tab. In the previous version, it would have been green. Google’s icon was a prime culprit of this.
In version 2.3, “Use most frequent color” has become the default coloring method. In practice, I’ve found the tabs visually pop out better compared to the original “take the average” method.The Options window has expanded with more ways to customize tab colors.
- “Primary Tab Color” is a carry over from the previous version.
- “If this site icon has no color…” lets you choose whether sites with no icon get random colors or no colors at all.
- “When picking a color based on site name…” lets you specify if sites like mail.google.com and docs.google.com should share the same color because they’re both part of google.com, or if they should have different colors.
- “Customize Tab Colors” lets you customize tab colors in more ways than previous versions. A common complaint was being able to discern the active tab from the other tabs. In previous versions, the opacity was the only thing that you could change to differentiate between active and inactive tabs. But now, you can set the active tab apart from the background tabs by using opacity, saturation, and luminosity. To put it simply, background tabs can now be significantly darker or duller than the active tab. On top of all this, you can specify separate settings for tabs that you hover over.
- “Tab Close Buttons” configures the close button that appears on the right of each tab. In 2.2, I introduced a clear alternative (literally) which received mixed reactions. This setting lets you fall back to the default button provided by your Firefox theme.
- 3.0.0 beta 1 – Released November 28, 2010
- Works with Firefox 4.x only.
- Removed choice of solid or clear “close tab” buttons. Now reverts to the Firefox default which is clear in FF4.
- To integerate better with different Firefox 4 themes, the tab backgrounds can now be solid, transparent, or anywhere in between.
- 2.3.0 – Released January 30, 2009
- Last version to work with Firefox 3.6
- Works with Firefox 3.6
- Added tolerance when calculating “most frequent” color. For example, the Google icon should now be green instead of grey.
- Separate opacity/saturation/luminosity values for selected tab, unselected tab, active tab (on mouseover)
- Added option to do nothing if a site icon is missing. The alternative would be to pick a color unique to the site’s domain name.
- When coloring based on domain name, offer the option for different subdomains to share the same tab color.
- FIXED: “color is null” error message
- FIXED: No longer need to restart browser (and clear session) or hover over all tabs for new appearance settings to take effect.
- 2.2.0 – Released June 29, 2009
- Works with Firefox 3.5
- Option to use most frequent color in the tab icon to color a tab. This typically leads to richer, bolder, less washed-out tab colors than taking the avarege.
- Transparent Close Tab button
- Colors the vertical splitter for users of Tree Style Tab
- 2.1.0 – Initial Release. Release July 4, 2008
- Works with Firefox 3!
- New feature: colors the bottom border of the tab bar to match the selected tab’s color. Credit goes to ColorfulTabs extension for the original implementation of the aforementioned features.
Credit where credit is due:
- Justin Dolske for creating the original ChromaTabs extension. Colorizing is useful, but the favicon-matching feature is the real icing on the cake.
- The original 2.1 update wouldn’t have happened if I hadn’t stumbled upon the Colorful Tabs extension for Firefox 3.
- This guide on Lifehacker helped streamline my development process.
If You Like ChromaTabs Plus
You may also like the following tab extensions.
- HashColouredTabs. For any site that’s missing a favicon, it generates a simple colored square with a different color for each site. HIGHLY RECOMMENDED!
- Tab Mix Plus. Great feature set for customizing tab appearance and behavior
- Tab Preview. View a thumbnail of the page under a tab when you mouse over it.
- Tree Style Tab. Tabs group together like a tree. Although it works best when the tab bar is moved to the side of the window, it is still usable with the tab bar in its normal location at the top. Side note:This is a newer extension from the author of the now-abandoned Tab Browser Extensions (TBE). I still miss the ability to color tabs as a group. For example: If I was browsing Reddit, then clicked a link to open a tab, Reddit’s tab and the new tab would both change to the same color. Subsequent tabs opened via Reddit or this new tab would take on the same color.