webentwicklung-frage-antwort-db.com.de

Google Chrome-Erweiterungen: Wie kann jQuery in programmgesteuerte Inhaltsskripte eingefügt werden?

Ich füge mein content script von der Hintergrundseite ein, wenn der Benutzer auf die browser-Aktion -Schaltfläche klickt, wie folgt:

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

Wie kann ich also von meinem content.js aus auf jQuery zugreifen? Ich sehe keine Möglichkeit, dies gleichzeitig zu injizieren.

javascriptjquerygoogle-chrome-extension
36
mpen

Wie wäre es mit:

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

Sie können "jquery.js" von hier herunterladen: http://jquery.com/download/

75
serg

Fügen Sie dies Ihrer Manifestdatei hinzu

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

AKTUALISIEREN:

Das zweite Skript nach dem ersten Skript ausführen wäre in der Reihenfolge des Skripts genauer. result ist ein Array von Ergebnissen der Ausführung des Skripts in der Liste der Registerkarten.

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

ALT:

Durch das Injizieren von Jquery gefolgt von Ihrem Skript können Sie auf Jquery in Ihrem Skript zugreifen. 

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

Sie haben mehr Kontrolle darüber, wie das Skript eingefügt werden soll, wie in hier beschrieben. Die allFrames-Eigenschaft ist besonders wichtig, wenn Sie ein Skript in alle Frames des Dokuments einfügen möchten. Ignorieren wird nur in den oberen Rahmen eingefügt. Da es nicht in anderen Antworten erwähnt wird, ist es hilfreich. Skripte können immer eingefügt werden, indem Sie sie wie hier zum Manifest hinzufügen.

3
Ruwanka Madhushan

Da ich viele Skripte mit vielen Abhängigkeiten habe, verwende ich eine Funktion concatenateInjection, die drei Parameter benötigt:

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

und Verwendungsbeispiel:

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

Denke, das könnte nützlich sein.

AKTUALISIEREN

Version mit Concat und Verschluss (mehr Ästhetik):

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

wenn Sie jQuery dynamisch einfügen möchten, empfehle ich dieses Skript

ich persönlich habe eine benutzerdefinierte Chrome-Suche "$", die $ durch ersetzt

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: ist nur der Weg, um Javascript von der URL-Leiste aus auszuführen

ich verwende dies auf meiner about:blank-Seite, wenn ich versuche, einige CSS-Situationen schnell zu verspotten

0
neaumusic