Question

I have a background script that is responsible for getting and setting data to a localStorage database. My content scripts must communicate with the background script to send and receive data.

Right now I send a JSON object to a function that contains the command and the data. So if I’m trying to add an object to the database Ill create JSON that has a command attribute that is addObject and another object that is the data. Once this is completed the background scripts sends a response back stating that it was successful.

Another use case of the function would be to ask for data in which case it would send an object back rather than a success/fail.

The code gets kind of hacky once I start trying to retrieve the returned object from the background script.

It seems like there is probably a simple design problem to follow here that I’m not familiar with. Some people have suggested future/promise design problems but I haven’t found a very good example.

Content Script

function sendCommand(cmdJson){
   chrome.extension.sendRequest(cmdJson, function(response){
       //figure out what to do with response
   });
}

Background script

if (request.command == "addObject"){
  db[request.id]= JSON.stringify(request.data); 
   sendResponse("success");
}
else if(request.command == "getKeystroke"){
 var keystroke = db[request.id];
 sendResponse(keystroke);
}

Answer 1

Your system looks OK and here are some minor improvements.

For each remote command send back the same type of object (with possibly empty fields):

var response = {
    success: true, // or false
    data: {},
    errors: [],
    callback: ''
}

Also, if you have multiple different commands which send back data, you may replace if-else with an object lookup:

var commands = {
    addObject: function () { /* ... */ },

    getKeystroke: function (request, response) {
        response.data = db[request.id]
    }
}

Then if you have any data to response with, just add it to the object. And send the same object for any command:

var fn = commands[request.commands]
fn(request, response)

As for figuring out what to do with response, I’d pass a callback into the sendCommand function and let the content scripts request and process the response data as they see fit:

function sendCommand(cmdJson, callback){
   chrome.extension.sendRequest(cmdJson, callback)
}