Boilerplate to create Chrome extensions using TypeScript + ReactJS
- TypeScript support
- Source path aliases support
- React support
- CSS modules with scss/sass support
- Prettier
- Linting
- Build time constants (including git revisions and secrets)
- Build command creates a Web Store-ready zip
- CRX Package building with a given .pem key
- Auto publishing to the Chrome Web Store using the Web Store Publish API
- Generate all icon sizes from the manifest data and only one big icon image
Supposing we want to create a new project based on this boilerplate, into PROJECT_FOLDER
:
- Clone this repository
git clone https://github.com/danikaze/chrome-extension-boilerplate.git PROJECT_FOLDER
- Change the origin to the new repository
cd PROJECT_FOLDER
git remote rm origin
git remote add origin YOUR_REMOTE_REPOSITORY.git
git push -u origin master
-
Edit the
name
,description
andversion
if needed in [package.json]. -
Edit the
name
,short_name
,description
andbrowser_action.default_title
fields in manifest.json. It's also recommended to reduce the needed permissions as much as possible. Theversion
field will be automatically sync'ed with the one inpackage.json
in each build. -
Install the needed packages
npm install
- TypeScript path aliases
In case that custom path aliases are required:
- For path aliases to be available in the main process, edit the main/tsconfig.json file.
- For path aliases to be available in the renderer process, edit the renderer/tsconfig.json file.
- Add the union of all the added aliases to the
no-implicit-dependencies
rule in the tslint.yaml file.
This application is set to render the component as an entry point of your application.
Some constants defined at build time are available, however others can be added as well. Check this document for more information.
To develop, just execute
npm run dev
Source code will be generated in the release/app folder and it can be imported as an unpacked extension in chrome.
Execute
npm run build
The resulting zip file will be placed in the [release/dist] folder and it can be uploaded to the Chrome Store dashboard.