Awesome
<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/99cb6303-64e4-4bed-bf3f-35735353e6de" /> <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/a5dbf71c-c509-4c4f-80f4-be88a1943b0a" /> <img alt="Logo" src="https://github.com/user-attachments/assets/99cb6303-64e4-4bed-bf3f-35735353e6de" /> </picture>
<img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://github.com/Jonghakseo/chrome-extension-boilerplate-react-viteFactions&count_bg=%23#222222&title_bg=%23#454545&title=😀&edge_flat=true" alt="hits"/> <a href="https://discord.gg/4ERQ6jgV9a" target="_blank"><img src="https://discord.com/api/guilds/1263404974830915637/widget.png"/></a>
</div>This boilerplate has Legacy version
[!NOTE] This project is listed in the Awesome Vite
[!TIP] Share storage state between all pages
https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c
Table of Contents
- Intro
- Features
- Structure
- Getting started
- Install dependency
- Community
- Reference
- Star History
- Contributors
Intro <a name="intro"></a>
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.
Features <a name="features"></a>
- React18
- TypeScript
- Tailwindcss
- Vite
- Turborepo
- Prettier
- ESLint
- Chrome Extension Manifest Version 3
- Custom I18n Package
- Custom HMR(Hot Module Rebuild) Plugin
- End to End Testing with WebdriverIO
Getting started: <a name="getting-started"></a>
- When you're using Windows run this:
git config --global core.eol lf
git config --global core.autocrlf input
This will change eol(End of line) to the same as on Linux/Mac, without this, you will have conflicts with your teammates with those systems and our bash script won't work
- Clone this repository.
- Change
extensionDescription
andextensionName
inmessages.json
file inpackages/i18n/locales
folder. - Install pnpm globally:
npm install -g pnpm
(check your node version >= 18.19.1)) - Run
pnpm install
And then, depending on needs:
For Chrome: <a name="getting-started-chrome"></a>
- Run:
- Dev:
pnpm dev
(On windows, you should run as administrator. (Issue#456) - Prod:
pnpm build
- Dev:
- Open in browser -
chrome://extensions
- Check -
Developer mode
- Find and Click -
Load unpacked extension
- Select -
dist
folder at root
For Firefox: <a name="getting-started-firefox"></a>
- Run:
- Dev:
pnpm dev:firefox
- Prod:
pnpm build:firefox
- Dev:
- Open in browser -
about:debugging#/runtime/this-firefox
- Find and Click -
Load Temporary Add-on...
- Select -
manifest.json
fromdist
folder at root
You have to do it on every browser launch.</i>
</h3>Install dependency for turborepo: <a name="install-dependency"></a>
For root: <a name="install-dependency-for-root"></a>
- Run
pnpm i <package> -w
For module: <a name="install-dependency-for-module"></a>
- Run
pnpm i <package> -F <module name>
package
- Name of the package you want to install e.g. nodemon
module-name
- You can find it inside each package.json
under the key name
, e.g. @extension/content-script
, you can use only content-script
without @extension/
prefix
Env Variables
- Copy
.example.env
and paste it as.env
in the same path - Add a new record inside
.env
- Add this key with type for value to
vite-env.d.ts
(root) toImportMetaEnv
- Then you can use it with
import.meta.env.{YOUR_KEY}
like with standard Vite Env
If you want to set it for each package independently:
- Create
.env
inside that package - Open related
vite.config.mts
and addenvDir: '.'
at the end of this config - Rest steps like above
Remember you can't use global and local at the same time for the same package(It will be overwritten)
Structure <a name="structure"></a>
ChromeExtension <a name="structure-chrome-extension"></a>
Main app with background script, manifest
manifest.js
- manifest for chrome extensionsrc/background
- background script for chrome extension (background.service_worker
in manifest.json)public/content.css
- content css for user's page injection
Packages <a name="structure-packages"></a>
Some shared packages
dev-utils
- utils for chrome extension development (manifest-parser, logger)i18n
- custom i18n package for chrome extension. provide i18n function with type safety and other validation.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.)storage
- helpers for storage easier integration with, e.g local, session storagestailwind-config
- shared tailwind config for entire projecttsconfig
- shared tsconfig for entire projectui
- here's a function to merge your tailwind config with global one, and you can save components herevite-config
- shared vite config for entire projectzipper
- Bypnpm zip
you can packdist
folder intoextension.zip
inside newly createddist-zip
e2e
- Bypnpm e2e
you can run end to end tests of your zipped extension on different browsers
Pages <a name="structure-pages"></a>
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)content-runtime
- content runtime script this can be inject frompopup
like standardcontent
devtools
- devtools for chrome extension (devtools_page
in manifest.json)devtools-panel
- devtools panel for devtoolsnew-tab
- 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)side-panel
- sidepanel(Chrome 114+) for chrome extension (side_panel.default_path
in manifest.json)
Community <a name="community"></a>
To chat with other community members, you can join the Discord server. You can ask questions on that server, and you can also help others.
Also, suggest new features or share any challenges you've faced while developing Chrome extensions!
Reference <a name="reference"></a>
Star History <a name="star-history"></a>
<a href="https://star-history.com/#Jonghakseo/chrome-extension-boilerplate-react-vite&Date"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date&theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date" /> </picture> </a>Contributors <a name="contributors"></a>
This Boilerplate is made possible thanks to all of its contributors.
<a href="https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/graphs/contributors"> <img width="500px" src="https://contrib.rocks/image?repo=Jonghakseo/chrome-extension-boilerplate-react-vite" alt="All Contributors"/> </a>Special Thanks To
<a href="https://jb.gg/OpenSourceSupport"><img width="40" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" alt="JetBrains Logo (Main) logo."></a> | <a href="https://www.linkedin.com/in/j-acks0n"><img width="40" style="border-radius:50%" src='https://avatars.githubusercontent.com/u/23139754' alt='Jackson Hong'/></a> |
---|
Made by Jonghakseo