title: Injecting multiple scripts through executeScript in Google Chrome
body: <p>I need to <a href="https://developer.chrome.com/extensions/content_scripts.html#pi" rel="noreferrer">programmatically inject</a> multiple script files (followed by a code snippet) into the current page from my Google Chrome extension. The <a href="http://developer.chrome.com/extensions/tabs.html#method-executeScript" rel="noreferrer"><code>chrome.tabs.executeScript</code></a> method allows for a single <a href="http://developer.chrome.com/extensions/tabs.html#type-InjectDetails" rel="noreferrer"><code>InjectDetails</code></a> object (representing a script file or code snippet), as well as a callback function to be executed after the script. <a href="https://stackoverflow.com/a/4979785/1149773">Current answers</a> propose nesting <code>executeScript</code> calls:</p>
  
  <pre><code>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();" })
              })
          })
      })
  });
  </code></pre>
  
  <p>However, the callback nesting gets unwieldy. Is there a way of abstracting this?</p>