redux-webextension
v1.4.0
Published
Connect to a Redux store in a WebExtension background page
Downloads
5
Maintainers
Readme
redux-webextension
redux-webextension
makes a Redux store in the background page of a WebExtension based browser extension available to other components of the extension.
Installation
$ npm install react-webextension --save
Usage
In your extension background page, create a Redux store as usual and then call exposeStore
to make it available to other parts of the extension:
import { createStore } from "redux";
import { exposeStore } from "redux-webextension";
import { reducer } from "./yourReducers.js";
const store = createStore(reducer);
exposeStore(store);
From your content scripts, extension popups, etc., call connectStore
to return a function that matches the Redux createStore
API. The return value of this function differs slightly in that rather than returning a Store directly, it returns a Promise
that resolves to an object conforming to the Redux Store API that can be used directly or with bindings such as react-redux
:
import { connectStore } from "redux-webextension";
let createStore = connectStore();
createStore().then(function(store) {
store.subscribe(() => {
console.log("New state:", store.getState());
});
store.dispatch({ action: "DO_SOMETHING" });
});
Disconnect Handling
exposeStore
can be passed a third argument, a callback which is fired when the port disconnects. This can be used to perform any necessary state cleanup. e.g.
import { createStore } from "redux";
import { exposeStore } from "redux-webextension";
import { reducer } from "./yourReducers.js";
function cleanupState(port, store) {
store.dispatch({ action: "CLEANUP_STATE", port_name: port.name });
}
const store = createStore(reducer);
exposeStore(store, null, cleanupState);
Example
See the example extension in the example
directory. To run it, ensure you have Firefox Developer edition installed, and then:
$ cd example
$ npm install
$ npm run-script start
Release History
- 1.0.0
- Initial release
Meta
Gabriel Gironda, HeavySet – [email protected]
Distributed under the MIT license. See LICENSE
for more information.
https://github.com/heavyset/react-webextension
Contributing
- Fork it (https://github.com/heavyset/react-webextension/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request