Iniezione di Javascript in una pagina da un'estensione di Chrome: problema di concorrenza?

Question

Parteciperò allo sviluppo di un'estensione di Chrome.

A un certo punto, è necessario eseguire un codice statico non generato che deve essere eseguito nel contesto della pagina e non dell'estensione.

Per semplici script, non c'è nessun problema, utilizzando $.getScript(chrome.extension.getURL(....)) sia script = document.createElement('script'); ... document.body.appendChild(script);

Per gli script più complessi, avremmo bisogno a volte di incluque jquery sé, o di qualche altra definizione sceneggiatura (a causa delle dipendenze).

In quest'ultimo caso, però, nonostante il fatto che Javascript è presumibilmente a thread singolo, sembra che JQuery non viene analizzato tutto quando lo script dependend vengono eseguiti, che porta alla seguente

Uncaught ReferenceError: $ is not defined 

Sbaglio quando si suppone che JScript sia a thread singolo? Qual è il modo corretto di iniettare script in una pagina quando ci sono delle dipendenze tra questi script? (ad esempio, lo script X utilizza una funzione definita nello script Y)

Answer 1

è possibile utilizzare l'evento onload per lo script ....

function addScript(scriptURL, onload) { 
    var script = document.createElement('script'); 
    script.setAttribute("type", "application/javascript"); 
    script.setAttribute("src", scriptURL); 
    if (onload) script.onload = onload; 
    document.documentElement.appendChild(script); 
} 

function addSecondScript(){ 
    addScript(chrome.extension.getURL("second.js")); 
} 

addScript(chrome.extension.getURL("jquery-1.7.1.min.js"), addSecondScript); 

Answer 2

L'aggiunta di un elemento script con attributo src nel DOM non significa che lo script sia effettivamente caricato e pronto per essere utilizzato. Dovrai monitorare quando lo script è stato effettivamente caricato, dopodiché puoi iniziare a usare jQuery normalmente.

Si potrebbe fare qualcosa di simile:

var script = doc.createElement("script"); 
    script.src = url; 
    /* if you are just targeting Chrome, the below isn't necessary   
    script.onload = (function(script, func){ 
     var intervalFunc; 

     if (script.onload === undefined) { 
      // IE lack of support for script onload 

      if(script.onreadystatechange !== undefined) { 

       intervalFunc = function() { 
        if (script.readyState !== "loaded" && script.readyState !== "complete") { 
         window.setTimeout(intervalFunc, 250); 

        } else { 
         // it is loaded 
         func(); 

        } 

       }; 

       window.setTimeout(intervalFunc, 250); 

      } 

     } else { 
      return func; 
     } 

    })(script, function(){ 

     // your onload event, whatever jQuery etc. 
    }); 
    */ 
    script.onload = onreadyFunction; // your onload event, whatever jQuery etc. 

    document.body.appendChild(script);