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 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. (Becauseinjectpage
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.
- --app-id: your extension id (can be get it when you first release extension)
- --key: your private key path (default: './key.pem')
you can usenpm 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 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