JavaScript – Applying CSS file to a page only if certain conditions are met

So… I am in the process of making a Chrome Browser extension as a practice assignment.

Right now, I have made a manifest.json file that contains a part like the following:

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }

]

The intention here is that for all sites opened via the Chrome browser, the content.js will be at work.

Before getting into what I intend to have the content.js as, I have made an index.html (image of it by clicking the 1 here)1

Also, I have made main.css and looks like the following:

html body {
filter: grayscale(70);}

Basically, index.html will be what the “New Tab” will look like. So, on that page, for example, if a user checkmarks “YouTube”, I want the content.js to have something like:
“If the YouTube checkmark is checked AND the website domain matches www.youtube.com, then apply main.css to that website’s page”