React + Flow + Webpack + Chrome Extension Boilerplate
Fork of https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate /w React
Notable Changes
- Webpack changed to be more configuration/CLI based
- Support for Flow
- Standardized ES2015 syntax across entire project
- Production build will automatically zip the dist directory
Installaton
- Clone the repository.
yarn install
- Change the package's name and description on
package.json
. - Change the name of your extension on
src/manifest.json
. - Run
npm run start
- Load your extension on Chrome following:
- Access
chrome://extensions/
- Check
Developer mode
- Click on
Load unpacked extension
- Select the
dist
folder.
- Access
Structure
All extension development code must be placed in src
folder, including the extension manifest.
Custom Webpack Dev Server Port
PORT=3000 npm run start
Packing
npm run build
./dist
will now contain the unpackaged build
./zip
will contain the package build to be submitted to the Chrome Web Store
Secrets
Files containing secret keys are resolved as ./secrets.<NODE_ENV>.js
:
./secrets.development.js
export default { key: '123' };
./secrets.production.js
export default { key: '234' };
./src/popup.js
import secrets from 'secrets';
ApiCall({ key: secrets.key });
// npm run start => '123'
// npm run build => '234'
Files with name secrets.*.js
already are ignored on the repository