https://github.com/aeksco/react-typescript-web-extension-starter
:desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire:
https://github.com/aeksco/react-typescript-web-extension-starter
brave chrome-extension eslint extension-popup google-chrome jest microsoft-edge-extension mozilla-firefox opera-extension prettier react storybook tailwindcss typescript webpack
Last synced: 8 days ago
JSON representation
:desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire:
- Host: GitHub
- URL: https://github.com/aeksco/react-typescript-web-extension-starter
- Owner: aeksco
- License: mit
- Created: 2020-01-01T01:14:35.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T09:32:39.000Z (10 months ago)
- Last Synced: 2025-04-01T13:48:56.661Z (16 days ago)
- Topics: brave, chrome-extension, eslint, extension-popup, google-chrome, jest, microsoft-edge-extension, mozilla-firefox, opera-extension, prettier, react, storybook, tailwindcss, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 2.94 MB
- Stars: 950
- Watchers: 12
- Forks: 85
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- my-awesome-list - react-typescript-web-extension-starter
README
[]()
[]()
[]()
[](https://github.com/aeksco/react-typescript-web-extension-starter/graphs/contributors)
[](https://github.com/aeksco/react-typescript-web-extension-starter/blob/main/LICENSE)
[](https://github.com/aeksco/react-typescript-web-extension-starter/issues)
[](https://github.com/aeksco/react-typescript-web-extension-starter/commits/master)
[]()
[](http://makeapullrequest.com)[](http://hits.dwyl.com/aeksco/react-typescript-web-extension-starter)
[](https://twitter.com/intent/tweet?text=https://github.com/aeksco/react-typescript-web-extension-starter)
[](https://twitter.com/aeksco)
:desktop_computer: A Web Extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Jest, TailwindCSS, & Webpack. Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.
**Getting Started**
Run the following commands to install dependencies and start developing
```
yarn install
yarn dev
```**Scripts**
- `yarn dev` - run `webpack` in `watch` mode
- `yarn storybook` - runs the Storybook server
- `yarn build` - builds the production-ready unpacked extension
- `yarn test -u` - runs Jest + updates test snapshots
- `yarn lint` - runs EsLint
- `yarn prettify` - runs PrettierLoading the extension in Google Chrome
In [Google Chrome](https://www.google.com/chrome/), open up [chrome://extensions](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.
Loading the extension in Brave
In [Brave](https://brave.com/), open up [brave://extensions](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.
Loading the extension in Mozilla Firefox
In [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), open up the [about:debugging](about:debugging) page in a new tab. Click the `This Firefox` link in the sidebar. One the `This Firefox` page, click the `Load Temporary Add-on...` button and select the `manifest.json` from the `dist` directory in this repository - your extension should now be loaded.
Loading the extension in Microsoft Edge
In [Microsoft Edge](https://www.microsoft.com/en-us/edge), open up [edge://extensions](edge://extensions) in a new tab. Make sure the `Developer Mode` checkbox in the lower-left corner is turned on. Click `Load unpacked` and select the `dist` directory in this repository - your extension should now be loaded.
**Notes**
- This project is a [repository template](https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) - click the `Use this template` button to use this starter codebase for your next project.
- 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 the `Format on Save` setting turned on.
- Example icons courtesy of [Heroicons](https://heroicons.com/).
- Includes Storybook configured to work with React + TypeScript. Note that it maintains its own `webpack.config.js` and `tsconfig.json` files. See example story in `src/components/hello/__tests__/hello.stories.tsx`
- Includes a custom mock for the [webextension-polyfill-ts](https://github.com/Lusito/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**
- [React](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/)
- [Jest](https://jestjs.io)
- [Eslint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [Webpack](https://webpack.js.org/)
- [Babel](https://babeljs.io/)
- [TailwindCSS](https://tailwindcss.com/)
- [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)**Misc. References**
- [Chrome Extension Developer Guide](https://developer.chrome.com/extensions/devguide)
- [Firefox Extension Developer Guide](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)
- [Eslint + Prettier + Typescript Guide](https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb)**Notable forks**
- [capaj](https://github.com/capaj/react-typescript-web-extension-starter) - Chakra-ui instead of TailwindCSS, Storybook removed
- [DesignString](https://github.com/DesignString/react-typescript-web-extension-starter) - Vite Js instead of Webpack