Skip to content
Boilerplate for Chrome Extension React.js project
Branch: master
Clone or download
HoldenCa and jhen0409 Migration to webpack 2 (#92)
* Migration to webpack 2

* Migration to webpack 2

* Update webpack-httpolyglot-server to v0.3.0
Latest commit 81284bb Feb 3, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Fix extension compose usage, fixes #54 Nov 13, 2016
chrome Jade -> Pug Nov 2, 2016
scripts Jade -> Pug Nov 2, 2016
test Migration to webpack 2 (#92) Feb 3, 2018
webpack Migration to webpack 2 (#92) Feb 3, 2018
.babelrc
.eslintrc Update dependencies / update eslint rules Nov 2, 2016
.gitignore Remove gulp compress, use require('crx') instead Feb 11, 2016
.travis.yml Migration to yarn for CI (#53) Nov 10, 2016
LICENSE
README.md Adding in instructions to allow local development with inject page (#55) Dec 15, 2016
appveyor.yml Migration to yarn for CI (#53) Nov 10, 2016
package.json Migration to webpack 2 (#92) Feb 3, 2018
yarn.lock Migration to webpack 2 (#92) Feb 3, 2018

README.md

React Chrome Extension Boilerplate

Build Status Build status: Windows NPM version Dependency Status devDependency Status

Boilerplate for Chrome Extension React.js project.

Features

Examples

The example is edited from Redux TodoMVC example.

Popup

Popup

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

Window

Window

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(https://github.com/*) if you visit.

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

  • 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

# 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

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

LICENSE

MIT

You can’t perform that action at this time.