Javascript Question

Pages: 12
Jan 13, 2014 at 9:00am
I haven't done any javascript but I was wondering if someone could help me with a quick code for making all the usernames on twitch.tv blue in the chat if they are a certain color. I really hate the spring green color ( #00FF7F ) and would like to replace it with a solid blue ( #00000F )

The usernames in the char look something like this:

<a class="nick" href="/xanbot" id="chat-line-982843787" style="color:#0000FF">xanbot</a>

I can change one at a time manually by changing the color there in the inspect element but I would like a short thing I can put in the console that will pretty much be like:

 
if( color == #00FF7F ) color = #0000FF; 


Any help would be greatly appreciated :)
~Giblit
Last edited on Jan 13, 2014 at 9:01am
Jan 13, 2014 at 11:10am
you cannot change html code that's not your own. It's generated on the server side. So pretty much everytime you reload the page your changes are gone
Jan 13, 2014 at 1:12pm
you cannot change html code that's not your own. It's generated on the server side. So pretty much everytime you reload the page your changes are gone

Yes, however can't you have plug-ins that change the html code every time the page loads? Isn't that what Quote plug-in for this site does?
Jan 13, 2014 at 1:24pm
That's possible:
You need to run the code once the page load, and run it again every time the page receives data (averagely complex) or run it in a timer (a bit more expensive).

var x = document.getElementsByClassName('nick');
var y = 0;
while( y < x.length )
{
    var z = x[y];
    // Edit z.style.color now as desired
    ++y;
}


I didn't test it tho, let me know.

And thanks Script Coder for still using my plugin :3
Last edited on Jan 13, 2014 at 10:48pm
Jan 13, 2014 at 6:11pm
closed account (Dy7SLyTq)
whats the quote plugin?
Jan 13, 2014 at 9:08pm
Thanks for the help.
@SGH When I try that it freezes chrome and stops shockwave.

Tell me if I am understanding the code correctly:

x is a variable that is an array of elements from the class type nick (the user nicknames) , y is just an iterator. Variable z is the y element in the array of x then I need to assign the new color

I tried something like this:


1
2
3
4
5
6
7
8
9
var x = document.getElementsByClassName('nick');
var y = 0;
while( y < x.length )
{
    var z = x[y];
    if( z.style.color == #00FF7F )
        z.style.color = #0000FF;
    ++y;
}


but it doesn't seem to work I get an error:

Syntax Error: Unexpected Token ILLEGAL
message: "Unexpected token ILLEGAL"
"SyntaxError: Unexpected token ILLEGAL
    at Object.InjectedScript._evaluateOn (<anonymous>:603:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:562:52)
    at Object.InjectedScript.evaluate (<anonymous>:481:21)"
Jan 13, 2014 at 9:13pm
closed account (Dy7SLyTq)
oh well i think that was for firefox. you need a manifest file for chrome addons
Jan 13, 2014 at 9:23pm
Why can't I just use the console of chrome?
Jan 13, 2014 at 9:26pm
closed account (Dy7SLyTq)
because its required by chromes standards
Jan 13, 2014 at 9:51pm
Since when? I have used the console before for simple things like getting all the links off a website and stuff I don't see why this would be any different can you please explain why?
Jan 13, 2014 at 9:53pm
closed account (Dy7SLyTq)
injecting javascript live is different from using an addon
Jan 13, 2014 at 10:01pm
on Firefox you can use Stylish add-on.

Write new style -> For twitch.tv.... -> Enter:

1
2
3
.nick {
  color: #00f !important;
}


and done.
Jan 13, 2014 at 10:46pm
@tntxtnt: He just wants to substitute colors, not to replace all of them.

You begin all tiny projects like this by the shortest time debug tests.
So, don't waste time re-packing your project each time, follow my advice and we'll get through.

There's a little I forgot to tell you:
1. Colors are stored as strings. As such, differently-formatted colors may not work (rgb vs # vs rgba...).
In my test, rgb(x, y, z) was the pattern.
2. You should use document.defaultView.getComputedStyle

var z = x[y];
var color = document.defaultView.getComputedStyle(z,0).color;
if(color == "rgb(0, 1, 2")
{
    z.style.color = "rgb(1,2,3)"; // override the color using .style.color
}
++y;


And thanks for pointing out the ++y.
Chrome's tabs get stuck if that's forgotten.
Last edited on Jan 13, 2014 at 10:49pm
Jan 13, 2014 at 11:09pm
Cool thanks it works SGH :) Now I just have to put a timer or something It seems like setinterval is what I want


Sweet it works thanks again SGH :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setInterval( function() //set an interval
{
    var x = document.getElementsByClassName('nick'); //create an array of all the nicknames
    var y = 0; //iterator for array
    while( y < x.length ) //loop through all elements of array
    {
        var z = x[y]; //create variable of just one element in array
        var color = document.defaultView.getComputedStyle(z,0).color; //assign a standard for collor
        if( z.style.color == "rgb(0, 255, 127)" ) //if it is spring green
            z.style.color = "rgb(0, 0, 255)"; // override the color using .style.color to blue
        ++y; //increment
    }
} 
, 1000 ); //set timer of 1 second 


I always hated that bright green color makes my eyes bleed when ever I saw people with that as their name :P
Here is how annoying the color is:
http://24.media.tumblr.com/32be950b6de5b4910a31f4ca69a575b3/tumblr_myu189BNF21rxg09jo1_1280.png
Last edited on Jan 13, 2014 at 11:18pm
Jan 14, 2014 at 12:52am
Careful, on line 9 i used "color" instead of "z.style.color".
It may not work anymore later in time, if they use a CSS file for colors.
Jan 14, 2014 at 1:31am
Oh alright thanks again :)
Jan 14, 2014 at 1:45am
You could also use jquery.

1
2
if ( $(".nick").css( "color") == "#00FF7F" ) 
    $(".nick").css( "color", "#0000FF");
Last edited on Jan 14, 2014 at 1:46am
Jan 14, 2014 at 1:49am
== #00FF7F)
Does that work?
I thought that was why he had a syntax error over...
Jan 14, 2014 at 1:59am
== #00FF7F)
Does that work?
I thought that was why he had a syntax error over...

It has to be "#00FF7F", it's a string.
Jan 14, 2014 at 2:02am
I think the syntax error was I didn't realize they were strings instead of integers and I didn't know jquery was a thing you could use on the chrome console thanks for the second option :)

Ah yeah it was I just didn't have the quotes :P This works also:

 
z.style.color = "#0000FF";
Pages: 12