CODEWITHSUNDEEP
jquerygoogle-chrome-extension
Skizit
Skizit

Reputation: 44842

Load JQuery into a Chrome extension?

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.

Upvotes: 28

Views: 44321

Answers (5)

Life Of Pai
Life Of Pai

Reputation: 131

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'"

Upvotes: 0

Please treat your mods well.
Please treat your mods well.

Reputation: 4361

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.

Upvotes: 3

Ankush Ganatra
Ankush Ganatra

Reputation: 510

"content_scripts": [ {
    "matches": ["http://*/*"],
    "js": ["jquery.min.js"]
} ]

Upvotes: 8

jdc
jdc

Reputation: 1265

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

Upvotes: 12

serg
serg

Reputation: 111265

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.

Upvotes: 52

Related Questions