I've gone down the StackOverflow rabbit hole and similar questions I found either don't work or seem unsafe, so here's one more.

My goal

I want to create a Google Chrome extension that works with Gmail. When someone composes a new email, it adds a little checkbox to the email builder. When someone checks this box, I just want to console log "checked". It looks like this

Methodology and problem

The easiest way to do this is just to create an attribute for "onchange" and call a function. Like this:

mauticCheckbox.setAttribute('onchange', 'test()')

But this runs into an error: "Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-isArkHmhi5JlS1U0S0z2uA' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'"."

I read on other similar questions that you can disable the 'unsafe-inline', but that it's less secure. This might can be a last resort but I'd rather not do this.

So I keep researching and the other way to do this seems to be to add the JavaScript in the head tag. I don't have an HTML file for my code since I'm adding to the Gmail compose window, so my code was something like this:

window.onload=function() {
    addJavaScriptHead()
}

function addJavaScriptHead() {
    let head = document.getElementsByTagName('head')[0];
    let script = document.createElement('script');
    script.type = 'module';
    script.onload = function() {
        listenForClick(); // My function from background.js
    }
    script.src = 'background.js';
    head.appendChild(script);
}

But alas, this runs into a similar (yet different) error message: "Refused to load the script 'https://mail.google.com/mail/u/0/background.js' because it violates the following Content Security Policy directive: "script-src 'self'"."

How can I call a function when this element is changed from not clicked to clicked and vice versa?

Thanks in advance :)