Get configs from background page to content script in chrome extension

Question

I'm trying to get some user configs from the background page of my chrome extension to the content script (or popup) but I'm having some problems, I think the problem is that chrome.storage.sync.get is async, I tried using callbacks but I also read that callbacks can't return the value so I have no idea how to solve this.

Here's kinda how the code looks:

popup.js:

(function() {
  chrome.runtime.sendMessage({
    message: "loadconfig"
  }, function(response) {
    console.log(response);
    if (response.status === 'success') {
      console.log(response);
    } else {
      console.log(response.except);
    }
  });
})();

background.js

(function() {
  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    switch (request.message) {
      case "loadconfig":
        sendResponse(loadStuff());
        break;
      default:
        sendResponse({
          reply: null
        });
        break;
    }
  });
  function loadStuff() {
    var to_return_configs = {
      blocked_characters: '',
      good_post: ''
    };
    var function_status = 'failed';
    var exception = '';
    var blocked_characters_parsed, good_post_parsed;

    try {
      var to_get = ["blocked_characters_saved", "good_post_saved"];
      chrome.storage.sync.get(to_get, function(result) {
        to_get.forEach(function(got) {
          if (got === "good_post_saved") {
            to_return_configs.good_post = result[got];
          }
          if (got === "blocked_characters_saved") {
            to_return_configs.blocked_characters = result[got];
          }
        });
      });
      exception = '';
      function_status = 'success';
    } catch (err) {
      exception = String(err);
      function_status = 'failed';
    }
    var to_return = {
      status: function_status,
      configs: to_return_configs,
      except: (exception)
    };
    return to_return;
  }
})();

The problem here is that when I'm looking at the popup.js console, "blocked_characters" and "good_post" are both empty.

How can I solve this?

score 2 · Answer 1 · edited May 23 '17 at 12:23

You do not need Message API for communication between Popup and Background. Popup in chrome extension can directly call methods of Background .

You can do something like this

BG = chrome.extension.getBackgroundPage();

And then you can call BG.loadStuff() in your popup js.

From within loadStuff, you can pass a callback which can return data to you. So it should look like

BG.loadStuff(function(items) {
  console.log(items);
});

background.js

function loadStuff(cb) {
  chrome.storage.sync.get(null, function(superObj) {
    cb.call(null, superObj);
  });
}

For more understanding, read these

Dayton Wang · Answer 2 · 2015-03-04T21:26:28.570

sendResponse(function) becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end until sendResponse is called). See the reference: onMessage.

Because sendResponse is called asynchronously in chrome.storage.sync.get's callback, you need to return true from the onMessage listener to prevent the function from being invalidated. Code similar is Like:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message === 'loadconfig') {
        sendResponse(loadStuff());
        return true;
       }
      return false;
    });

Get configs from background page to content script in chrome extension

2 Answers2