Unable to inject code to the browser from the content.js file

I am trying to make a chrome extension and in the content.js file have written certain code (the codes contained in the content.js file have been pasted below).

When I run the extension it seems that the "links" don't capture any objects and the href has 0 elements.

But when I paste the entire code from content.js to the console of the web page, it works perfectly fine showing me all the desired links. The same had been demonstrated in the picture that has been posted.

https://i.stack.imgur.com/LUK1q.png [link to image]

(The images shows the fact that after I run my extension and check the console, it shows that href is empty and but when I plate the code from the content.js file directly to the console, it shows entirely different results.)

Your help will be highly appreciated.

Thank you.

// start of code  
// javascript code written in the content.js file

[The images shows the fact that after I run my extension and check the console, 
it shows that href is empty and but when I plate the code from the content.js file directly to the console, 
it shows entirely different results.][1]


console.log("chrome extension ready to go");
var className = 'VkhHKd e7EEH nQaZq'; 
var links = document.getElementsByClassName(className), hrefs=[];
//console.log(links);
for (var i = 0; i<links.length; i++)
{   
    hrefs.push(links[i].href);
}
console.log(hrefs);
console.log(links.length);

// end of code