Browser App and Extension Boilerplate using Redux Actions

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 and Redux, just use the src/app boilerplate. If you need some extension or Chrome app customizations, use src/browser/ boilerplates.

The app example is edited from Redux Counter example using Redux Persist, based on React Chrome Extension Boilerplate.

Structure

• browser-redux-sync: states syncing module.
• browser-redux-bg: messaging module - send redux actions (from popup, windows or inject pages) to be called in the background by their function name.
• src/app: React cross-browser application.
• src/browser: sources for the extension and Chrome app.
• test/app: tests for Redux actions and reducers, and for React components (using Legit Tests).
• test/chrome: tests for Chrome app and extension (using chromedriver, selenium-webdriver).

Included

• react
• redux
• react-redux
• redux-persist
• redux-devtools
• redux-logger
• redbox-react
• react-chrome-extension-boilerplate
• webpack
• react-transform-hmr
• react-transform-catch-errors
• babel
• babel-plugin-react-transform
• gulp

Installation

# required node.js/io.js
# clone it
npm install

Development

# build files to './dev'
# watch files change
# start WebpackDevServer
npm run dev

You can load unpacked extensions with ./dev.

React/Flux hot reload

This boilerplate uses Webpack and react-transform, and use Redux. You can hot reload by editing related files of Popup & Window. If the inject page is on https (like https://github.com), click the 'shield' icon on the Chrome address bar to allow loading http://localhost there (after making any changes in dev mode), so hot reload can work for that page.

Build extension

# build files to './build/extension'
npm run build:extension

Build app

# build files to './build/app'
npm run build:app

Build firefox extension

# build files to './build/firefox'
npm run build:firefox

Note that it's not possible for now to load Firefox extensions from local directories, so use npm run compress:firefox instead to generate an xpi file.

Build & Compress ZIP file

# compress extension's build folder to extension.zip
npm run compress:extension

# compress app's build folder to app.zip
npm run compress:app

# compress firefox extension's build folder to firefox.xpi
npm run compress:firefox

Load

• Load the extension to Chrome.
• Launch your Chrome app.
• Firefox: Prerequisites, Installing.

Test

# test app
npm run test:app

# start Chromedriver for testing with Chrome
npm run before:test:chrome

# test Chrome extension
npm run test:chrome:extension

# test Chrome app
npm run test:chrome:app

# test Chrome extension and app
npm run test:chrome

# test everything
npm test

Roadmap

• [x] Chrome app
• [x] Chrome extension
• [x] Firefox extension (see the current status)
• [ ] Safari extension (based on Chrome to Safari port)

LICENSE

MIT