Google Chrome Extensions: How to include jQuery in programmatically injected content script?

Question

I\'m injecting my content script from the background page when the user clicks the browser action button, like so:

chrome.browserA         


        

Answer 1

Since I've much scripts with many dependencies , I use a function concatenateInjection that takes three parameters:

//id: the tab id to pass to executeScript
//ar: an array containing scripts to load ( index order corresponds to execution order)
//scrpt (opzional): the last script to execute (if not provided, than the last script is the last insert in previous array)

function concatenateInjections(id, ar, scrpt){
  var i = ar.length;
  var idx = 0;

  function inject(idx){
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function() {
          inject(idx);
      });
    }else{
      if(typeof scrpt === 'undefined') return;
      chrome.tabs.executeScript(id, { file: scrpt });
    }
  }
  inject(idx);
}

and usage example:

// id is tab id

// sources: first execute jquery, than default.js and anime.js in the end
var def = [
  "lib/jquery-1.11.3.min.js", 
  "lib/default.js", 
  "injection/anime.js"
];

// run concatenate injections
concatenateInjections(id, def);

Think that's could be useful.

UPDATE

Version with concat and closure (more aesthetic):

function concatenateInjections(id, ar, scrpt){

  if( typeof scrpt !== 'undefined' ) ar = ar.concat([scrpt]);

  var i = ar.length;
  var idx = 0 ;

  (function (){
    var that = arguments.callee;
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function(){ that(idx);} );
    }
  })();

}

Answer 2

anytime you want to dynamically insert jQuery, i recommend this script

i personally have a Chrome Custom Search "$" which replaces $ with

javascript:
var jq = document.createElement('script');
jq.onload = function(){};
jq.src = "https://code.jquery.com/jquery-2.1.1.min.js";
document.querySelector('head').appendChild(jq);

javascript: is just the way to run javascript from the url bar

i use this on my about:blank page when i'm trying to mock up some css situation quickly

Answer 3

UPDATE:

Execute second script after the first one would be more accurate in terms of script order, result is an array of results of execution of the script in list of tabs.

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'}, function(result){
    chrome.tabs.executeScript(null, {file:'js/myscript.js'});
});

OLD:

Injecting Jquery followed by your script will gives ability to access Jquery within your script.

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'});
chrome.tabs.executeScript(null, {file:'js/myscript.js'});

You have more control over how the script should be injected as described in here. Specially allFrames property is important if you wish to inject script to all the frames within the document. Ignoring it will only injected into the top frame. Since it is not mentioned in other answers guess it helps you. Scripts can be injected always by adding it to manifest as described here.

Answer 4

How about adding this to your manifest file

"content_scripts": [
    {
        "js": [
                "jquery.js", 
                "contentscript.js"
            ]
    }
],

Answer 5

What about:

chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

You can download "jquery.js" from here: http://jquery.com/download/