Javascript Question

[giblit]

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

[coder777]

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

[Script Coder]

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?

[S G H]

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}

[Dy7SLyTq]

whats the quote plugin?

[giblit]

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:

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)"

[Dy7SLyTq]

oh well i think that was for firefox. you need a manifest file for chrome addons

[giblit]

Why can't I just use the console of chrome?

[Dy7SLyTq]

because its required by chromes standards

[giblit]

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?

[Dy7SLyTq]

injecting javascript live is different from using an addon

[tntxtnt]

on Firefox you can use Stylish add-on.

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

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

and done.

[S G H]

@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.

[giblit]

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 :)

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

[S G H]

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.

[giblit]

Oh alright thanks again :)

[htirwin]

You could also use jquery.

if ( $(".nick").css( "color") == "#00FF7F" ) 
    $(".nick").css( "color", "#0000FF");

[S G H]

== #00FF7F)
Does that work?
I thought that was why he had a syntax error over...

[htirwin]

== #00FF7F)
Does that work?
I thought that was why he had a syntax error over...

It has to be "#00FF7F", it's a string.

[giblit]

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";