Injecting multiple scripts through executeScript in Google Chrome

content-script, google-chrome, google-chrome-extension, javascript

Solution

This is my proposed solution:

function executeScripts(tabId, injectDetailsArray)
{
    function createCallback(tabId, injectDetails, innerCallback) {
        return function () {
            chrome.tabs.executeScript(tabId, injectDetails, innerCallback);
        };
    }

    var callback = null;

    for (var i = injectDetailsArray.length - 1; i >= 0; --i)
        callback = createCallback(tabId, injectDetailsArray[i], callback);

    if (callback !== null)
        callback();   // execute outermost function
}

Subsequently, the sequence of `InjectDetails` scripts can be specified as an array:

chrome.browserAction.onClicked.addListener(function (tab) {
    executeScripts(null, [ 
        { file: "jquery.js" }, 
        { file: "master.js" },
        { file: "helper.js" },
        { code: "transformPage();" }
    ])
});

Problem

I need to programmatically inject multiple script files (followed by a code snippet) into the current page from my Google Chrome extension. The `chrome.tabs.executeScript` method allows for a single `InjectDetails` object (representing a script file or code snippet), as well as a callback function to be executed after the script. Current answers propose nesting `executeScript` calls: ``` chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null, { file: "jquery.js" }, function() { chrome.tabs.executeScript(null, { file: "master.js" }, function() { chrome.tabs.executeScript(null, { file: "helper.js" }, function() { chrome.tabs.executeScript(null, { code: "transformPage();" }) }) }) }) }); ``` However, the callback nesting gets unwieldy. Is there a way of abstracting this?

Original source

Related problems