How do you use Chrome Extensions to change CSS of a web site during month of decemeber?

Question

I would like to change the css styles of a website but only during the month of decemeber how can I do this?

This is the css that I would like to include during the month of decemeber only. How can I do this in content.js or in manifest.json

.Tile-module_tile__UWEHN[data-state=absent] {
    background-color: #b20000  !important;
}

.Key-module_key__kchQI[data-state=absent] {
    background-color: #b20000  !important;
}

.Key-module_key__kchQI[data-state=present] {
    background-color: #f1c232  !important;
}

.Tile-module_tile__UWEHN[data-state=present] {
    background-color: #f1c232  !important;
}

.Key-module_key__kchQI[data-state=correct] {
    background-color: #008000  !important;
}

.Tile-module_tile__UWEHN[data-state=correct] {
    background-color: #008000  !important;
}

Answer 1

To check that the current month is December (months are zero based)... quick test:

if(new Date().getMonth()==11){ alert('It must be december'); } else { alert('some other month'); }

To add CSS to a document...

var S=document.createElement('style');

S.innerText=''; // <-- Place all your Xmas CSS in this string

document.head.appendChild(S); // <-- If this doesn't work for you use the next line instead

// document.getElementsByTagName('head')[0].appendChild(S);

Putting it all together...

if(new Date().getMonth()==11){ // If December proceed...

 var S=document.createElement('style');

 S.innerText=''; // <-- Place all your Xmas CSS from above in this string

 document.head.appendChild(S);

}

NB: Use...

Window_ID.contentWindow.document.

if it's not your website and using a script.