Chrome Extension Boilerplate with
SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod

Intro

Important

This is updated version of solid-chrome-extension-template. All dependencies are updated. Jest replaced with Vitest.

This boilerplate is made for creating chrome extensions using SolidJS and Typescript.

The focus was on improving the build speed and development experience with Vite.

Features

• SolidJS
• TypeScript
• Vite
• Vitest
• SASS
• ESLint
• Prettier
• Chrome Extension Manifest Version 3
• Hot Reload (Live reload)

Installation

Procedures

1. At top right of this page, click on Use this template > Create a new repository.
2. Clone new repository.
3. Change name and description in package.json => Auto synchronize with manifest
4. Run yarn or npm i (check your node version >= 20)
5. Run yarn dev or npm run dev
6. 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)
7. If you want to build in production, Just run yarn build or npm run build.

Screenshots

Documents

• Vite Plugin
• ChromeExtension
• Rollup
• Rollup-plugin-chrome-extension

Support

If you found this template helpful and want to support, please donate