Unchecked runtime.lastError: The message port closed before a response was received

Question

I'm trying to write a chrome extension that displays response headers, specifically security response headers. I'm trying to do this via XMLHTTPRequests, but it returns an error Unchecked runtime.lastError: The message port closed before a response was received.

function headerUpdate(){
  //run all of the other functions for security here to update an array
  //then update the headers present column on the popup with the array values
  var url = document.URL;
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.send();

  request.onreadystatechange = function() {
    if(this.readyState == this.HEADERS_RECEIVED) {

      // Get the raw header string
      var headers = request.getAllResponseHeaders();

      // Convert the header string into an array
      // of individual headers
      var arr = headers.trim().split(/[\r\n]+/);

      // Create a map of header names to values
      var headerMap = {};
      arr.forEach(function (line) {
        var parts = line.split(': ');
        var header = parts.shift();
        var value = parts.join(': ');
        headerMap[header] = value;
      });
    }
    return arr;
  }
}