react-typescript-chrome-extension-starter v1.8.0
H
Getting Started
Run the following commands to install dependencies and start developing
yarn install
yarn dev
Scripts
yarn dev
- runwebpack
inwatch
modeyarn storybook
- runs the Storybook serveryarn build
- builds the production-ready unpacked extensionyarn test -u
- runs Jest + updates test snapshotsyarn lint
- runs EsLintyarn prettify
- runs Prettier
In Google Chrome, open up chrome://extensions in a new tab. Make sure the Developer Mode
checkbox in the upper-right corner is turned on. Click Load unpacked
and select the dist
directory in this repository - your extension should now be loaded.
In Brave, open up brave://extensions in a new tab. Make sure the Developer Mode
checkbox in the upper-right corner is turned on. Click Load unpacked
and select the dist
directory in this repository - your extension should now be loaded.
In Mozilla Firefox, open up the about:debugging page in a new tab. Click the Load Temporary Add-on...
button and select the manfiest.json
from the dist
directory in this repository - your extension should now be loaded.
Notes
Includes ESLint configured to work with TypeScript and Prettier.
Includes tests with Jest - note that the
babel.config.js
and associated dependencies are only necessary for Jest to work with TypeScript.Recommended to use
Visual Studio Code
with theFormat on Save
setting turned on.Example icons courtesy of FontAwesome.
Microsoft Edge is not currently supported.
Includes Storybook configured to work with React + TypeScript. Note that it maintains its own
webpack.config.js
andtsconfig.json
files. See example story insrc/components/hello/__tests__/hello.stories.tsx
Includes a custom mock for the webextension-polyfill-ts package in
src/__mocks__
. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.
Built with
Misc. References