I am not sure why my jquery is not loading properly in my content script even though I have the jquery.js file under the resources in the web accessible resources. I keep getting this error: "ReferenceError: $ is not defined". Would appreciate any help, thank you.

manifest.json

{
  "name": "Work Smarter",
  "description": "Work Smarter - Elimanate Distractions, Be Productive",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/16x16.png",
      "32": "/images/32x32.png",
      "48": "/images/48x48.png",
      "128": "/images/128x128.png"
    }
  },
  "icons": {
    "16": "/images/16x16.png",
    "32": "/images/32x32.png",
    "48": "/images/48x48.png",
    "128": "/images/128x128.png"
  },
  "web_accessible_resources": [
    {
      "resources": ["contentscript.css", "images/neverGiveUp.png", "jquery.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "host_permissions": ["http://*/", "https://*/*"]
}