Инъекция Javascript на странице из расширения Chrome: проблема параллелизма?

Question

Я принимаю участие в разработке расширения Chrome.

В какой-то момент нам нужно запустить статический не сгенерированный код, который должен запускаться в контексте страницы, а не расширения.

Для простых сценариев, нет никаких проблем, используя либо $.getScript(chrome.extension.getURL(....)) либо script = document.createElement('script'); ... document.body.appendChild(script);

Для более сложных сценариев, мы должны были бы иногда incluque самого JQuery, или каким-либо другое определения сценария (из-за зависимости).

В этом последнем случае, однако, несмотря на то, что Javascript, предположительно однопоточный, кажется, что JQuery не разбирается полностью, когда скрипт зависимого от запускаются, что приводит к следующему

Uncaught ReferenceError: $ is not defined 

Я ошибаюсь если предположить, что JScript является однопоточным? Каков правильный способ ввода сценариев на страницу при наличии зависимостей между этими сценариями? (например, сценарий X использует функцию, определенную в скрипте Y)

Answer 1

Вы можете использовать событие OnLoad для сценария ....

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

Добавление элемента script с атрибутом src в DOM не означает, что скрипт фактически загружен и готов к использованию. Вам нужно будет следить за загрузкой скрипта, после чего вы можете начать использовать jQuery как обычно.

Вы могли бы сделать что-то вроде этого:

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