How can I change TAB color

3,492 views
Skip to first unread message

spirit

unread,
Dec 16, 2009, 11:56:40 AM12/16/09
to greasemonkey-users
It is possible to change a color TAB in browser using Greasemonkey and
Firefox? I want to change color when something will be happen (example
something display on page - text, user click link etc).

If someone know how can I do that, please write solution.

Sam

unread,
Dec 16, 2009, 4:50:39 PM12/16/09
to greasemon...@googlegroups.com
I'm not sure about color, probably cannot be done with GM alone, however you can probably change tab text pretty easily.  document.title = '[ '+document.title+' ]' with as many "colors" as you have different symbols to attach.  You could probably accomplish colors with an extension.  


--

You received this message because you are subscribed to the Google Groups "greasemonkey-users" group.
To post to this group, send email to greasemon...@googlegroups.com.
To unsubscribe from this group, send email to greasemonkey-us...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/greasemonkey-users?hl=en.



BD

unread,
Dec 16, 2009, 5:06:41 PM12/16/09
to greasemon...@googlegroups.com
There are some chrome styles you can mess with. They are referenced in your userChrome.css file. So you should be able to inject styles into the document to do the same type of thing. (you'll have to figure out how to do that) Here is an example disk location for the file and some CSS from that file that references the coloring and other properties for tabs.

C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\xxxxxx.default\chrome\userChrome.css

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */

/* Change color of active tab */
tab{
   -moz-appearance: none !important;
}
tab[selected="true"] {
   background-color: #5C0011 !important;
   color: #e8c890 !important;
}
.tab-icon {
  margin: 0px 3px 0px -3px !important;
}
/*
tab[selected="true"] {
   background-color: rgb(222,218,210) !important;
   color: black !important;
}
*/


/* Change color of normal tabs */
tab:not([selected="true"]) {
   background-color: rgb(200,196,188) !important;
   color: gray !important;
}

/* Make the active tab not bold */
tab[selected="true"] {
   font-weight: normal !important;
}

spirit

unread,
Dec 16, 2009, 5:53:06 PM12/16/09
to greasemonkey-users
Sam big thx for solutions, text may be less visible but it is enough
for me.


BD I know about userchrome.css, but i want make condition like this;

var p = document.getElementsByTagName("p")[0].textContent =
"someText";

if (p == "someText"){
colorTAB <<< but HOW? :)
}

I dont know how execute this style using only JavaScript. TAB is
object or what? How can I get him?

Sam

unread,
Dec 16, 2009, 8:07:53 PM12/16/09
to greasemon...@googlegroups.com
You could try adding a rule, for something other than selected or not selected... I  have no idea what other attributes you can access besides selected however

tab[label="Red"] {background-color: rgb(255,0,0) !important;}

might work if you set the tab's title to be "Red" (might get covered by the tab's background image, not sure)

Other than that, I have no clue how you'd do it, plus it would still only work for a particular title, if it worked at all... if this approach could work then you might only detect the first character of the title if there is some way to substr in css, any titles beginning with [ turn red for example while titles beginning with ( turn blue... but I don't know your chances of getting that far.  

What you really want seems like the ability to give a particular tab an additional style class, but your not going to be able to do that from GM, so you need to identify which tab (somehow), I think your best bet for that is "label" but that may not be how its implemented 

spirit

unread,
Dec 17, 2009, 8:06:06 AM12/17/09
to greasemonkey-users
Big thx for both of you, I used title and userChrome.css (lable),
everything work what I want.

BD

unread,
Dec 17, 2009, 9:53:34 AM12/17/09
to greasemon...@googlegroups.com
Can you show us what you did so we know. Thanks.

Johan Sundström

unread,
Dec 17, 2009, 3:00:11 PM12/17/09
to greasemon...@googlegroups.com
On Wed, Dec 16, 2009 at 14:06, BD <bdgg9...@donnelly-house.net> wrote:
> There are some chrome styles you can mess with. They are referenced in your
> userChrome.css file. So you should be able to inject styles into the
> document to do the same type of thing.

Just a confusion-reducing FYI for GM-dev readers that don't already
know: Greasemonkey scripts can not touch user styles for chrome space
(where browser tabs live), only user styles for document content.

--
/ Johan Sundström, http://ecmanaut.blogspot.com/

BD

unread,
Dec 17, 2009, 6:23:35 PM12/17/09
to greasemon...@googlegroups.com
I wondered about that, and didn't try it myself, but the guy claims he did it.

Sam

unread,
Dec 17, 2009, 8:03:41 PM12/17/09
to greasemon...@googlegroups.com
I tried it out.  It does work as expected.  Then I looked up css substring and it turns out its pretty easy to define a set of rules that would make tabs with certain titles always a specific color, this example allows one to colorize based on file extension 

tab[label$=".pdf (application/pdf Object)"] {background-color: rgb(255,0,0) !important;}


I thought that would be cool, to track down those resource intensive tabs!  Reminds me not to press ctrl-t on a PDF... my plugin is not working great anyway.... oddly its even flakier when I mess with this

You could probably pretty easily make your email tab change color based on how many messages you have for lols... 

It reacts instantly to modifications to document.title for easy GM integration I would recommend just tacking a color/symbol onto the end of the title and all you need to do would be define each color in userChrome.css

Then I thought of a performance measuring device for each tab, and make slower tabs fade to red for easy elimination you could train poultry to do it.  

One additional coolness is that you might be able to make a particular tab always stay larger than the rest for some devious monitoring purpose, I think min-width:300px; is a great hack for certain pesky information packed tabs.  Making min-height:200px; gave me another idea....
Reply all
Reply to author
Forward
0 new messages