Easy way to get Local Storage Value to Content Script [Chrome Extension]

Question

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.

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

2

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.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 25 '15 at 11:09

Xan

74,770
16
179
206

That's great.. But how can we use storage API with options page? – Surjith S M Feb 25 '15 at 11:52
That's the point of `storage` API: it can be used in every extension context the same way. Beyond that, I insist that you read the documentation. – Xan Feb 25 '15 at 11:55
and I just tried the first method, but it returns `undefined` – Surjith S M Feb 25 '15 at 12:04
@SurjithSM My bad, forgot `message`. Edited to fix. – Xan Feb 25 '15 at 12:05
No luck. returning this error ` (CONTENT_SCRIPT context for mpkijihfidfkhjdiomjeajfegbbdiide) try_catch has no message{TypeError: Cannot read property 'impl' of undefined at extensions::messaging:184:25} ` – Surjith S M Feb 25 '15 at 12:12
I added another `message.` Beyond that.. \*shrug\* I don't see problems with my code. Neither conceptual nor any more implementation problems. Do debug your code, those errors I made were easy to fix if you understand what the code is supposed to be doing. – Xan Feb 25 '15 at 12:14
Sorry to bother you. Newbie on this. It worked now. Now I will learn Storage API. Thank for your time & prompt response. Marking this as right answer. – Surjith S M Feb 25 '15 at 12:19
1

It's all right; by the way, regarding "prompt response" I recommend [this extension](https://chrome.google.com/webstore/detail/desktop-notifications-for/ijglncoabcgieiokjmgdogpefdblmnle) from the great RobW. – Xan Feb 25 '15 at 12:21

Easy way to get Local Storage Value to Content Script [Chrome Extension]

1 Answers1

Linked