No description
  • TypeScript 57.6%
  • HTML 19.5%
  • JavaScript 11.1%
  • SCSS 10.3%
  • CSS 1%
  • Other 0.5%
Find a file
Lukas Dzenkauskas 0b8abf71cd -
2026-05-09 22:36:12 +03:00
.github/workflows - 2026-05-06 21:43:10 +03:00
marketing Update marketing landing install CTAs to Chrome Web Store 2026-05-07 13:15:48 +03:00
public - 2026-05-09 22:36:12 +03:00
scripts - 2026-05-07 14:31:37 +03:00
src - 2026-05-09 22:30:53 +03:00
test-utils - 2026-05-06 21:43:10 +03:00
utils encoding / decoding audio base64 2023-02-12 04:32:19 +02:00
.eslintrc initial 2023-02-11 21:46:56 +02:00
.gitignore - 2026-05-06 22:35:22 +03:00
.nvmrc initial 2023-02-11 21:46:56 +02:00
.prettierrc encoding / decoding audio base64 2023-02-12 04:32:19 +02:00
jest.config.js - 2026-05-06 21:43:10 +03:00
LICENSE initial 2023-02-11 21:46:56 +02:00
manifest.ts Tighten web-accessible resources to audio assets only 2026-05-09 22:34:39 +03:00
package.json 0.0.5 2026-05-09 22:35:00 +03:00
pnpm-lock.yaml - 2026-05-06 22:35:22 +03:00
README.md - 2026-05-06 22:35:22 +03:00
tsconfig.json initial 2023-02-11 21:46:56 +02:00
vite.config.ts - 2026-05-09 22:30:53 +03:00

logo

Chrome Extension Boilerplate with
React + Vite + TypeScript

GitHub action badge

This project is listed in the Awesome Vite

Adding a new mp3

  1. Add the mp3 file to the src/assets/audio folder
  2. 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

Installation

Procedures

  1. Clone this repository.
  2. Change name and description in package.json => Auto synchronize with manifest
  3. Run pnpm install (check your node version >= 16.6, recommended >= 18)
  4. Run pnpm dev
  5. Load Extension on Chrome
    1. Open - Chrome browser
    2. Access - chrome://extensions
    3. Check - Developer mode
    4. Find - Load unpacked extension
    5. Select - dist folder in this project (after dev or build)
  6. 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

popup

Documents


Thanks To

Jetbrains Jackson Hong
JetBrains Logo (Main) logo. Jackson Hong

Jonghakseo