Chrome extension boilerplate with React and TypeScript.
- Fast build powered by esbuild
- Auto Reloading
- Watch mode
If you are interested in using create-react-app, see also mpppk/chrome-ext-with-cra-ts.
It includes cra, but take more build-time than this boilerplate.
Build your extension, then click 「LOAD UNPACKED」 button on chrome://extensions
, then select dist
dir.
(See https://developer.chrome.com/extensions/getstarted)
yarn build
transpile and bundle your TypeScript sources to dist/src
, then reload chrome extension and current tab.
$ yarn build
You can enter the watch mode by running yarn watch
.
$ yarn watch
build src/background_script.ts
build src/content_script.tsx
build src/hot_reload.ts
build src/options_page.tsx
build src/content_script.tsx
Thanks to src/hot_reload.ts (inspired by xpl/crx-hotreload), if you execute yarn build
or yarn watch
, Chrome extension and active tab are reloaded automatically.
You can also reload actively by running yarn reload
.
$ yarn reload