https://github.com/xdlrt/web-extension-starter
About 🖥️ Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Vitest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera 🔥
https://github.com/xdlrt/web-extension-starter
chrome-extension eslint prettier react storybook tailwindcss typescript vitest webpack
Last synced: 3 months ago
JSON representation
About 🖥️ Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Vitest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera 🔥
- Host: GitHub
- URL: https://github.com/xdlrt/web-extension-starter
- Owner: xdlrt
- License: mit
- Created: 2023-05-21T03:33:17.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-21T06:46:17.000Z (about 3 years ago)
- Last Synced: 2025-03-27T01:16:06.496Z (over 1 year ago)
- Topics: chrome-extension, eslint, prettier, react, storybook, tailwindcss, typescript, vitest, webpack
- Language: TypeScript
- Homepage:
- Size: 528 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[]()
[]()
[]()
[](https://github.com/xdlrt/web-extension-starter/graphs/contributors)
[](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
[](https://github.com/xdlrt/web-extension-starter/issues)
[](https://github.com/xdlrt/web-extension-starter/commits/master)
[]()
[](http://makeapullrequest.com)
[](http://hits.dwyl.com/xdlrt/web-extension-starter)
[](https://twitter.com/intent/tweet?text=https://github.com/xdlrt/web-extension-starter)
[](https://twitter.com/yeshu_in_future)
:desktop_computer: A Web Extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Vitest, TailwindCSS, & Webpack. Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.
**Getting Started**
Run the following commands to install dependencies and start developing
```
pnpm install
pnpm dev
```
**Scripts**
- `pnpm dev` - run `webpack` in `watch` mode
- `pnpm storybook` - runs the Storybook server
- `pnpm build` - builds the production-ready unpacked extension
- `pnpm test` - runs Vitest
- `pnpm lint` - runs EsLint
- `pnpm prettify` - runs Prettier
Loading 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 `manfiest.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 Vitest - note that the `babel.config.js` and associated dependencies are only necessary for Vitest to work with TypeScript.
- 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/)
- [Vitest](https://vitest.dev/)
- [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)