A basic TypeScript React Chrome Extension boilerplate that gets you started quickly. It supports TypeScript, JSX, and automatic reloading during development. Jest, ESLint and Prettier included, all bundled using Rollup and rollup-plugin-chrome-extension.
Type this into your terminal:
npx create-react-crxFollow the prompts to setup your Chrome extension project.
Type this into your terminal:
git clone https://github.com/extend-chrome/ts-react-boilerplate.git my-chrome-extension
cd my-chrome-extension
npm install🖌️ Update your package name and version in
package.jsonbefore you get started!
For development with automatic reloading:
npm run startOpen the Extensions Dashboard, enable "Developer mode", click "Load unpacked", and choose the dist folder.
When you make changes in src the background script and any content script will reload automatically.
When it's time to publish your Chrome extension, make a production build to submit to the Chrome Web Store. This boilerplate will use the version in package.json, unless you add a version to src/manifest.json.
Make sure you have updated the name and version of your extension in
package.json.
Run the following line:
npm run buildThis will create a ZIP file with your package name and version in the releases
folder.
Your manifest is at src/manifest.json, and Rollup will bundle any files you
include here. All the filepaths in your manifest should point to files in src.
- Uses Rollup to bundle your extension
- Chrome Extension automatic reloader
- Jest configuration for testing