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.

Solution 1:

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.

Solution 2:

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