$ is not defined (for some odd reason)

Question

It says "$ is not defined", however, the code works perfectly.

I have been trying to develop an extension, I ran into some issues when linking Jquery's CDN in my file, so I just copied the compressed code of Jquery and created a new file and linked the jquery with my extension that way. In manifest, the popup.js (which gives me an error) is defined as:

"background": {
        "scripts": ["popup.js"]
    },

Here is html:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta hhtp-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ad ბლოკერი</title>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <script src="jqueryCode.js" type="text/javascript"></script>
    <script src="Blacklist.js"></script>
    <script src="popup.js"></script>
</head>

Here is Jquery:

    /*$("#checkbox").prop('checked', true);
    $("#onOroff").text("ON");
    document.getElementById("MyElement").classList.remove('.pauseDiv');*/

    $("#checkbox").prop('checked', true);
    $("#onOroff").text("ON");

    $(".slider").click(function() {
        if( $("#checkbox").is(":checked") ){
            $("#onOroff").text("OFF");
            $(".slider").css({"background-color": "#C75052"});

        } else {
            $("#onOroff").text("ON");
            $(".slider").css({"background-color": "#50c878"});
        }
    }); // Switches it from On and Off
});

For some odd reason, I get an error when I upload the unpacked files to chrome as an extension, yet, it works fine. full error:

Uncaught ReferenceError: $ is not defined Context _generated_background_page.html Stack Trace popup.js:1 (anonymous function)

Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — MattHamer5, Oct 01 '19 at 10:19
Check for your jQuery file and its version like older version not support $ they support jQuery. SO update your code accordingly. — Front End Coder, Oct 01 '19 at 10:20
Where have you included it? It's not in the HTML sample you've shown in the question — Rory McCrossan, Oct 01 '19 at 10:24
@CODER11713, if you don't include the jQuery library in your header as it is in your html $ will always be undefined. Do that and delete this question as it is unnecessary. — Udo E., Oct 01 '19 at 10:33

score 0 · Answer 1 · answered Oct 01 '19 at 10:31

Okay, I guess it was an easy fix :D

For others: I had the script as a background script, which starts when Chrome is loaded. Content script is what is loaded when the page loads. So it seems that the script was running before I opened new tabs when uploaded to chrome://extensions and so that's why it gave me the error.

Switched from "background": "scripts" to "content_scripts":

$ is not defined (for some odd reason)

1 Answers1