webext-sync

Sync data between a web extension's background, popup, options and content scripts. The data will persist across extension restarts and the background service worker stopping/starting does not affect functionality. Works cross-browser, with MV3 and MV2.

Please submit any issues or feature requests at https://github.com/tdriley/webext-sync/issues

Usage

First install as a project dependency:

npm install webext-sync --save

Make sure your extension's manifest.json asks for the storage permission:

1// manifest.json
2
3"permissions": [
4    "storage"
5],

In the extension's background script, define the default state and set it up to store and receive changes. Note: If you ever want to change the data's schema in newer versions of your extension, you can define a new defaultState and any existing data will be deep-merged with the new schema.

1// background.js
2
3import { startSyncStore } from "webext-sync"
4
5const defaultState = {
6    storeVersion: 1, // Not required, but it is probably a good idea to version your store
7    timesPopupOpened: 0 
8}
9
10startSyncStore(defaultState).then(async syncStore=> {
11    let state = await syncStore.getState()
12
13    syncStore.onChange((newState, prevState)=> {
14        // Handle state updates here.
15        // If you are using a state store like Redux, you could do something like reduxStore.dispatch({ type: "STORE_UPDATE", newState: newState })
16        state = newState
17
18        console.log('Times popup opened:', state.timesPopupOpened)
19    })
20
21    console.log('Background loaded! state: ', state)
22})

Popup, options or content scripts can then be set up to store and receive changes:

1// popup.js
2
3import { startSyncStore } from "webext-sync"
4
5startSyncStore().then(async syncStore=> {
6    let state = await syncStore.getState()
7    syncStore.onChange((newState, prevState)=> {
8        // Handle state updates here.
9        // If you are using a state store like Redux, you could do something like reduxStore.dispatch({ type: "STORE_UPDATE", newState: newState })
10        state = newState
11    })
12
13    console.log('Popup loaded! state:', state)
14
15    syncStore.setState({ timesPopupOpened: state.timesPopupOpened+1 })
16})