Uncaught Reference Error : $ is not defined?

Question

I am beginner in JavaScript and Html. Currently I am learning to make chrome extensions.

My manifest.json file is like this:

{
    "manifest_version": 2,
    "name": "Hello World",
    "version": "1.0",
    "description": "A Hello world extensions",
    "icons": {
        "128": "128chat.png",
        "48": "48chat.png",
        "16": "16chat.png"
    },
    "browser_action": {
        "default_icon": "16chat.png",
        "default_popup": "popup.html"
    }
}

My popup.html file is :

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>


    <script src="popup.js"></script>
    <script src="jquery-3.5.1.min.js"></script>

</head>

<body>
    <h1 id="greet">Hello</h1>
    <input type="text" id="name">
</body>

</html>

My popup.js file is :

$(function () {
    $('#name').keyup(function () {
        $('#greet').text("hello " + $('#name').val());
    });
});

I am using "jquery-3.5.1.min.js" jquery file in my project.

But while running extension I am getting "Uncaught Reference Error : $ is not defined"

Can you please tell me what is wrong in my code?

The order of the two scripts; if your own uses jQuery's `$` it needs to be below it. — , May 30 '20 at 07:30

score 0 · Accepted Answer · answered May 30 '20 at 07:32

The HTML page is parsed sequentially from beginning to end.

So In your code popup.js file is loading before jquery-3.5.1.min.js.

You should first load jquery-3.5.1.min.js and then popup.js.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <script src="jquery-3.5.1.min.js"></script>
    <script src="popup.js"></script>


</head>


<body>
    <h1 id="greet">Hello</h1>
    <input type="text" id="name">
</body>

</html>

Hope this will help you.

score 0 · Answer 2 · answered May 30 '20 at 07:32

0

<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>

You should declare jQuery script first then your script file

answered May 30 '20 at 07:32

HameedR

43
1
6

Uncaught Reference Error : $ is not defined?

2 Answers2