javascript 注入没有按应有的方式工作

Question

我将外部文件作为 src 注入脚本标签，然后调用回调函数来注入 HTML。但当我调试时，它是这样的：

1. 注入jquery.
2. 注入HTML（回调函数）
3. 注入其余的脚本标签。

有人可以向我解释如何解决这个问题吗？它的工作原理如下：

1. 注入所有脚本。
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
};