Vuex: How to use vuex to build chrome extension

Created on 10 Feb 2017 · 7Comments · Source: vuejs/vuex

In my extension, there are two processes:
Background and popup
For both processes you need to keep general State and react to changing it.
For example:

The background process accesses to the API and changes the state. Popup should respond to this change.
User, in Popup, performs some action and changes the state. Background processes must react to this change.

Data can be stored using:

chrome.storage API
localStorage API

Both methods synchronize data between processes.
But the change of state in the same process causes no reaction elsewhere.

Source

cawa-93

👍3

Most helpful comment

Hello everybody. I propose vuex-shared-mutations as a solution option. It uses localStorage to synchronize the state between tabs, but this should work for an extension, since the localStorage there is shared.

Also pay attention to vuex-persistedstate. The plugin saves the current state to localStorage .

cawa-93 on 3 Oct 2017

🎉2

All 7 comments

Please read issue reporting guideline before opening an issue. The issue list is exclusively reserved for bug reports and feature requests.
Usage/support questions should be posted on our forum or gitter. We will be glad to help you on there.
Thanks.

ktsn on 12 Feb 2017

I would be interested on this topic, I don't find anything on the web.

jdinartejesus on 17 May 2017

@jdinartejesus I myself did not find a solution either. The best thing that came to mind is to combine the vuex with the chrome.storage.onUpdate to synchronize the state of the storage on background and popup views

cawa-93 on 17 May 2017

Thanks @cawa-93, I didn't think about that. I was trying to use https://github.com/ivantsov/redux-webext/ but also without success. I guess your solution is the best for now. Thanks

jdinartejesus on 17 May 2017

For people on this issue, you may want to take a look at https://github.com/tshaddix/react-chrome-redux and see how he manages to create a proxy to build a shared store with chrome event messages.

terry90 on 20 Sep 2017

Also pay attention to vuex-persistedstate. The plugin saves the current state to localStorage .

cawa-93 on 3 Oct 2017

🎉2

Well so far I've only had luck using this plugin: https://github.com/MitsuhaKitsune/vuex-webextensions
It still has some drawbacks. It really sucks we have yet to have a de facto way of building chrome extensions using vue. I mean react is good but as far as development goes, I feel like flying when using vue.