Utilizing Materialize library in chrome extension

I'm having issues utilizing the materialize library within my chrome extension to display a custom modal when a button is clicked. I've already written code (in my content script) to inject a button to the existing web page. In my dialog.html, I have the HTML for my modal (using this template from materialize-css). Now, I'm trying to call $('.modal').modal('open'); inside a function that is called when the button is clicked (I've verified that the onclick is working fine, since console.log() works inside of this function.

However, when I try to run $('.modal').modal('open');, I get this error: Uncaught TypeError: $(...).modal is not a function. (I've also tried running $('.modal').modal(); and the other implementations I found on stackoverflow, but to no avail.

My manifest.json looks like:

{
    "manifest_version": 2,
    "name": "MyChromeExtension",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": ["*://www.messenger.com/*"],
            "css": ["/thirdParty/materialize.css"],
            "js": ["/thirdParty/jquery.min.js","/thirdParty/materialize.js", "content-final.js"]

        }
    ],
    "web_accessible_resources": ["/thirdParty/bootstrap.min.css", "/thirdParty/jquery.min.js", "/thirdParty/bootstrap.min.js", "dialog.html", "/thirdParty/materialize.css", "/thirdParty/materialize.js"],
    "permissions": ["tabs", "<all_urls>"],
    
    "background": {
        "scripts":["background.js"]
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"

}

I've saved local copies of my jquery, bootstrap, and materialize files inside my folder thirdParty, but for some reason my code doesn't work. I've also tried installing all of these frameworks via npm and using browserify to combine them into my content-final.js, but this doesn't work either.

Does anyone know why this might be happening?