returning a message from a background script

I have managed to get a response back from the server back to the background script in my Chrome extension that it is communicating with. Now I need to get a message back to the popup so I can repopulate a table. Here is the code that gets the response back from the server in a function called send_to_backend(). This function is being called when the within and onload when the readyState=200 is satisfied. 

Code:

    function send_to_backend()
    {
    

    myArray["email"]=jsonResponse["email"];
    var json = JSON.stringify(myArray);
     var url = 'http://localhost/Subit_backend/register';  
    
     var xhr = new XMLHttpRequest();
     xhr.onerror = function() { alert('error'); };
    xhr.open('POST', url, true);
   xhr.setRequestHeader("Content-type", "application/json");
   xhr.setRequestHeader("X-Requested-With",'xmlhttprequest');
    
   xhr.onload = function () {   //response will go here
            if(xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                // Log the whole json object
                console.log(jsonResponse);
                // Access 'success' from the object
                console.log(jsonResponse.success);
                sendResponse({response: jsonResponse.success});   <<< here
                //return(jsonResponse);
                
            }
     // Request finished. Do processing here.
      
   };

The problem is that sendResponse is not recognized and is causing an error. 

1. "response is not defined"
   
   
2. stack:"ReferenceError: response is not defined↵    at eval (eval at xhr.onload (chrome-extension://bdjgnodlhfmhghjhbkkkaaammfocdpib/background.js:108:5), <anonymous>:1:1)↵    at XMLHttpRequest.xhr.onload (chrome-extension://bdjgnodlhfmhghjhbkkkaaammfocdpib/background.js:108:5)"
     
   

I wonder of the problem is that the sendResponse is not actually within the  addlistener. It is in a separate function , send_to_backend(), to make it more manageable.

proof that an old dog can learn new tricks

I did some more searching and think I understand the issue better. 
1. My popup script sends a message to my background script to get some info xhr from the server.
2. My background script gets a token asynchronously to check for authentication. 
3. When I get an onload and readyState=200 (ok)  from the token request I call a function called send_to_backend() which gets the data I need from my server asynchronously. Send_to Backend is not called asynchronously, but inside it it has an asynch call to the server. 
4. My call to Send_to_backend() returns immediately to the call within the anon onMessage function, before this is before the asynch response from the server is ready. 
5. I immediately send the "uncooked response" back to the popup script. 
6. If instead i try to send the message back to the popup from within send_to_backend, sendResponse is not defined. I guess this is because I am not within the onMessage function?

The reason I created the send_to_backend function was to get out of "callback hell" and to make the code readable. But send_to_backend is not a callback itself, it is a function, and of course, is not blocking either.

Any ideas on how to deal with this? If I could just send the message from send_to_backend() to the popup script things seem to be working OK.

proof that an old dog can learn new tricks

Well ,thinking about it, perhaps I should break it into two steps:

1) popup send message to background script to authenticate user
2) background script catches "authenticate" string and authenticates and sends either an OK or a false back to popup.
3) if OK, the popup script sends a message to the background script to "login"
4) background script sends a XMLHttpRequest to the server which responds with the payload.
5) background script sends a message back to the popup script with the payload.

Maybe this makes more sense, rather than getting stuck in callback hell. Any flaws in this plan?

proof that an old dog can learn new tricks