从 Chrome 扩展程序在页面中注入 Javascript：并发问题？答案

【问题标题】：Injecting Javascript in a page from a Chrome extension : concurrency issue?从 Chrome 扩展程序在页面中注入 Javascript：并发问题？
【发布时间】：2012-03-24 12:01:24
【问题描述】：

我正在参与 Chrome 扩展程序的开发。

在某些时候，我们需要运行一些静态的非生成代码，这些代码必须在页面上下文而不是扩展程序的上下文中运行。

对于简单的脚本，使用$.getScript(chrome.extension.getURL(....))或者script = document.createElement('script'); ... document.body.appendChild(script);都没有问题

对于更复杂的脚本，我们有时需要包含 jquery 本身或其他一些脚本定义（因为依赖关系）。

在后一种情况下，尽管 Javascript 被认为是单线程的，但在运行依赖脚本时似乎没有完全解析 JQuery，导致以下

Uncaught ReferenceError: $ is not defined

假设 JScript 是单线程的，我错了吗？当这些脚本之间存在依赖关系时，在页面中注入脚本的正确方法是什么？（例如，脚本 X 使用脚本 Y 中定义的函数）

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案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);

【讨论】：

那行得通。我写了一个链接机制，但使用 onload 属性正是需要的。谢谢！

【解决方案2】：

在 DOM 中添加带有 src 属性的 script 元素并不意味着脚本已实际加载并可以使用。您需要监控脚本何时实际加载，之后您可以正常开始使用 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 );

【讨论】：