CODEWITHSUNDEEP
jquerygoogle-chrome-extensioncontent-script
anykey3
anykey3

Reputation: 273

JQuery is not working in my Google Chrome extension, content script?

As mentioned in chrome extension development tutorial I can include jQuery in my manifest.json file to use it in a content script like so:

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],


I did that. But when I open the javascript console and click on the browser action icon of my extension, I see the error: "Uncaught ReferenceError: $ is not defined".

What should I have to do!? I can't understand what's wrong.

Updates from OP, originally posted as answers:

As requested, here is my complete manifest and content script sample. manifest.json:

"name": "My Extension",
"version": "1.0",
"manifest_version": 2,

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "My Extension"
},

"background": {"page": "background.html"},
"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery-1.8.3.js","content.js"]
}],

"permissions": ["tabs", "http://*/*", "https://*/*"]


content script snippet:

var message = $('body').width();
chrome.extension.sendMessage (message);

Re rsanchez's answer. I'll try to explain in detail. As is well known we can open two javascript consoles. the first is associated with extension's popup.html and the second associated with currently opened web page. I have following code snippet (for example) in content script and in script included in popup.html 

var = bodyWidth$('body').width(); 
console.log(bodyWidth);

When I open console associated with currently opened web page I receive error mentioned above, but when I open js console associated with extension's popup.html I can see body's width displayed in console. that's mean script included in popup.html refers to jQuery library and content script not.

Upvotes: 3

Views: 4894

Answers (3)

Prabhu
Prabhu

Reputation: 1

You need to refer the jquery.js file as below, similar to content script js file. It worked for me.

chrome.windows.getCurrent( function(currentWindow) {
  chrome.tabs.query({active: true, windowId: currentWindow.id}, function(activeTabs){
    chrome.tabs.executeScript(
      activeTabs[0].id, {file: 'jquery.min.js', allFrames: true}
    );
    chrome.tabs.executeScript(
      activeTabs[0].id, {file: 'select_links.js', allFrames: true}
    );
  });
  console.log(currentWindow.id);
});

Upvotes: 0

rsanchez
rsanchez

Reputation: 14657

If you want to use jQuery in a script included in popup.html, you need to include jquery.js in popup.html before your script.

Upvotes: 2

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

Google Chrome doesn't support an external jquery.js file from/in the manifest.
You must download jquery and put it in the extension folder. Then you can add it to manifest.json.

Upvotes: 3

Related Questions