javascript injection не работает, как должно быть

Question

Я вставляю скриптовые теги с внешними файлами в виде src, после чего я вызываю функцию обратного вызова, чтобы ввести HTML. Но когда я отлаживаю это, он выглядит следующим образом:

1. Inject jquery.
2. Inject HTML (функция обратного вызова)
3. Вставить остаток тегов сценария.

Может кто-нибудь объяснить мне, как решить эту проблему, что она работает, как это ?:

1. INJECT все сценарии.
2. Вставка HTML.

Injection.js файл:

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

Вы звоните callback() на неправильном положении, который должен быть вызван после того, как все сценарии впрыскивается. Однако вы звоните после первого звонка в 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 
};