Chrome extension content script.

I am loading Jquery in the content script as following (the jquery file is contained within the extension pacakge):

"content_scripts": [
    {
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["lib/jquery-3.6.0.min.js", "content.js"],
        "run_at": "document_idle"
    }]

I then try to run the following code in the content script (content.js):

    setTimeout(() => {
       $("span").each((el) => {
           console.log("****", $(this).text());
       })
    }, 2000)

Which ends with chrome throwing the following error:

DOMException: Blocked a frame with origin "https://" from accessing a cross-origin frame.

The weird thing is that if I dont use $(this) there is no problem. so for example the following would work fine without errors:

setTimeout(() => {
    $("span").text("asdasdasd");
}, 2000)

What am I missing here? I dont get the reasoning behind this and its driving me mad...