Getting Started

Installation

This package is available on npm:

npm install --save webext-redux

Basic Usage

As described in the introduction, there are two pieces to a basic implementation of this package.

1. Add the Proxy Store to a UI Component, such as a popup

// popover.js

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'webext-redux';

import App from './components/app/App';

const store = new Store();

// wait for the store to connect to the background page
store.ready().then(() => {
  // The store implements the same interface as Redux's store
  // so you can use tools like `react-redux` no problem!
  render(
    <Provider store={store}>
      <App/>
    </Provider>
    , document.getElementById('app'));
});

2. Wrap your Redux store in the background page with wrapStore()

// background.js

import {createWrapStore} from 'webext-redux';

const store; // a normal Redux store

const wrapStore = createWrapStore()
wrapStore(store);

That's it! The dispatches called from UI component will find their way to the background page no problem. The new state from your background page will make sure to find its way back to the UI components.

Note

createWrapStore() sets up listeners for browser messaging. In MV3, it must be registered synchronously when the service worker starts. This ensures dispatch() calls that wake the service worker are received. Messages are queued internally until wrapStore() is called, and the events can be dispatched to the store.

---

The setup above handles basic actions and state updates. To handle more complex async actions and action responses, check out Advanced Usage.

If you want to dive into the details of this package, check out the API.