Use Chrome Extension API within Vue.js Component

Question

I'm trying to access the local storage of the chrome extension ergo the chrome browser within my vue.js component.

ServerList.vue

    <template>
      <div>
        <server-list :server-descriptions="serverDescriptions"/>
      </div>
    </template>

    <script>
      import ServerList from "./ServerList.vue"

      chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
        console.log('Settings saved');
      });

      chrome.storage.sync.get(['foo', 'bar'], function(items) {
        console.log('Settings retrieved', items);
      });
    [...]

   </script>

This code is within my popup.html and this is what the console of the popup.html inspection tells me this:

Therefore I assumed it did work. But when I check the local storage through the debugger tab I see nothing:

Even checking localStorage in the console manually does not show me anything:

Therefore I assume the data is not persistet in my chrome browser?

Does anybody know how I can get this to work? Or give me a hint?

`localStorage` is not where chrome.storage.local saves data. See the [documentation](https://developer.chrome.com/extensions/storage). Also beware the latter is asynchronous. — wOxxOm, Jun 12 '17 at 07:29
Related: [window.localStorage vs chrome.storage.local](https://stackoverflow.com/q/24279495) — Makyen, Jun 13 '17 at 09:34

Kumar · Accepted Answer · 2017-06-12T17:21:04.683

1

Chrome.storage api and localStorage api both are different things. Chrome.storage api has been optimized to meet the specific storage needs of extensions. It provides the same storage capabilities as the localStorage API. There are many difference between this two like the localStorage API stores data in strings where as storage api can be stored as objects and It's asynchronous with bulk read and write operations so, it is faster than localStorage api. If you want to store in localStorage api. You can do it by,

localStorage.myvar = "This is an example";

or

localStorage.setItem("myvar", "This is an example");

You can get item by

localStorage.getItem("myvar");

Remove item like

localStorage.removeItem("myvar");

you can access this variable using localStorage.myvar. Hope it helps

edited Jun 12 '17 at 17:21

answered Jun 12 '17 at 09:46

Kumar

1,187
18
31

Thanks for the clarification. I finally found the Issue in the difference between chromes storage api sync – xetra11 Jun 12 '17 at 10:35
The storage API stores data as JSON strings, not as Objects. That's why anything stored *must* be JSON-ifiable. – Makyen Jun 12 '17 at 17:15
`storage api can be stored as objects` here https://developer.chrome.com/extensions/storage – Kumar Jun 12 '17 at 17:21
@Kumar, User data can *be* Objects, but they are converted to JSON strings internal to the browser. Thus, you can store and retrieve Objects, but they are not stored *as* Objects. This browser-internal conversion to JSON strings is the reason that everything stored in Chrome storage *must* be JSON-ifiable. This discussion may be, in part, an English language usage issue. – Makyen Jun 13 '17 at 02:27

score 0 · Answer 2 · answered Dec 08 '20 at 07:17

// popup.html
window.addEventListener("message", function (event) 
{
// We only accept messages from ourselves
  if (event.source != window) return;

  if(event.data != "")
  {
    var data = JSON.parse(event.data);

    if (data.type == 'STORE_DATA') 
    {
        chrome.storage.sync.set(data, function() 
        {
            console.log('Settings saved');
        });
    }
  }
});


// ServerList.vue

let data = {'foo': 'hello', 'bar': 'hi'}

let type = { type: "STORE_DATA" , data :data };
    
window.postMessage(JSON.stringify(type), "*");

Use Chrome Extension API within Vue.js Component

2 Answers2