Scope in chrome message passing

Question

I am trying to pass messages between a content script and background script I want to save the value being sent from the background page, but I think the value is stuck with in the scope of the message call. How can I store the value outside of the function closure?

Content_script.js:

var color = "red";
chrome.runtime.sendMessage({method: "getLocalStorage", key: "favColor"}, function(response) {
  color = response.data;
});

Background.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

Answer 1

You are correct, the scope changes inside the callback of the sendMessage call. To alter the color variable you need to pass the scope into the callback. One way to do this is using the javascript bind method to pass the outer scope into the callback. This could look like:

var color = "red";
var changeColor = function(response, sender, sendResponse) {
  this.color = response.data;
};

chrome.runtime.sendMessage({method: "getLocalStorage", key: "favColor"}, 
    changeColor.bind(this));