简单的方法来获取本地存储值的内容脚本[Chrome扩展] [英] Easy way to get Local Storage Value to Content Script [Chrome Extension]

问题描述

我想将一些数据存储在本地存储到内容脚本页面中。由于它不是直接可用的，我通过 chrome.runtime.sendMessage 来完成。但是我有几个值，看起来像这样。

  var用户名，apikey，openexchange，货币，区域设置; 
 
 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）{//提供单个键
 sendResponse（{data：localStorage [message.key]}）; 
} 
 else if .key）{//请求的数组
 var data = {}; 
 message.keys.forEach（function（key）{data [key] = localStorage [key];}）
 sendResponse（{data：data}）; 
} 
 break; 
 // ... 
} 
}）; 
  

所以现在您可以这样做：

<$ p $ b $函数（响应）{$ b {code> chrome.runtime.sendMessage（
{method：getLocalStorage，keys：[username，apikey]} $ b username = response.data.username;
apikey = response.data.apikey;
}
）;

---

也就是说，您正在重新发明轮子。 Chrome已经有一个存储API（称为 ， chrome.storage ），这个存储API完全可以解决这种情况：某种持久性存储可用于扩展页面和内容脚本。

在添加storage权限后，您可以执行此操作：

  chrome.storage.local.get（key，function（data）{
 //使用数据[key] 
}）; 
 
 chrome.storage.local.get（[key1，key2]，function（data）{
 //使用数据[key1]，data [key2] 
}）; 
 
 chrome.storage.local.get（{key1：default1，key2：default2}，function（data）{
 //使用数据[key1]，数据[key2]和默认值将被使用，如果尚未存储在
}）; 
 
 chrome.storage.local.set（{key1：value1，key2：value2}）; 
  

• 完整文档。

.com / a / 28657666/934239>我最近的回答有关Chrome 存储 API。



• localStorage vs chrome.storage 。

I want some data stored in Local storage to content script page. As its not directly available, I did it through chrome.runtime.sendMessage But I have several values and looks like this.

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

When values increasing, this list will go further, Instead Is there any other method to wrap all value in just one function?

Any help would be appreciated.

解决方案

I'll answer your direct question first (for educational purposes), and then provide a better way of doing it (not using localStorage at all).

---

You're the one writing the message listener that answers to the getLocalStorage method. So you can make it more versatile by sending more than one value per request.

Example:

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;
    // ...
  }
});

So now you can do:

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

---

That said, you're reinventing the wheel. Chrome already has a storage API (called, surprisingly, chrome.storage) that addresses exactly this scenario: some kind of persistent storage available to both the extension pages and content scripts.

After adding the "storage" permission, you can do this:

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

• Full documentation.

• My recent answer regarding Chrome storage API.

• Overview of localStorage vs chrome.storage.

这篇关于简单的方法来获取本地存储值的内容脚本[Chrome扩展]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！