Внедрение Javascript на страницу из расширения Chrome: проблема параллелизма?

Question

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

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

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

. Для более сложных сценариев нам иногда потребуется включить сам 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 );