Not able to add jquery file to chrome extension

Question

I am trying to add Jquery to my chrome extension ,

here is my manifest.json

  {
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
 "background":{
    "scripts":["background.js"]
},

   "js": ["js/jquery-1.10.2.min.js"]


"browser_action": {
"default_title": "Object Spy"
},


"permissions":["tabs","<all_urls>"],

 "web_accessible_resources": [
   "img/bt.png"
   "js/jquery-1.10.2.min.js"
 ]

}

Problem is it is giving ,

   Uncaught ReferenceError: $ is not defined

Try this: http://stackoverflow.com/questions/4947510/load-jquery-into-a-chrome-extension — Falaque, Dec 19 '13 at 05:44

gthacoder · Answer 1 · 2013-12-19T07:35:12.690

Apparently, your extension uses primarily background page and that is the place where you need jQuery. In this case, you can simply add jQuery JavaScript file in the list of background scripts:

{
  "name": "OSpy",
  "description": "",
  "version": "1",
  "manifest_version": 2,
  "background":{
    "scripts":["js/jquery-1.10.2.min.js", "background.js"]
  },
  "browser_action": {
    "default_title": "Object Spy"
  },
  "permissions":["tabs","<all_urls>"]
}

REMEMBER TO PUT JQUERY SCRIPT BEFORE YOUR ACTUAL BACKGROUND SCRIPT!

Here's a simple example. Let's say you have an extension that makes Ajax request from its background page to its local html file and print the response to the console.

manifest.json:

{
  "name": "Local Request",
  "description": "Send Ajax request using jQuery",
  "version": "2.0",
  "background": {
    "scripts": ["js/jquery-1.10.2.min.js", "background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Send Request"
  },
  "manifest_version": 2
}

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
  $.get("ajax/test.html", function(data) {
    console.log(data);
  });
});

Do the same steps to use jQuery in your content script. Here's an example of doing that in official documentation: http://developer.chrome.com/extensions/content_scripts.html ("js": ["jquery.js", "myscript.js"]).

Not able to add jquery file to chrome extension

1 Answers1