在chrome扩展的内容脚本中包含Jquery

Question

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.

Answer 1

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).