28

I'm attempting to load JQuery into my Chrome extension and make it equal to an object but I'm wondering how would I go about this? basically I'd like something like...

jQuery = loadLibraries("jquery-1.4.2.min.js");

How would I do this?

edit: I'm injecting into content script.

Skizit
  • 43,506
  • 91
  • 209
  • 269
  • Inject where - into content script or background page? – serg Feb 09 '11 at 16:18
  • I'm injecting into content script – Skizit Feb 09 '11 at 16:23
  • If you are here looking for how to add jQuery to a pop-up extension (as I was), see this question: http://stackoverflow.com/questions/12035242/loading-jquery-into-chrome-extension – Pro Q Feb 11 '17 at 01:09

5 Answers5

52

You can just put jquery.js into extension folder and include it in the manifest:

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

You don't need to worry about conflicts with jQuery on a parent page as content scripts are sandboxed.

serg
  • 109,619
  • 77
  • 317
  • 330
  • but what if I want to the following.. `_$ = function(selector,context){ return new jQuery.fn.init(selector,context||document); };` and attach listeners to the _$ object? Also, what is the 'matches' param you're feeding in there doing? – Skizit Feb 09 '11 at 16:30
  • @Skizit Well do with jQuery whatever you want, just like on a regular page. I am not entirely understand what you are trying to do there. You can read about content scripts here, that would answer your manifest questions: http://code.google.com/chrome/extensions/dev/content_scripts.html – serg Feb 09 '11 at 16:37
  • 1
    I get "Failed to load extension from: ~/work/ba/chromeExtensions/buyamerica Could not load javascript 'jquery-2.1.3.min.js' for content script." but the file is there – Elia Weiss Aug 07 '17 at 06:37
  • I've got the same error @EliaWeiss. Have you fixed it ? – Do Minh Phong Nov 16 '17 at 01:50
  • I don't remember exactly, but from looking at the code I can see that I did `` in the html – Elia Weiss Nov 19 '17 at 08:12
  • this is my manifest: `{ "manifest_version": 2, "name": "BuyAmerica", "version": "1.0", "background": { "scripts": ["jquery.js","background.js"] }, "content_scripts": [{ "matches": [""], "js": ["jquery.js","content.js"] }], "page_action": { "default_title": "BuyAmerica", "default_popup": "popup.html" }, "permissions": [ "activeTab", "storage" ] }` – Elia Weiss Nov 19 '17 at 08:13
12

You can do this from a script in your background_page HTML:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, { file: "jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content_script.js" });
  });
});

Then in content_script.js do whatever you like:

  $('#header').hide();

Note that even if the page you've injected into already has jQuery loaded, you're still hitting your own instance of the jQuery object, which is accessing the page via the DOM. (document).

jdc
  • 1,255
  • 12
  • 15
8
"content_scripts": [ {
    "matches": ["http://*/*"],
    "js": ["jquery.min.js"]
} ]
Ankush Ganatra
  • 500
  • 5
  • 23
3

Check the answer by jdc here in this same thread.

Edit: this answer was pretty old and did not reflect current practices anymore. Thank you for the heads up.

Community
  • 1
  • 1
Please treat your mods well.
  • 4,321
  • 1
  • 25
  • 35
  • 1
    Not condemning for disagreeing, but it would be nice to share the reason for the downvote so everyone can learn/discuss. – Please treat your mods well. Sep 04 '12 at 14:30
  • 8
    Hi Rodrigo, sorry, I usually leave comments but must have forgot. Reference links alone shouldn't be answers on Stack Overflow, as if they break, your answer would be useless. I went ahead and made an edit on your behalf and removed my downvote. Hope this helps! – jamesmortensen Oct 14 '12 at 23:27
  • @jmort253, I'm glad you edited this post because the link is dead (it's 6 years old, so no surprise). Also, this solution is either incomplete or incorrect. In order to load a file from an external source, the developer needs to set a content-security-policy. "content_security_policy": "[POLICY STRING GOES HERE]" Per: https://developer.chrome.com/extensions/contentSecurityPolicy IMHO, the best way is using the method that jdc posted. – richb01 Sep 04 '16 at 16:52
0

Adding to above answers, if you wish to add jQuery via CDN, you would need to add the following in manifest.json file

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
Life Of Pai
  • 91
  • 1
  • 2