https://github.com/fuyutarow/solid-chrome-extension-template

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod
https://github.com/fuyutarow/solid-chrome-extension-template

chrome-extension hot-reload manifest-v3 solidjs typescript vite

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fuyutarow/solid-chrome-extension-template
• Owner: fuyutarow
• License: mit
• Created: 2022-07-17T07:48:08.000Z (over 2 years ago)
• Default Branch: alpha
• Last Pushed: 2023-05-14T19:29:05.000Z (over 1 year ago)
• Last Synced: 2024-08-10T10:03:47.918Z (3 months ago)
• Topics: chrome-extension, hot-reload, manifest-v3, solidjs, typescript, vite
• Language: TypeScript
• Homepage:
• Size: 538 KB
• Stars: 99
• Watchers: 3
• Forks: 18
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




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


![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)

![](https://badges.aleen42.com/src/vitejs.svg)



## Intro 

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](https://www.solidjs.com/)

- [TypeScript](https://www.typescriptlang.org/)

- [Jest](https://jestjs.io/)

- [Vite](https://vitejs.dev/)

- [SASS](https://sass-lang.com/)

- [ESLint](https://eslint.org/)

- [Prettier](https://prettier.io/)

- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)

- Hot Reload (Live reload)

## Installation 

### Procedures 

1. Clone this repository.

2. Change `name` and `description` in package.json => **Auto synchronize with manifest** 

3. Run `yarn` or `npm i` (check your node version >= 16)

4. Run `yarn dev` or `npm run 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 `yarn build` or `npm run build`.

## Screenshots 



## Documents 

- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)

- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)

- [Rollup](https://rollupjs.org/guide/en/)

- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)