Simple boilerplate and library for building Chrome apps and cross-browser extensions (support for Firefox and Safari will come later) that use Redux actions instead of messaging.
Redux states are synced between background, inject page, app window, extension popup and badge.
The developing is the same as for the web apps with React (optional) and Redux, just use the src/app boilerplate. If you need some extension or Chrome app customizations, use src/browser/ boilerplates. A simple example will be injected on the bottom of https://github.com/* pages (change arrowURLs in src/browser/extension/background/inject.js and add to permissions in extension's manifest).
The example is edited from Redux Counter example using Redux Persist, based on React Chrome Extension Boilerplate.
- react
- redux
- react-redux
- redux-persist
- redux-devtools
- redux-logger
- redbox-react
- react-chrome-extension-boilerplate
- webpack
- react-transform-webpack-hmr
- react-transform-catch-errors
- babel
- babel-plugin-react-transform
- gulp
# required node.js/io.js
# clone it
npm install# build files to './dev'
# watch files change
# start WebpackDevServer
npm run devYou can load unpacked extensions with ./dev.
This boilerplate uses Webpack and react-transform, and use Redux. You can hot reload by editing related files of Popup & Window.
# build files to './build/extension'
npm run build:extension# build files to './build/app'
npm run build:app# compress extension's build folder to extension.zip
npm run compress:extension
# compress app's build folder to app.zip
npm run compress:app- Add tests (using sinon-chrome)
- Firefox extension (according to wiki.mozilla.org/WebExtensions)
- Safari extension (based on Chrome to Safari port)