title: How to avoid synchronous XMLHttpRequest
body: <p>I am building a Chrome Extension for our QA team.  On startup, the extension loads a config file and uses it to set properties on a global object.  Here is the code:</p>
  
  <pre><code>var qaExt = (function () {
  
      'use strict';
  
      // Properties fetched from config file
      var userHash, gitHash;
  
      function getBuildInfo() {
  
          var xhr = new XMLHttpRequest();
          xhr.overrideMimeType("application/json");
          xhr.onreadystatechange = function () {
              if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                  var buildInfo = JSON.parse(xhr.responseText);
  
                  teamId = buildInfo.teamId;
                  gitHash = buildInfo.gitHash;
              }
          };
  
          var path = ((vAPI.firefox) ? '/content' : '') + '/js/build_info.json';
  
          xhr.open("GET", path, false);
          xhr.send();
      }
  
      return {
  
          isDev: true,
          userSettings: {
              collapseAllowed: true,
              menuEnabled: true,
              experimental: false
          },
          teamId: teamId,
          gitHash: gitHash,
      };
  
  })();
  </code></pre>
  
  <p>The code in the other files depends on the value of the properties 'teamId' and 'gitHash'.  This is why I load the config file synchronously here.  But I get the following warning in the console:</p>
  
  <pre><code>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects on the end user's experience. For more help, 
  check http://xhr.spec.whatwg.org/.
  </code></pre>
  
  <p>How can I do this without a synchronous AJAX request?  I do not want the other code to execute before these values are set.</p>