Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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

About

Replay Google Slides

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.