Chrome Extension Boilerplate for React.js
.
├── gulpfile.babel.js # Build Tasks
├── manifest.json # Chrome Extension settings
├── package.json # dependencies, npm conf
├── src
│ ├── client.jsx # main app
│ ├── images # app images, icons
│ ├── index.html # main app html
│ ├── pages # Application pages
│ ├── routes.jsx # routing list
│ ├── store # Redux store
│ │ ├── actions # Events (for example: add task)
│ │ │ └── index.js
│ │ ├── constants # Event Constants
│ │ │ └── ActionTypes.js
│ │ └── reducers # manage state changes
│ │ ├── index.js
│ └── styles # App style
├── tests # unit tests
├── webpack.debug.js # dev. webpack conf
├── webpack.event.js # prod webpack conf
└── webpack.popup.js # prod webpack conf
$ git clone git@github.com:bahattincinic/react-chrome-extension-boilerplate.git
$ cd react-chrome-extension-boilerplate
This will install both run-time project dependencies and developer tools listed in package.json file.
For Development:
$ gulp
$ npm run dev-server
For Production:
$ gulp --production
And webpack bundle will be created.
When any changes to the source file is made, bundle will be generated.
For Development:
$ gulp watch
For Production:
$ gulp watch --production
Lint your Javascript with EsLint
$ npm run lint
install flow
$ brew install flow
To run Flow
$ npm run flow
To run the test suite:
$ npm run test
To generate coverage report:
$ npm run test:coverage
Only Production build can be run in chrome extension.
- Go to the
chrome://extensions
- Make sure developer mode is enabled.
- Click on
Load unpacked extension...
- Select
build
folder.
- Development build only works on browser.
- Production build only works on chrome extension.
react-chrome-redux
does not work without production build.
popup.js:
Page UIevent.js
Background Job. It manages Redux states.content.js
Chrome only accept dom manipulation from content.js.