https://github.com/tdriley/webext-sync

Sync data between a web extension's background, popup, options and content scripts. Works cross-browser, with MV3 and MV2.
https://github.com/tdriley/webext-sync

browser browser-extension extension manifest-v3 mv3 state state-management store sync webextension webextensions

Last synced: about 1 month ago
JSON representation

Sync data between a web extension's background, popup, options and content scripts. Works cross-browser, with MV3 and MV2.

• Host: GitHub
• URL: https://github.com/tdriley/webext-sync
• Owner: tdriley
• License: mit
• Created: 2024-01-06T23:39:13.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-01-22T23:31:51.000Z (11 months ago)
• Last Synced: 2024-11-03T22:02:32.436Z (about 2 months ago)
• Topics: browser, browser-extension, extension, manifest-v3, mv3, state, state-management, store, sync, webextension, webextensions
• Language: JavaScript
• Homepage:
• Size: 77.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](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:

```javascript

// manifest.json

"permissions": [

    "storage"

],

```

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.

```javascript

// background.js

import { startSyncStore } from "webext-sync"

const defaultState = {

    storeVersion: 1, // Not required, but it is probably a good idea to version your store

    timesPopupOpened: 0 

}

startSyncStore(defaultState).then(async syncStore=> {

    let state = await syncStore.getState()

    syncStore.onChange((newState, prevState)=> {

        // Handle state updates here.

        // If you are using a state store like Redux, you could do something like reduxStore.dispatch({ type: "STORE_UPDATE", newState: newState })

        state = newState

        console.log('Times popup opened:', state.timesPopupOpened)

    })

    console.log('Background loaded! state: ', state)

})

```

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

```javascript

// popup.js

import { startSyncStore } from "webext-sync"

startSyncStore().then(async syncStore=> {

    let state = await syncStore.getState()

    syncStore.onChange((newState, prevState)=> {

        // Handle state updates here.

        // If you are using a state store like Redux, you could do something like reduxStore.dispatch({ type: "STORE_UPDATE", newState: newState })

        state = newState

    })

    console.log('Popup loaded! state:', state)

    syncStore.setState({ timesPopupOpened: state.timesPopupOpened+1 })

})

```