Question

I have a Google Chrome Extension in which I have a background.js and I am trying to use JQuery in it.

Getting following error.

Uncaught ReferenceError: $ is not defined

My manifest File code part

 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["script.js", "jquery.js","front.js"]
    }
  ],
  "web_accessible_resources": ["https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

I am not able to get any clue of using JQuery functions in this extension. Please let me know if you need more justification.

Edit#1: Manifest File

{
  "name": "Tool",
  "description": "Extension",
  "manifest_version": 2,
  "version": "5.0.0.0",
  "manifest_version": 2,
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*", "https://*/*", "storage"
  ],
  "options_page": "options.html",
  "icons":{"16": "images/F_icon_16x16.png",
           "48": "images/F_icon_48x48.png",
          "128": "images/F_icon_128x128.png"},
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.js", "script.js", "front.js"]
    }
  ],
  "content_security_policy": "script-src 'self' ; object-src 'self'",
  "browser_action": {
      "default_title": "Tool",
      "default_icon": "images/F_icon.png"
  }
}

Answer 1

change this part:

"js": ["script.js", "jquery.js","front.js"]

to this:

"js": ["jquery.js","script.js","front.js"]

The order of that line is the order the files are included. so you need first the jquery.js to define the $ (for jquery) and then the other scripts with your scripting…