React Chrome Extension Boilerplate

Boilerplate for Chrome Extension React.js project.

Features

• Simple React/Redux examples of Chrome Extension Window & Popup & Inject pages
• 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)

Examples

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
# 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 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

Use env DEVTOOLS_EXT=1 to enable redux-devtools-extension:

# Unix-like
DEVTOOLS_EXT=1 npm run dev
# Windows
set DEVTOOLS_EXT=1 && npm run dev

Build

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

Build & Compress

# compress build folder to {manifest.name}.crx
npm run compress

• You can add custom key.pem in main folder.
• If you want autoupdate, you can refer this and edit Gulpfile.

Test

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

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

LICENSE

MIT