Open Source Ecosystems

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

Intro
Features
Structure
Getting started
- Chrome
- Firefox
Install dependency
- For root
- For module
Community
Reference
Star History
Contributors

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(Rollup) & Turborepo.

Features

Getting started:

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 and extensionName in messages.json file in packages/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:

Run:
- Dev: pnpm dev (On windows, you should run as administrator. (Issue#456)
- Prod: pnpm build
Open in browser - chrome://extensions
Check - Developer mode
Find and Click - Load unpacked extension
Select - dist folder at root

For Firefox:

Run:
- Dev: pnpm dev:firefox
- Prod: pnpm build:firefox
Open in browser - about:debugging#/runtime/this-firefox
Find and Click - Load Temporary Add-on...
Select - manifest.json from dist folder at root

You have to do it on every browser launch.

Install dependency for turborepo:

For root:

Run pnpm i <package> -w

For module:

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) to ImportMetaEnv
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 add envDir: '.' 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

ChromeExtension

Main app with background script, manifest

manifest.js - manifest for chrome extension
src/background - background script for chrome
extension (background.service_worker in
manifest.json)
public/content.css - content css for user's page injection

Packages

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-server
shared - shared code for entire project. (types, constants, custom hooks, components, etc.)
storage - helpers for storage easier integration with, e.g local, session storages
tailwind-config - shared tailwind config for entire project
tsconfig - shared tsconfig for entire project
ui - here's a function to merge your tailwind config with global one, and you can save components here
vite-config - shared vite config for entire project
zipper - By pnpm zip you can pack dist folder into extension.zip inside newly created dist-zip
e2e - By pnpm e2e you can run end to end tests of your zipped extension on different browsers