title: How to synchronously execute a function using chrome.storage.local.get and XMLHttpRequest?
body: <pre><code>function get_pps_params(callback)
  {
      var ppsParams = null;
      chrome.storage.local.get(['ppsParams'], function(result) {
          if ($.isEmptyObject(result))
          {
              var oReq = new XMLHttpRequest();
              oReq.open("GET", CLOUD_SERVER + 'get_pps_params', true);
              oReq.responseType = "arraybuffer";
  
              oReq.onload = function (oEvent) {
                  console.log("Got pps params compressed!");
                  ppsParams = oReq.response; // Note: not oReq.responseText
                  chrome.storage.local.set({ppsParams: _arrayBufferToBase64(ppsParams)});
              };
  
              oReq.send();
          }
          else
          {
              ppsParams = _base64ToArrayBuffer(result.ppsParams);
          }
          callback(ppsParams);
      });
  }
  </code></pre>
  
  <p>I am using the above function to retrieve certain parameters from local storage and if they are not present in local storage then the <code>chrome.storage.local.get</code> callback sends request for the data to server. This makes the whole <code>get_pps_params</code> asynchronous(obviously). So how do I  make it execute synchronously ? I read something about jQuery.Deferred but did not understand it.</p>
  
  <p>Currently <code>callback(ppsParams)</code> gives me null if the request is sent to server because of the async nature of XMLHttpRequest.</p>