Boilerplate for Chrome Extension React.js project.
The example is edited from Redux TodoMVC example.
The todos
state will be saved to chrome.storage.local
.
The context menu is created by chrome/extension/background/contextMenus.js.
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.
# clone it
$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git
# Install dependencies
$ npm install
# build files to './dev'
# start webpack development server
$ npm run dev
https://localhost:3000
connections. (Because injectpage
injected GitHub (https) pages, so webpack server procotol must be https.)./dev
folder.This boilerplate uses Webpack
and react-transform
, and use Redux
. You can hot reload by editing related files of Popup & Window & Inject page.
You can use redux-devtools-extension on development mode.
# build files to './build'
$ npm run build
# compress build folder to {manifest.name}.zip and crx
$ npm run build
$ npm run compress -- [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).
npm run compress-keygen
to generate private key ./key.pem
crx
file urlSee autoupdate guide for more information.
test/app
: React components, Redux actions & reducers teststest/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