Comments (8)
@sporkd Totally! I actually use it with an event page in a little side project. Basically, you just listen for changes on the redux store and tie something to persist it to localStorage (or whatever else you want):
https://github.com/tshaddix/next-read/blob/master/event/src/setup.js#L30-L46
Then you can load it up when the event page reactivates:
https://github.com/tshaddix/next-read/blob/master/event/src/index.js#L11-L20
Thoughts?
from webext-redux.
@tshaddix looks like the next-read example is no longer on github. Can you point towards another example that doesn't rely on persistent background pages? I could probably figure it out but examples always help :)
Thanks!
from webext-redux.
@3flex Sorry about that! Don't remember why I took it public. It should be open now!
Here is the code in that project that persists the background store. @sriharrsha This should help you as well.
from webext-redux.
Oh awesome! Thanks for sharing that example. I'll check it out and let you know if I have any additional thoughts.
from webext-redux.
Sounds good! Closing for now but feel free to continue the convo!
from webext-redux.
@tshaddix I was using react-persist in background with localstorage. But it seems like taking a lot of time. Can you give an example of persisting background Store?
from webext-redux.
@tshaddix That repo is no longer visible, the permalink doesn't even work. Do you have a working example?
from webext-redux.
@petemill I have the original example code here (rm'd parts that don't apply):
// @flow
/* global chrome */
import {wrapStore} from 'react-chrome-redux';
import throttle from 'lodash/throttle';
import omit from 'lodash/omit';
import {
PORT_NAME,
TAB_ID_TYPE
} from '../../shared/constants';
import Store from './store';
let store = null;
chrome.storage.local.get([
'state'
], ({state}) => {
store = Store(state || {});
wrapStore(store, {portName: PORT_NAME});
/**
* Save the current store state to local storage
*/
const saveState = () => {
if (!store) {
return;
}
console.info('Saving state to chrome.storage.local');
const state = store.getState();
chrome.storage.local.set({
// remove bookmark folders from taking up unnecessary space
state: omit(state, 'entities')
});
};
// On new state, persist to local storage
const throttledSave = throttle(saveState, 10000, {trailing: true, leading: true});
store.subscribe(throttledSave);
});
Basically comes in two parts. Part 1: When the event page loads, load the state tree from local storage and then kick off the basic extension bootstrapping once that's complete. Part 2: Set up a listener for state changes on the store and save them to local storage every X seconds.
from webext-redux.
Related Issues (20)
- Hot reloading using yarn start leads to error - chrome.runtime.connect() called from a webpage must specify an Extension ID
- Ensure chrome api available before checking lastError
- Mozilla WebExtension-Polyfill support? HOT 3
- What is way to creating Chrome extention with default create-react-app?
- Cannot read properties of undefined (reading 'error') HOT 1
- Storyful is using webext-redux
- wrapStore tabs.query has extra argument
- "can't access dead object" while developing on Firefox
- saga middleware typescript problem
- Question: Advise for hot reloading in development HOT 1
- Doesn't work with react-redux v8 HOT 3
- Is manifest version 3 support planned? HOT 4
- How to fix Uncaught TypeError: Cannot read properties of undefined (reading 'state') HOT 7
- Data not persisting HOT 2
- React Redux State updated value not showing on page refresh
- Is this repo still actively maintained & supported?
- middleware warning when using rtk-query
- useselector not working despite providing store HOT 1
- How to re-sync store from "content script" with background.js (service worker)? HOT 2
- Cannot install webext-redux next to react-redux
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webext-redux.