Injecting multiple scripts through executeScript in Google Chrome

Question

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?

Answer 1

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();" }     ]) });