javascript 注入没有正常工作

Question

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

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

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

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

javascript 注入没有正常工作

javascript injection is not working as it should be

html

javascript

jquery

code-injection