Chrome extension simple script not being injected

Question

I'm trying my first steps in writing a minimal Chrome extension, and I cannot figure out why it does not execute my clientScript.js.

This is my manifest.json:

{
    "name": "Sit back, relax and enjoy",
    "version": "0.1",
    "description": "Finds and clicks the +extra channel points button when it is available",
    "permissions": [ "activeTab" ],
    "content_scripts": [
        {
            "matches": [ "https://twitch.tv/*" ],
            "js": [ "contentScript.js" ],
            "run_at": "document_idle"
        }
    ],
    "manifest_version": 2
}

And this is the the script that I want executed on pages that match https://twitch.tv/*:

let intervalTimer

function sibareaen() {
    const btn = document.querySelector('.tw-button.tw-button--success.tw-interactive')
    if (btn) {
        btn.click()
        console.log('At your service - clicked the button for you!')
    }
}

function toggleSibareaen(on) {
    switch (on) {
        case true:
            intervalTimer = setInterval(sibareaen, 750)
            break
        case false:
            clearInterval(intervalTimer)
            break
        default:
            clearInterval(intervalTimer)
    }
}
console.log('At your service - ready to click for you!')
toggleSibareaen(true)

I have both files in the same folder:

Also, I have properly "installed" the extension:

The console shows no errors related to the extension.

What am I missing?

Answer 1

Assuming you did reload the tab (the content scripts are injected only on initial tab load, see this for more info and a workaround), you're probably a victim of the infamous Google's decision to hide www in the address bar: if you enter the edit mode and select/copy the entire text (or simply double-click the address) you will see the site's URL is actually https://www.twitch.tv/ so your manifest.json has an incorrect URL pattern that doesn't match the real site.

Simply use a generalized pattern like "https://*.twitch.tv/*" that will match both https://www.twitch.tv/ and https://twitch.tv/ and any other subdomain(s).

P.S. as a debugging step, you can check if the content script is even injected by looking at the context selector in devtools console toolbar or in devtools -> Sources -> Content scripts panel. And if you want to restore the classic address bar behavior, see https://superuser.com/a/1498561