Extensions Google Chrome : Comment inclure jQuery dans un script de contenu injecté par programmation ?

Question

J'injecte mon script de contenu à partir de la page d'arrière -plan lorsque l'utilisateur clique sur le bouton d'action du navigateur, comme ceci :

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

Alors, comment puis-je accéder à jQuery depuis mon content.js ? Je ne vois pas un moyen d'injecter cela simultanément.

Answer 1

Qu'en est-il de:

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

Vous pouvez télécharger "jquery.js" à partir d'ici : http://jquery.com/download/

Answer 2

Que diriez-vous de l'ajouter à votre fichier manifeste

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

Answer 3

Comme j'ai beaucoup de scripts avec de nombreuses dépendances, j'utilise une fonction concatenateInjection qui prend trois paramètres :

 //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);
}

et exemple d'utilisation :

 // 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);

Je pense que ça pourrait être utile.

METTRE À JOUR

Version avec concat et fermeture (plus esthétique) :

 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 4

chaque fois que vous souhaitez insérer dynamiquement jQuery, je recommande ce script

J'ai personnellement une recherche personnalisée Chrome " $ " qui remplace $ par

 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: est juste le moyen d'exécuter javascript à partir de la barre d'URL

je l'utilise sur ma page about:blank lorsque j'essaie de simuler rapidement une situation css