Chrome extension "$ is not defined" error

Question

I am getting an error "$ is not defined" when I am working on my chrome extension.

This is my manifest file:

   {
      "name": "X",
      "description": "Snip this page",
      "version": "2.0",
      "permissions": [
        "activeTab"
      ],
      "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
      "content_scripts":[{
        "matches" : ["<all_urls>"],
        "js": ["jquery-2.0.2.js","jquery.Jcrop.js"],
        "css": ["jquery.Jcrop.min.css"]
      }],
      "browser_action": {
        "default_title": "Snip this page"
      },
      "manifest_version": 2
    }

This is my background.js file:

chrome.browserAction.onClicked.addListener(function(tab){
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    file: 'content.js'
  });
});

Lastly, the file where the error is triggered: content.js

console.log('1');
var jcropapi, boundx, boundy;
$('body').attr('id', 'target');
$(document).ready(function(){
    $('target').Jcrop();
    console.log('4');
    document.onkeydown = function(){
        if(window.event.keyCode==13){
            console.log('enter');
        }
    };
});

From my understanding, this happends because JQuery does not get loaded. However, I am loading it properly in the manifest, and jquery.js is also the first file that gets called in the manifest content script. Please help me in debugging. Thank You!

score 24 · Answer 1 · answered Oct 30 '14 at 08:08

This happens when the script that calls for jQuery loads prior to jQuery.js loading. In the example given by the question submitter, the background loads prior to the content script, and the content script loads jQuery itself after the background script calls for jQuery. This example can be fixed by having the background script load jQuery itself, like so:

 "background": {
    "scripts": ["jquery-2.0.2.js", "jquery.Jcrop.js", "background.js"],
    "persistent": false
  },

Keep in mind also that js files listed in the manifest are loaded in the order they appear. For example, let's say that you have a file, "script.js", that contains:

console.log($('#elementID'));

If you write your manifest like this (WRONG), you'll get the error "$ is not defined":

"content_scripts": [
    {
        "js": [ 
            "script.js",
            "jquery.js" ]
    } 
]

Changing the manifest to this (RIGHT) will fix the error:

"content_scripts": [
    {
        "js": [ 
            "jquery.js",
            "script.js" ]
    } 
]

Note that "jquery.js" now precedes "script.js" and is therefore loaded first.

The problem can be seem intermittent because both scripts are loaded almost at the same time. If you change the script so that the call to jQuery is below some other javascript commands, the time it takes for those other commands to execute may be just enough time for jQuery.js to finish loading. So for example, if you wrote the manifest the wrong way above, you could also technically fix the error by changing the script.js file like so:

var t = setTimeout(function(){
     console.log($('#elementID'));
}, 1000);

The 1 second delay gives jQuery.js enough time to load, however, this is obviously not the ideal solution!

score 2 · Answer 2 · edited Sep 03 '20 at 10:03

This is happening because you are calling your script before the jQuery file.
The right one is this:

{
  "name": "X",
  "description": "Snip this page",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts":[{
    "matches" : ["<all_urls>"],
    "js": ["jquery-2.0.2.js","yourscript.js"],
    "css": ["jquery.Jcrop.min.css"]
  }],
  "browser_action": {
    "default_title": "Snip this page"
  },
  "manifest_version": 2
}

score 0 · Accepted Answer · answered Oct 05 '13 at 17:42

0

I have no idea how it works, but somehow, when I changed JQuery to its minimized version and it works now.

answered Oct 05 '13 at 17:42

chaitanya.varanasi

960
1
9
26

2

I guess that you didn't reload your extension after adding jQuery in your manifest file. Content scripts are automatically reloaded. Changes to manifest.json only become effective after reloading your Chrome extension. – Rob W Oct 05 '13 at 18:10
did you ever solve this problem? I'm having a similar issue, sometimes the extension works, other times it fails to load jquery.min.js – omer schleifer May 01 '14 at 14:27
hey sorry for the late message but yes i did solve it. – chaitanya.varanasi May 17 '14 at 05:52
try putting jquery at the beginning of the file – chaitanya.varanasi May 17 '14 at 05:52

score -3 · Answer 4 · answered Oct 05 '13 at 16:26

-3

There's a conflict somewhere. Resolve it by replacing all instances of $ with jQuery.

answered Oct 05 '13 at 16:26

musical_coder

3,886
3
15
18

not much difference. I get the error: " jQuery is not defined " – chaitanya.varanasi Oct 05 '13 at 16:29
the file: content.js gets called because i see '1' in the chrome console – chaitanya.varanasi Oct 05 '13 at 16:30
"'1' in the Chrome console"- do you mean one error message? Are you absolutely sure that jquery.js is getting loaded? I've never had an issue with substituting `jQuery` for `$` (at least with jQuery 1.7). – musical_coder Oct 05 '13 at 16:33
the '1' is for the purpose of debugging that is all. Thats how i know content.js gets loaded – chaitanya.varanasi Oct 05 '13 at 20:07

Chrome extension "$ is not defined" error

4 Answers4

Linked

Related