This code for a chrome extension is not working, and I have no Idea

Question

I am working on this small chrome extension for the Roblox web page, and for some reason, it doesn't want to work properly at all.

the error is

Uncaught TypeError: Cannot set property 'background' of undefined
at extension_update (themeManager.js:7)
at themeManager.js:14

and this is the code:

var colorOnePath = document.getElementsByClassName("navbar-fixed-top rbx-header");
var colorTwoPath = [document.getElementsByTagName("body"), document.getElementsByClassName("content")];    

var color = ["#008919", "#000000"];

function extension_update() {
    colorOnePath.style.background = color[0];
    colorTwoPath[0].style.background = color[1];
    colorTwoPath[1].style.background = color[1];

    setTimeout(1000, extension_update)
};

extension_update()

I have no idea why the code is set up like this, but anyway, is there a problem anywhere? I couldn't find where to fix. thx!

Answer 1

getElementsByClassName will always return an array-like collection of elements-- even if there is only one. So in your code, instead of setting the style.background property on the first element in the collection, you're attempting to set it on the collect itself -- as the collection has no style property, you get the error you are seeing. Try changing your code to this:

var colorOnePath = document.getElementsByClassName("navbar-fixed-top rbx-header")[0];
var colorTwoPath = [document.getElementsByTagName("body")[0], document.getElementsByClassName("content")[0]];    

var color = ["#008919", "#000000"];

function extension_update() {
    colorOnePath.style.background = color[0];
    colorTwoPath[0].style.background = color[1];
    colorTwoPath[1].style.background = color[1];

    setTimeout(1000, extension_update);
}

extension_update();

(I also took the liberty of adding semi-colons where they were missing and removing them where they were unnecessary).