'$' is undefined in Chrome extension popup

Question

I'm making my first Chrome extension, and ran into a problem using jQuery in a popup window. When I inspect the popup, I get an error the error: Uncaught ReferenceError: $ is not defined though I include my local copy of jQuery in manifest.json. I am able to console.log within popup.js, but jQuery library apparently doesn't load. I searched related questions, but couldn't identify the problem - please advise

manifest.json

{
    "manifest_version":2,
    "name":"extension",
    "version":"0.1",
    "content_scripts":[
        {
            "matches": [
                "<all_urls>"
            ],
            "js":["jquery-3.1.1.min.js","content.js","popup.js"]
        }],
    "browser_action":{
                "default_icon":"icon.png",
                "default_popup":"popup.html"
            }
        ,
    "background":{
        "scripts":["background.js"]
    }       

}

popup.html

<!DOCTYPE html>
<script src="popup.js"></script>
<div>
Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh">
</div>

popup.js

$(document).ready(function(){
    function d(c){
        console.log(c)
    }
    d('hi')
    $('#bleh').click(function(){d('bi')})
})

I tried loading jQuery into popup.js, but got the same error — I Like, Jan 29 '17 at 02:30
You are loading *popup.js* in both your popup and as a content script. This is usually a Bad Idea™. Scripts, unless specifically written to be in both contexts, should only be in one or the other. — Makyen, Jan 29 '17 at 03:16
*Please* don't load jQuery into **every** page (`content_scripts` with your `matches`) unless you **need** to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle *every single page*. What of those of us who have 100's of tabs open? While It is possible you really *need* to load jQuery, it is more likely that you are doing so for the convenience of saving a couple/few hundred characters in your own code by not using vanilla JavaScript. If that is the case (we have no way to know), doing so is a *very* poor trade-off from your user's point of view. — Makyen, Jan 29 '17 at 03:16

Makyen · Accepted Answer · 2019-12-07T20:41:05.500

1

Your content scripts are in a different context than your popup. What you've loaded via your content_scripts entry in your manifest.json doesn't affect the context of your popup.

You need to load jQuery into you popup. You can do so by adding a <script> tag for it:

popup.html:

<!DOCTYPE html>
<script src="jquery-3.1.1.min.js"></script>
<script src="popup.js"></scrip>
<div>
    Search RT for Movie: <input type="text" value=""><input type="submit" id="bleh">
</div>

edited Dec 07 '19 at 20:41

answered Jan 29 '17 at 03:14

Makyen

31,849
12
86
121

Thank you, I was able to make it work using your suggestions. However, it would only console.log in the popup's `inspect Element` developer window. the normal developer window only logged 'hi'. Do you know why? – I Like Jan 29 '17 at 03:47
There are [multiple different consoles](http://stackoverflow.com/a/38920982/3773011). Which one is used for a specific call to `console.log()` depends on in what scope and context the `console.log()` was executed. I'm not quite sure exactly what you are saying happened. Please be explicit as to which DevTools you are referring to. For instance, which DevTools is the "normal developer window"? – Makyen Jan 29 '17 at 04:01
I meant the Browser Console, thanks I read your previous post on consoles, and think I understand now – I Like Jan 29 '17 at 06:07

'$' is undefined in Chrome extension popup

1 Answers1