https://github.com/njzydark/chrome-extension-boilerplate
A chrome extension boilerplate by Webpack5 + TS + React
https://github.com/njzydark/chrome-extension-boilerplate
chrome-extension chrome-extension-boilerplate chrome-extension-react chrome-extension-starter manifest-v2 manifest-v3
Last synced: 6 months ago
JSON representation
A chrome extension boilerplate by Webpack5 + TS + React
- Host: GitHub
- URL: https://github.com/njzydark/chrome-extension-boilerplate
- Owner: njzydark
- Created: 2021-06-23T16:51:42.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-08T13:31:11.000Z (over 3 years ago)
- Last Synced: 2023-03-04T10:11:50.145Z (over 2 years ago)
- Topics: chrome-extension, chrome-extension-boilerplate, chrome-extension-react, chrome-extension-starter, manifest-v2, manifest-v3
- Language: TypeScript
- Homepage:
- Size: 757 KB
- Stars: 46
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chrome-extension-boilerplate
A chrome extension boilerplate by Webpack5 + TS + React
## Features
- Support manifest v2 and v3
- Support HMR
- Support react fast refresh
- Support auto reload when content scripts change
- Support dynamic generate content scripts
- Support use vscode to debug content scripts, popup page, options page and background
- Out of the box Eslint and Prettier configurations
- Intelligence when you change manifest config (only v2)
> Major features is by [chrome-extension-reloader-webpack-plugin](https://github.com/njzydark/chrome-extension-reloader-webpack-plugin), you can use this plugin to create own your project
## Demo Video
https://user-images.githubusercontent.com/19601720/127956421-8d6521dd-f6cf-460b-8e5f-750b5acea3a3.mp4
## Usage
```bash
# install dependcy
npm i
# development
npm run dev
# build
npm run build
# analy build assets
npm run analy
```
## Manifest Version
change manifest version in `package.json`, default version is **2**
```json
{
...
"chromeExtension": {
"mainifest-version": 2 or 3
},
...
}
```
## Content Scripts
All content script in `contents` directory will dynamic generate（**There can only be two levels of nesting**）
```txt
contents/test.ts 🆗
contents/test/index.ts 🆗
contents/test/a.ts 🚫
contents/test/t/index.ts 🚫
```
## React Refresh
This project is using custom plugin [https://github.com/njzydark/mini-react-refresh-webpack-plugin](https://github.com/njzydark/mini-react-refresh-webpack-plugin)