mirror of
https://github.com/LukasDzenk/whatsapp-notification-sound-extension.git
synced 2026-05-28 14:07:31 +00:00
No description
- TypeScript 57.6%
- HTML 19.5%
- JavaScript 11.1%
- SCSS 10.3%
- CSS 1%
- Other 0.5%
| .github/workflows | ||
| marketing | ||
| public | ||
| scripts | ||
| src | ||
| test-utils | ||
| utils | ||
| .eslintrc | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierrc | ||
| jest.config.js | ||
| LICENSE | ||
| manifest.ts | ||
| package.json | ||
| pnpm-lock.yaml | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
Chrome Extension Boilerplate with
React + Vite + TypeScript
This project is listed in the Awesome Vite
Adding a new mp3
- Add the mp3 file to the
src/assets/audiofolder - Add import to content script as well as mapping object.
Table of Contents
Intro
This boilerplate is made for creating chrome extensions using React and Typescript.
The focus was on improving the build speed and development experience with Vite.
Features
- React 18
- TypeScript
- Jest
- React Testing Library
- Vite
- SASS
- ESLint
- Prettier
- Chrome Extension Manifest Version 3
- HMR(incomplete)
Installation
Procedures
- Clone this repository.
- Change
nameanddescriptionin package.json => Auto synchronize with manifest - Run
pnpm install(check your node version >= 16.6, recommended >= 18) - Run
pnpm dev - Load Extension on Chrome
- Open - Chrome browser
- Access - chrome://extensions
- Check - Developer mode
- Find - Load unpacked extension
- Select -
distfolder in this project (after dev or build)
- If you want to build in production, just run
pnpm build.
The Browse tab searches the Freesound library
(~500k CC-licensed clips) using the project's pre-configured API token. If
you fork this extension and want your own quota, replace the API_KEY
constant in src/pages/popup/freesound.ts with a token from
https://freesound.org/apiv2/apply/.
Screenshots
New Tab
Popup
Documents
Thanks To
| Jetbrains | Jackson Hong |
|---|---|
![]() |
