javascript - 在 Chrome 扩展中从后台页面获取配置到内容脚本

Question

我正在尝试从 chrome 扩展的后台页面获取一些用户配置到内容脚本(或弹出窗口)，但我遇到了一些问题，我认为问题在于 chrome.storage.sync.get 是异步，我尝试使用回调，但我也读到回调无法返回值，所以我不知道如何解决这个问题。

代码如下:

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);
    }
  });
})();

背景.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;
  }
})();

这里的问题是，当我查看 popup.js 控制台时，“blocked_characters”和“good_post”都是空的。

我该如何解决这个问题？

Answer 1

您不需要 Message API 来进行 Popup 和 Background 之间的通信。 chrome扩展中的Popup可以直接调用Background的方法。

您可以执行类似 this 的操作

BG = chrome.extension.getBackgroundPage();

然后你可以在弹出的js中调用BG.loadStuff()。

从 loadStuff 内部，您可以传递一个回调函数，该回调函数可以将数据返回给您。所以它应该看起来像

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

背景.js

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

为了获得更多理解，请阅读这些

1. http://blog.papersapp.com/chrome-development-parent-and-child-windows/
2. https://stackoverflow.com/a/17276475/816213
3. https://stackoverflow.com/a/17378016/816213