ChromaTabs Plus
What Is It?
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.
Install
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.
Release Notes
- 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
Version 2.2 adds a transparent Close Tab button
- 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.
Thank You
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.
function BlogBy('Gary Calpo') { 
Thanks for updating this excellent extension! I’m delighted to see it.
Unfortunately, while your fix works on Linux, it does not properly render colored tabs under OS X. I suspect that this is because under OS X, tabs hang down from the top of the tab bar rather than coming up from below, and are differently shaped; in addition, the color on the selected tab renders behind the tab itself, rather than in front, which spoils the effect.
I’d be happy to provide screenshots if desired, or whatever other debug output would be helpful.
Thanks again!
I’m so grateful that you took the time to make this after the original was dropped.
What would really make my day though is if you could do what you did with the border of the tab bar so that it works with Tree Style Tab, with the tabs on the side.
Hi,
I was desperately waiting for this extension to come up for FF3 so thanks a tone.
Found a little problem though. After restarting firefox, the color only appears on the active tab.rest of the tabs are plain. but as soon as you bring the mouse over the other tabs, the color appears.
Might wanna fix this in the next build
Thanx again for the extension
I made these two changes to “getHostnameForTab”:
var matches = /^(.*\.)?(.+\..+)$/.exec(host);
if (matches) { host = matches[2]; }
—
This way tab colors are not specific to a full url, just the top 2 levels.
Keeps domains like “w3.google.com” / “maps.google.com” / “google.com” from being distinguished separately and giving different tab colors.
—
Maybe you could make a variable for this and make this a preference in the options? — I definitely prefer it.
Looks ridiculous on Linux Feodra 9. Would love to see this full fledged support for linux.
Great work. I found a bug or more exactly an inconsistency, if you select colors by favicon and there is no favicon, you get a colorless tab maybe in that case it should default to the hashed color selection instead, so all that tabs are colored.
Thanks again!
Hi!
Very nice add on.
I think I posted a review on the Mozilla site, but it doesn’t appear to have come.
A few bugs:
1. If you close a tab using Ctrl+w, the foreground colour doesn’t come. It’s still the background colour.
2. If you hover over the “x” button to close the tab, the border is of the default colour, not that of the tab. It looks very out-of-place and awkward.
Otherwise great!
I’ll keep posting any bug I find.
Keep it up!
I liked it, Thanks for your efforts! keep the good work up bro.
Hi
I installed Chromatabs to Firefox 3.0.3
BUT it does not display colored tabs
I am using the HMMXP theme – is that the problem? Is Chromatab incompatible with that theme?
I have the same problem with Colorfultabs, by the way
Gary L. Jackson, PhD
I too also appreciate you updating this extension, like you, I also started using ColorFull tabs which is great, but I missed the child tabs not being colored the same as its parent tab.
I was hoping that Justin was going to update this, and looked again if it had been, and viola your modernization came up!
Thanks for updating this wonderful extension!
Woo-hoo!
Hello!
This is one of my favorites… BUT since updating to Firefox 3.x it dos not work with my Vista-Aero-Theme. I was using the same theme with Firefox 2.x and had no problem with Chroma Tabs 2.0.
Will this be repaired in the future, or should I uninstall. I am very used to this add-on!
Thank you for all your efforts!
Hi!
Without having installed your add-on, I very much miss the option to right-click on a tab and assign it a specific color. I personally don’t need or want all tabs colored, but want to have the option to mark some few tabs in a browser-window as ‘important’. – Finally smth similiar to attaching a flag to a page in a book or document.
Could you implement smth like that?
Greets, Jan.
Hi,
I just tried to install your add-on and I get the following error –
Invalid file hash (possible download corruption)
-261
Any idea what that means?
I then downloaded the file from your mirror but then couldn’t workout what to do with it. :-0
Cheers,
james.
Hi! Thanks for this add-on. Its great!!!
What I wanted to know is if its possible to make the color appear in the newly opened tabs, before hovering over them ???
For example, enter a site, then right click 3 Links (open link in new tab) in the page so you have 4 tabs of the same site If you look at the tabs, the foreground tab has color, but the other 3 don’t. You need to hover over the tabs to make the color appear.
Or open 3 tabs in 3 different sites, so you have 9 tabs with 3 different colors. Now restart firefox or save & quit and open it again. You’ll see no tab has color until hovered over.
Like the idea of this extension, and it certainly does function as described.
However, it would be really useful to be able to customise the colour by domain so that when working on development projects, the Dev site could be colour A, the UAT site colour B and live colour C.
Nice extension, very useful.
Feedback:
1. Add reset/default values button in Options.
2. it is little slow, would be nice if you could optimize it.
3. How about splitting up inactive and active tab settings:
Generated Color for Inactive and
Generated Color for Active.
4. Live preview of option change.
5. In Options window, explanation of what all the settings do.
That’s about it, for now.
I hope for improvements in the future.
And thanks for updating it to work in Firefox 3.
First of all: Thank you for your great ChromaTabs Plus extension!
Anyway, there’s a little bug that’s annoying me: I have set the foreground tab opacity to 100% because it was hard for me to recognize the active tab with default settings. But when I close the active tab the new active tab is not repainted so I still can’t find it instantly. It is only repainted after I hover. I’m using Firefox 3.0.10. I also have the TabMixPlus extension installed. Are these two extensions maybe not compatible (anymore)?
Thanks for your support!
Hi, the extension is awesome!
But it needs an upgrade for Firefox 3.5 .
Simply it works after I modified install.rdf in the extension and changed version range. I don’t know other issues, so the update could be simply change the version numbers.
Thank you for your great job.
Glad to see the update for FF 3.5. I love the effect of coloring based on the icon, which effectively groups similar pages.
I have a few suggestions.
The selected tab needs to stand out from the unselected tabs. The most visible distinction is the close box, but that is not quite enough. Bold text and outset border also help, but the background color dominates. Selecting a less saturated background color also helps. I suggest varying the saturation.
In FF 3.5, I am not seeing any change of color based on configuration options. Do I have to restart?
This is good, but when we close the tab the next highlighting tab is not automatically brightening its colour. Also, it would be nice if we can somhow see the tabs in groups etc.
Thanks for maintaining ChromaTabs Plus!
I noticed a strange incompatibility between ChromaTabs and the “Walnut” theme. In a browser tab if you hover over the Close [X] (graphical icon to close the tab)… what you should see is that same [X] but maybe a different color, indicating a mouse-over.
But instead, the [X] gets replaced with a long graphic strip showing *all* the possible icons that could be used in this context… it makes the tab stretch vertically almost the full height of the browser itself (I’m using TreeStyleTabs with the tabs located on the left). Kind of difficult to describe, but I hope you get the gist. It only happens on a mouse-over.
I think Walnut may have replaced the icons with its own set, and when ChromaTabs tries to access url(“chrome://chromatabs/skin/close_clear.png”); -moz-image-region: rect(0px, 14px, 0px, 14px), it can’t fetch the appropriate icon. That’s my guess… I haven’t taken the time to investigate.
To fix, I went into /skins/chromatab.css and commented out the style elements for .tab-close-button:hover and .tab-close-button:hover:active and that seems to have done the trick.
Anyway, love the Extension. Cheers!
thank you for chromatabs plus.
i have one question though:
* FIXED: New tabs are not colored immediately after using “Open link in new tab”
— this was not a bug to me, but a feature, a marker of unread tabs. when i tried ff 3.5 and saw the different behaviour, i started searching all the options of all the tab-related addons i use for a way to change it back. just now i found out that it is this *bugfix*.
any chance you could make the instant colouring of new tabs optional? for now i pimped chromatabs plus 2.1 to work with ff 3.5 because i would like to keep the bug / feature i found very useful
Kill the transparent close tab button. The tab button is red to show which tab is current. Shading doesn’t always do that and your routine is very slow when there are many tabs.
Like using this plugin and I do find it useful, but I would love it if a particular feature were added. It would be fantastic if I could specify the colour of tabs for specific domains. As I work on several web apps and on both live and dev environments, being able to colour code the tabs would make life a whole lot easier. e.g:
http://www.domain1.com – #ff0000
dev.domain1.com – #00ff00
http://www.domain2.com – #00ffff
dev.domain2.com – #0000ff
Hope it’s not something that’s too difficult to develop and you could squeeze it into the next release.
Here’s hoping
figgs
Great add on, very helping. I usually have many tabs, this color tabs makes it easier to see, makes comfort.
Great Idea, Great Jobs, Thanks
Will this (be made to) play well with TooManyTabs? 🙂
and by TooManyTabs I meant TabKit
ooops
I like the Chroma Tabs Plus– any idea when it will work on FF 3.6 ?
great extension.
what about Firefox 3.6 support?
Update for FF 3.6?
Does not work with firefox 3.6 uups…
Please update for FireFfox 3.6
please update for 3.6.
Why it is listed as Windows-only https://addons.mozilla.org/en-US/firefox/addon/8004 ?
I installed it manually on Firefox 3.6 under Linux and it works great.
It would be better if Linux users could install it without hassle.
Anyway, thanks for this great add-on.
This was an oversight on my part. It should be corrected soon.
What were the old color settings for pre-2.3? I actually liked the colors from then. After updating they now appear darker probably because of the new opacity/luminosity/saturation settings, but I can’t seem to figure out what numbers to use to get the old behavior back.
Based on the default values from 2.2, I came up with these settings:
Maximum Saturation: 90% (for all)
Minimum Luminance and Maximum Luminance: 55% (for all)
Opacity for Current Tab: 67%
Opacity for Other Tabs: 33%
Opacity for When Hovering: 33%
Hope this helps.
Hi Gary,
Thanks for the info. I was actually able to revert to 2.2 and find this as well, but things still don’t look quite the same, and I think it’s because 2.3 generates a new colors list. So I think I’ll just stick with the colors I’m used to on 2.2 for now.
Thanks.
(my previous comment was purged of HTML tags, silly me)
Gary,
I’m a web developer with a request. It is my understanding that Firefox extensions can access web page content, thus it should theoretically be possible for your extension to see a meta tag.
My request is (feel free to modify as you see appropriate) allow web pages to set a custom tab color/image (faded, perhaps, so web pages can’t mess up the chrome interface with blinding colors) using something like:
<meta name=”-ctp-color” content=”#336699″ />
and/or
<meta name=”-ctp-image” content=”http://example.com/tabimage.png” />
Let me know what you think.
First of all: I love it! Good job!
Small drawback:
it’s considerably slow switching tabs when this extension is installed. The tab itself gets active and then it’s a often about as much as 1 second the changed color and displayed URL follows.
Maybe you could look into it or discuss that with some speed-improvement-experts at mozillazine forums?
Hi Gary. This is without a doubt one of my top firefox addons. The new settings in 2.3 are great. Thanks!
i liked your addon very much….i would be grateful if u could tell me how to pick the icon colour to be displayed in the tab
I am using Minefield and wanted to let you know that your plugin seems to be broken with the recent changes made to tabs.
Tabs are not colored at time of creation/open or refresh, but do seem to become colored after mouse over or selection.
Is there any plans for a fix for this?
One of the first plugins that everyone should install!
Tab Mix Plus allows to set a permanent color scheme for the active tab. I find this very beneficial because you begin to notice the active tab instantly. Unfortunately Chroma Tabs will override the Tab Mix Plus setting. Please allow Chroma Tabs to not override this setting or incorporate a similar setting in Chroma Tabs.
Thanks for your time.
Hello,
A new user of ChromaTabs and very very grateful 🙂 Thank you
I’m using it with Tab Mix Plus with no problem.
Just one thing I’d want you to know (maybe a little bug) it’s that sometimes the tab still uncolored until mouse hovering or activation (or the tab) : for exemple, when there is more than 1 “home page” (2 tabs in my case), then the first is colored but not the other, It IS just when I hover or activate it.
Bye
Hi,
I’m using ChromaTabs Plus on Ubuntu 10.04 and it works great! All my tabs have a nice color.
One thing that’s annoying me, is that the bordercolor of the tabs is the same as the tabcolor. Is it possible to change the border color for the normal and active tabs?
This different border color should make the tabs stand out more.
Mondane
I use ChromaTabs along with TreeStyleTab on Firefox 3.6 and it is a great combination. As Firefox is moving towards version 4.0 I wondered if there a chance for an update to the new versions (3.7/4.0)?
Thanks for the great work!
Cheers for the add-on.
It works pretty well under Firefox 4.0b1, with a few minor niggles.
The tab colouring extends slightly over the new tab shapes, and colours don’t seem to get applied until you switch to the tab or hover over it.
Hope thats useful feedback – thanks again!
Hi,
The last update of your addon was 1,5 year ago. It doesn’t work now with the Firefox 4 betas :< Will you be fixing this?
Refresh
Hi, Windows 7 64bit Firefox 4 beta user. After installing a compatibility Mod, Minor glitches happen. Colour Picked only on Mouse Over. Slight extention of the Tab.
Any change you’ll be updating this for Firefox 4? Just wondering. Thanks!