Introduction
This package is a basic utility library for building Chrome Extensions with React and Redux. It aims to be as hands-off as possible, allowing developers to integrate it into existing extensions without changing their build process, project structure, etc.
I went over the motivation and architecture in a talk at SoCal React. If you'd rather read than watch the talk, I will discuss the core ideas below.
I'm going to assume that you're familiar with the basics of Chrome Extensions. If you are, then you're familiar with this problem:
Chrome Extensions can be composed of multiple UI-pages and content-scripts. Every time a new tab is launched, a new content-script is injected into the page. Every time a Popup is opened, an entirely new instance of the app within the popup is built. This makes state management particularly painful. The only part of a Chrome Extension which persists with the lifetime of the Chrome browser is the background page (a.k.a the event page).
The Chrome team is very aware of these limitations, and built in the functionality of Message Passing, which allows data to be passed between non-persistent pages (such as content-scripts and popups) and the background page:
This pattern lends itself to a familiar architecture. The UI-pages and content scripts act as UI components, while the background page can be considered the application state store:
Taking this a step further, we can architect our extensions around React for our UI components, and Redux for our application state store.
This package provides the utilities to build Chrome Extensions as described above. It does this through two primary utilities: a Proxy Store and a wrapStore() function.
Proxy Store
A Proxy Store implements the exact API of a Redux store and is meant to be used on UI Components (such as a popup). Providing the exact same API as a Redux store allows it to be used in all of your favorite packages, such as react-redux. The job of the Proxy Store is to pass actions and state changes between UI Components and the background page. Any actions generated by the UI Component will propagate to the background Redux store, and all of the state changes will find their way to every UI Component.
wrapStore()
The wrapStore function is used to wrap the Redux store in the background page with all of the listeners and event handlers needed to communicate with the Proxy Stores running in the UI Components. It does this by working with the Message Passing described earlier, sending state updates and receiving actions from Proxy Stores.
Now that you've got the core idea, you're ready to Get Started.