javacript injectionが正常に動作していない

Question

外部タグをスクリプトタグにsrcとして注入し、その後にHTMLを挿入するコールバック関数を呼び出しています。しかし、私がデバッグすると、次のようになります。

1. jqueryを注入します。
2. HTML（コールバック関数）を注入する
3. 残りのスクリプトタグを注入します。

誰かが、それはこのように動作していること、この問題を解決する方法を私に説明できます？：

1. 注入するすべてのスクリプト。
2. HTMLを入力します。

Injection.jsファイル：あなたはすべてのスクリプトが注入された後に呼び出されることになっている誤った位置にcallback()呼びかけている

injectJavaScripts([ 
    "lib/jquery/dist/jquery.js", 
    "lib/angular/angular.js", 
    "lib/angular-route/angular-route.js", 
    "lib/ui-router/release/angular-ui-router.js", 
    "src/app.js", 
    "src/LoginController.js", 
    "src/LogoutController.js", 
    "src/MainController.js" 
], function() { 
    injectHTML(); 
}); 

function injectJavaScripts(urls, callback) { 
    var elements = []; 
    urls.forEach(function (url) { 
     var s = document.createElement('script'); 
     s.src = chrome.extension.getURL(url); 
     elements.push(s); 
    }); 

    var target = document.body || document.documentElement; 
    var i = 0; 
    var patchNext = function() { 
     if (i >= elements.length) return; 
     else if (i > 0) { 
      elements[i - 1].onload = null; 
     } 

     elements[i].onload = patchNext; 
     target.appendChild(elements[i]); 

     i += 1; 
    }; 
    patchNext(); 
    callback(); 
}; 

function injectHTML() { 
    var logged = false; 
    var cheapWatcherDiv = document.createElement('div'); 
    cheapWatcherDiv.setAttribute('class', 'cheap-watcher'); 
    document.body.appendChild(cheapWatcherDiv); 

    if (logged == false) { 
     $(".cheap-watcher").load(chrome.extension.getURL('views/main.html')); 
     $('head').append('<link rel="stylesheet" href="' + chrome.extension.getURL('sass/main.css') + '" type="text/css" />'); 
    } else { 
     $(".cheap-watcher").load(chrome.extension.getURL('views/logoutTemplate.html')); 
    } 
}; 

Answer 1

。しかし、あなたはpatchNextへの最初の呼び出し後に電話しています。

injectJavaScriptsを変更すると、すべてのスクリプトが挿入されたときにcallback()が呼び出されます。

function injectJavaScripts(urls, callback) { 
    var elements = []; 
    urls.forEach(function (url) { 
     var s = document.createElement('script'); 
     s.src = chrome.extension.getURL(url); 
     elements.push(s); 
    }); 

    var target = document.body || document.documentElement; 
    var i = 0; 
    var patchNext = function() { 
     if (i >= elements.length) { 
      // All scripts are injected now 
      // ok to invoke callback() here 
      callback(); 
      return; 
     } 
     else if (i > 0) { 
      elements[i - 1].onload = null; 
     } 

     elements[i].onload = patchNext; 
     target.appendChild(elements[i]); 

     i += 1; 
    }; 
    patchNext(); 
    // callback(); don't call here 
};