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/extension/background/contextMenus.js.

Inject page

The background script will load content script, and content script will inject page script into context of currently opened page. A open TodoApp button will be injected top of page(https://github.com/*) if you visit.

• Content script can only manipulate DOM of current page. (It is running on different context of currently opened page)

• If you want to interact with a javascript code running in currently opened page, you will have to inject page script into it from content script.

• If you are receiving the error message Failed to load resource: net::ERR_INSECURE_RESPONSE, you need to allow invalid certificates for resources loaded from localhost. You can do this by visiting the following URL: chrome://flags/#allow-insecure-localhost and enabling Allow invalid certificates for resources loaded from localhost.

Installation

# clone it
$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git

# Install dependencies
$ npm install

Development

Running scripts

Two seprates command are provided for developing Chrome extension.

dev-r

# build asset & html files to './dev'
# start webpack development server for background, window, popup script.
$ npm run dev-r

If you are developing Chrome extension that uses backgroun script, window, and popup, then running dev-r will be enough.

dev-s

# build content & page script and watch for their changes.
$ npm run dev-s

If you are developing Chrome extension that uses content and page script, you have to run dev-r command first, then run dev-s command from different terminal window.

How to load chrome extension?

• 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 and background scripts.

• Content script & page script (injected by content script) cannot use hot reload, because many web sites use strict Content Security Policy (CSP) which allows loading resources from only specified domains. When Chrome Extension's content script & page script run on these web sites, loading from webpack-dev-server (http://localhost:3000) is not possible.

Using Redux DevTools Extension

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

Build

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

Compress

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

Options

If you want to build crx file (auto update), please provide options, and add update.xml file url in [manifest.json](https://developer.chrome.com/extensions/autoupdate#update_url 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.

Test

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

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

LICENSE

MIT