Chrome Extension – Jquery not loading

I am trying to run JQuery on the chrome extension I built. I am getting the following errors when I load the extension. Uncaught ReferenceError: $ is not defined and Refused to load the script ‘https://code.jquery.com/jquery-3.5.1.min.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem:”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

So currently I have a thirdParty folder with jQuery-3.5.1.js file

This is how manifest.json looks:

    "manifest_version" : 2,
    "name" : "Calculator",
    "version" : "1.0",
    "description" : "Calculate Anywhere",
    "icons" : {
        "128" : "img/icons128.png",
        "48" : "img/icons48.png",
        "16" : "img/icons16.png"
    },
    "background":
    {
        "scripts": ["thirdParty/jquery-3.5.1.min.js", "background.js"]
    },
    "browser_action" : {
        "default_icon" : "img/icons16.png",
        "default_popup" : "popup.html"
    }
}

this is my backround.js

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-3.5.1.min.js'
    });
    chrome.tabs.executeScript({
        file: 'popup.js'
    });
});

popup.js has the main JS and Jquery code for my extension.
Furhtermore I have a script tag to call jquery script in my popup.html which looks like this

    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Can someone please tell me what I am missing in the code!!