Javascript 为内容脚本获取本地存储值的简便方法[Chrome Extension]

我希望一些数据存储在本地存储到内容脚本页面。由于它不是直接可用的，所以我通过

chrome.runtime.sendMessage

实现了它，但我有几个值，看起来像这样

var username, apikey, openexchange, currency, locale;

chrome.runtime.sendMessage({method: "getLocalStorage", key: "username"}, function(response) {
  username = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "apikey"}, function(response) {
  apikey = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "openexchange"}, function(response) {
  openexchange = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "currency"}, function(response) {
  currency = response.data;
});

chrome.runtime.sendMessage({method: "getLocalStorage", key: "locale"}, function(response) {
  locale = response.data;
});

当值增加时，此列表将更进一步，是否有其他方法将所有值包装在一个函数中

---

任何帮助都将不胜感激。

我将首先回答您的直接问题（出于教育目的），然后提供一种更好的方法（根本不使用

localStorage

）

---

您正在编写响应

getLocalStorage

方法的消息侦听器。因此，通过为每个请求发送多个值，您可以使其更加通用

例如：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch(message.method) {
    // ...
    case "getLocalStorage":
      if(message.key) { // Single key provided
        sendResponse({data: localStorage[message.key]});
      }
      else if(message.keys) { // An array of keys requested
        var data = {};
        message.keys.forEach(function(key) {data[key] = localStorage[key];})
        sendResponse({data: data});
      }
      break;
    // ...
  }
});

现在你可以做：

chrome.runtime.sendMessage(
  {method: "getLocalStorage", keys: ["username", "apikey"]},
  function(response) {
    username = response.data.username;
    apikey = response.data.apikey;
  }
);

---

也就是说，你在重新发明轮子。Chrome已经有了一个存储API（出人意料地称为

Chrome.storage

），它正好解决了这个问题：扩展页面和内容脚本都可以使用某种持久存储

添加

“存储”

权限后，您可以执行以下操作：

chrome.storage.local.get(key, function(data) {
  // Use data[key]
});

chrome.storage.local.get([key1, key2], function(data) {
  // Use data[key1], data[key2]
});

chrome.storage.local.get({key1: default1, key2: default2}, function(data) {
  // Use data[key1], data[key2], and defaults will be used if not yet in storage
});

chrome.storage.local.set({key1: value1, key2: value2});

• 关于Chrome

  存储

  API

---

太好了。。但是，我们如何将存储API与选项页一起使用呢？这就是

storage

API的要点：它可以以相同的方式在每个扩展上下文中使用。除此之外，我坚持要求您阅读文档。我刚刚尝试了第一种方法，但它返回

未定义的
@SurjithSM My bad，forget
消息
。编辑以修复。没关系；顺便说一句，关于“迅速反应”，我推荐伟大的RobW。