web-dev-qa-db-fra.com

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

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

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

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

javascriptjquerygoogle-chrome-extension
36
mpen

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/

75
serg

Que diriez-vous d'ajouter ceci à votre fichier manifeste?

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

METTRE À JOUR:

Exécuter le second script après le premier serait plus précis en termes d'ordre de script, result est un tableau de résultats d'exécution du script dans une liste d'onglets.

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

VIEUX:

L'injection de Jquery suivie de votre script donnera la possibilité d'accéder à Jquery dans votre script. 

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

Vous avez plus de contrôle sur la manière dont le script doit être injecté, comme décrit dans ici . La propriété spécialement allFrames est importante si vous souhaitez injecter un script à toutes les images du document. L'ignorer n'injectera que dans le cadre supérieur. Puisqu'il n'est pas mentionné dans les autres réponses, devinez que cela vous aide. Les scripts peuvent toujours être injectés en l’ajoutant au manifeste comme décrit ici .

3
Ruwanka Madhushan

Comme j'ai beaucoup de scripts avec beaucoup de 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);

Pense que cela 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);} );
    }
  })();

}
2
Sim Sca

chaque fois que vous voulez 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

j'utilise ceci sur ma page about:blank quand j'essaie de simuler rapidement une situation de CSS

0
neaumusic