2

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.
});
EasilyBaffled
  • 3,822
  • 10
  • 50
  • 87

1 Answers1

2

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));
berrberr
  • 1,914
  • 11
  • 16
  • Doesn't the this in the this.color refer to the scope of the current function, and not the color outside of it. – EasilyBaffled Feb 04 '14 at 22:46
  • Normally it would...but that's why I used `bind` to pass the "outer" scope into the callback. Did you read the [linked docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)? – berrberr Feb 05 '14 at 02:30