Boilerplate for Chrome extension React.js project
Last updated 3 years ago by xiaobu .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-redux-chrome-extension-boilerplate 
SYNC missed versions from official npm registry.

React Chrome Extension Boilerplate

Boilerplate for Chrome Extension React.js project. With synced actions and reducers support!

This is a forked project, the goal is to build a chrome plugin boilerplate with synced and perfomant redux stores.


  • Simple React/Redux examples of Chrome Extension Window & Popup & Inject pages
  • Actions can be synced across active windows! (Insipred by react-chrome-redux)
  • Hot reloading React/Redux (Using Webpack and React Transform)
  • Write code with ES2015+ syntax (Using Babel)
  • E2E tests of Window & Popup & Inject pages (Using Chrome Driver, Selenium Webdriver)


The example is edited from Redux TodoMVC example.

Synced Actions


You can define which actions will be synced by simply add a key on your action



The todos state will be saved to



The context menu is created by chrome/extension/background/contextMenus.js.

Inject page

The inject script is being run by chrome/extension/background/inject.js. A simple example will be inject bottom of page(*) if you visit.


# clone it
$ git clone

# Install dependencies
$ npm install


  • Run script
# build files to './dev'
# start webpack development server
$ npm run dev
  • If you're developing Inject page, please allow https://localhost:3000 connections. (Because injectpage injected GitHub (https) pages, so webpack server procotol must be https.)
  • Load unpacked extensions with ./dev folder.

React/Redux hot reload

This boilerplate uses Webpack and react-transform, and use Redux. You can hot reload by editing related files of Popup & Window & Inject page.

Using Redux DevTools Extension

You can use redux-devtools-extension on development mode.


# build files to './build'
$ npm run build


# compress build folder to {}.zip and crx
$ npm run build
$ npm run compress -- [options]


If you want to build crx file (auto update), please provide options, and add update.xml file url in [manifest.json]( manifest.json).

  • --app-id: your extension id (can be get it when you first release extension)
  • --key: your private key path (default: './key.pem')
    you can use npm run compress-keygen to generate private key ./key.pem
  • --codebase: your crx file url

See autoupdate guide for more information.


# lint
$ npm run lint
# test/app
$ npm test
$ npm test -- --watch  # watch files
# test/e2e
$ npm run build
$ npm run test-e2e



Current Tags

  • 0.10.3                                ...           latest (3 years ago)

4 Versions

  • 0.10.3                                ...           3 years ago
  • 0.10.2                                ...           3 years ago
  • 0.10.1                                ...           3 years ago
  • 0.10.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (7)
Dependents (0)

Copyright 2014 - 2016 © |