[!TIP] This project is listed in the Awesome Vite
[!IMPORTANT] Share storage state between every page
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(Rollup) & Turborepo.
extensionDescription
and extensionName
in messages.json
file.npm install -g pnpm
(check your node version >= 18.12.0)pnpm install
pnpm dev
pnpm build
chrome://extensions
Developer mode
Load unpacked extension
dist
folder at rootpnpm dev:firefox
pnpm build:firefox
about:debugging#/runtime/this-firefox
Load Temporary Add-on...
manifest.json
from dist
folder at rootMain app with background script, manifest
manifest.js
- manifest for chrome extensionlib/background
- background script for chrome
extension (background.service_worker
in
manifest.json)public/content.css
- content css for user's page injectionSome shared packages
dev-utils
- utils for chrome extension development (manifest-parser, logger)hmr
- custom HMR plugin for vite, injection script for reload/refresh, hmr dev-servershared
- shared code for entire project. (types, constants, custom hooks, components, etc.)tsconfig
- shared tsconfig for entire project.content
- content script for chrome
extension (content_scripts
in manifest.json)content-ui
- content script for render UI in
user's page (content_scripts
in manifest.json)devtools
- devtools for chrome
extension (devtools_page
in manifest.json)devtools-panel
- devtools panel for devtoolsnewtab
- new tab for chrome
extension (chrome_url_overrides.newtab
in
manifest.json)options
- options for chrome extension (options_page
in manifest.json)popup
- popup for chrome
extension (action.default_popup
in
manifest.json)sidepanel
- sidepanel(Chrome 114+) for chrome
extension (side_panel.default_path
in manifest.json)This Boilerplate is made possible thanks to all of its contributors.
![]() |
---|
Made by Jonghakseo