Inyectar Javascript en una página de una extensión de Chrome: ¿problema de concurrencia?

Question

Estoy participando en el desarrollo de una extensión de Chrome.

En algún momento, necesitamos ejecutar un código estático no generado que debe ejecutarse en el contexto de la página y no de la extensión.

Para los scripts simples, no hay ningún problema, utilizando ya sea $.getScript(chrome.extension.getURL(....))script = document.createElement('script'); ... document.body.appendChild(script);

Para los scripts más complejos, que íbamos a necesitar a veces a incluque jQuery sí mismo, o alguna otra definición guión (debido a las dependencias).

En este último caso, sin embargo, a pesar del hecho de que, JavaScript es supuestamente un solo subproceso, parece que jQuery no se analiza por completo cuando el guión dependend se ejecutan, lo que lleva a la siguiente

Uncaught ReferenceError: $ is not defined 

estoy equivocado cuando se supone que JScript tiene un solo subproceso? ¿Cuál es la forma correcta de insertar scripts en una página cuando hay dependencias entre esos scripts? (Por ejemplo, el script X usa una función definida en el script Y)

Answer 1

podría utilizar el proceso de carga para el 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

Agregar un elemento script con el atributo src en el DOM no significa que el script esté realmente cargado y listo para ser utilizado. Tendrá que controlar cuándo se ha cargado realmente la secuencia de comandos, después de lo cual puede comenzar a usar jQuery de forma normal.

se podría hacer algo como esto:

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