Chrome Extension: Uncaught ReferenceError: $ is not defined-CodePudding

I am creating a Chrome extension but keep getting the error "Uncaught ReferenceError: $ is not defined". I have tried putting JQuery before my actual JS code & also adding content_security_policy. I'm not sure how I can fix this error. Below is my Manifest JSON, JS, and HTML. Any help is appreciated!

{
    "name": "cooking aid",
    "version": "1.0.0",
    "description": "this is a random meal generator",
    "permissions": ["storage", "tabs"],
    "host_permissions": ["https://www.google.com/"],
    "manifest_version": 3,

    "action": {
        "default_icon": "extension logo.png",
        "default_title": "cooking aid",
        "default_popup": "index.html"
      },
      
    "content_scripts": [
        {
          "matches": ["*://*/*"],
          "js": ["https://code.jquery.com/jquery-3.4.1.min.js", "meals.js"],
          "css": ["styles.css"]
        }
      ],

    "content_security_policy":
        "script-src 'self' https://code.jquery.com/jquery-3.4.1.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js; object-src 'self'"  

}

$(function(){
    
    const button = $('.btn');
    const recipeContainer = $('#recipe');

    button.on('click', function(){
        $.ajax({
            url : "https://www.themealdb.com/api/json/v1/1/random.php",
            method : "GET",
            dataType : "json",
        }).done((res) => {
            createMeal(res.meals[0]);
        })
    })

    function createMeal(res){
        
        const ingredients = [];
        for (let i = 1; i <= 20; i  ) {
            if (res[`strIngredient${i}`]) {
                ingredients.push(
                    `${res[`strIngredient${i}`]} - ${res[`strMeasure${i}`]}`
                );
            } else {
                break;
            }
        }

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cooking aid</title>
    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
    <script src="meals.js"></script>
</head>

CodePudding user response：

You can also get Jquery that way, and it should solve your problem:

Get Jquery doing this:

wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

Then in manifest.json:

"content_scripts": [
   {
    "js": ["/path/to/jquery.min.js", ...]
   }
],

Finally html:

<script src="/path/to/jquery.min.js"></script>

CodePudding user response：

try to hard refresh your browser :

windows :

ctrl   shift   R

mac :

command   shift   R