how to change Font Color- Chrome Extension?

Question

How can i change the font color of a text inside a tag using a chrome extension:

this is how my manifest looks like:

{
 "name":"Change Font Color",
 "description":"Changes font color to red",
 "version":"1",
 "manifest_version":2,
 "content_scripts": [
    {
     "matches": ["http://www.google.com/*","https://www.google.com/*"],
     "js": ["myscript.js"]
    }
   ]
}

JavaScript file:

    window.addEventListener("load", function() {
    var x = document.getElementsByClassName('gb_id gb_ac gb_g');
    x.style.color = 'red';
    });

I am trying to change the font color of a sections on google's mani webpage to red but my code does not work.

Any thoughts?

UPDATE :

I found the solution. There were two issues:
1) I was trying to grab multiple classes with the below line. I should have specified just only one class

    `var x = document.getElementsByClassName('gb_id gb_ac gb_g');`

2) I needed to iterate through the collection on classes! It returns an array:

for (var i =0,len = r.length; i<len;i++)
{
    x[i].style['color']= 'red';
}

I hope this info comes in handy to someone int he future!

Answer 1

Instead of document.getElementsByClassName, use document.querySelectorAll

 var els = document.querySelectorAll('.gb_id.gb_ac.gb_g');
 for(var i = 0; i < els.length; i++) {
   els[i].style.color="red";
 }