1

The error message I am receiving is "$ is not defined"

Part of my manifest file:

     "content_scripts": [
     {
       "matches": ["http://www.google.com/calendar/render*",                                          
       "https://www.google.com/calendar/render/*"],
       "js": ["jquery.min.js", "jquery-ui.js", "script.js"],
       "css": ["jquery.datepick.css", "jquery-ui.css"],
       "run_at": "document_start"
     }],
     "background": {"scripts": ["background.js"]},
     "web_accessible_resources": ["jquery.min.js", "script.js", "jquery-ui.js",  "jquery.datepick.css", "jquery-ui.css"]

In my background.js file I am trying to execute the needed scripts:

chrome.tabs.executeScript(tabId, {file: "jquery.min.js"}, function(){
chrome.tabs.executeScript(tabId, {file: "jquery-ui.js"}, function() {
    chrome.tabs.executeScript(tabId, { file: 'script.js' });
});
});

Still, in script.js I can't use any Jquery function (error: $ is not defined).

Can anyone please explain me why it's failing, or how it should be done?

Thanks in advance.

Tommy Peters
  • 49
  • 8
  • What does your 'script.js' look like? Are both `$` and `jQuery` undefined? – T.S. Mar 13 '14 at 10:26
  • Nothing special, the error is thrown at this line: $(document).mouseup(function (e){ //do some stuff}); – Tommy Peters Mar 13 '14 at 10:28
  • I cannot reproduce the error. I think you're doing it right. I tried $(document).mouseup(function(e){ console.log('Test'); }); in a Chrome extension on Google Calander and, indeed, when I click I see 'Test' in my console. Maybe other extensions are interfering? You could try to call `jQuery.noConflict()` and then in your script.js: `jQuery(document).ready(function($) { ... code using the $-sign ... })` – T.S. Mar 13 '14 at 10:45
  • Thanks for your help T.S. I will try your solution now. To answer your previous question, $ and jQuery are undefined Perhaps it has something to do with jquery.min and jquery-ui being used together? – Tommy Peters Mar 13 '14 at 10:56
  • Don't bother trying, if jQuery is undefined as well, my solution won't work. It really just looks like Chrome cannot find jquery.min.js in your extension folder/package. Are you sure you're including that file? – T.S. Mar 13 '14 at 11:01
  • Okay, that makes sense. I am sure that it is included. – Tommy Peters Mar 13 '14 at 11:04
  • [This solution](http://stackoverflow.com/q/4698118/879266) worked for me, for those still looking – Wolf Jun 21 '14 at 15:26

1 Answers1

0

Your manifest.json and background.js look fine. If you have the jquery-file in the root of your extension folder/package, there are only two things I can think of:

  1. You are unsetting the $-symbol somewhere in script.js

  2. You are not reloading the extension after you made changes:

    Go to chrome://extensions/, find your extension, press 'Reload' (and make sure it's enabled).

    If you are not using the 'Load Unpacked extension' function, you should entirely re-install your extension after you've made changes.

To be very sure that the jQuery file is loaded, open jquery.min.js and add console.log('jQuery file loaded') to jquery.min.js. If you are not seeing the console message, then maybe jquery.min.js is corrupted (try downloading it again).

T.S.
  • 1,242
  • 13
  • 22