javascript 注入(inject)没有正常工作

Question

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

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

有人可以向我解释如何解决这个问题吗？:

1. 注入(inject)所有脚本。
2. 注入(inject) 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()，该位置本应在注入(inject)所有脚本后调用。但是，您是在第一次调用 patchNext 之后调用的。

修改您的 injectJavaScripts 以在注入(inject)所有脚本时调用 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
};