React Chrome Extension Boilerplate

Boilerplate for Chrome extension React.js project.

Included

• babel
• react
• redux
• react-redux
• redux-devtools
• redbox-react
• webpack
• react-transform-hmr
• react-transform-catch-errors
• babel-plugin-react-transform
• gulp-
  • jade
  • ...
• classnames
• todomvc-app-css
• ...

Example

The example is edited from Redux TodoMVC example.

Popup

The todos state will be saved to chrome.storage.local.

Window

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

If you want Packaged app, You can edit manifest.{env}.json.

...
  "app": {
    "launch": {
      "local_path": "app.html",
      "container": "panel",
      "width": 800,
      "height": 500
    }
  },
...

and remove browser_action.

Inject page

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

Installation

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

# or npm way
npm install react-chrome-extension-boilerplate --dev

Development

• Run script

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

• Allow https://localhost:3000 connections (Because injectpage injected Github(https) pages, so webpack-dev-server procotol must be https.)
• Load unpacked extensions with ./dev

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.

Build

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

Build & Compress

# compress build folder to react-crx.zip & .crx
npm run compress

You can add custom key.pem in build folder.

Test

• test/app: React components, Redux actions & reducers tests
• test/e2e: E2E tests (use chromedriver, selenium-webdriver)

npm run test-crdv  // start chromedriver
npm test

LICENSE

MIT