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, you can use this plugin to create own your project

chrome-extension-boilerplate.mp4

# install dependcy
npm i
# development
npm run dev
# build
npm run build
# analy build assets
npm run analy

change manifest version in package.json, default version is 2

{
  ...
  "chromeExtension": {
    "mainifest-version": 2 or 3
  },
  ...
}

All content script in contents directory will dynamic generate（There can only be two levels of nesting）

contents/test.ts 🆗

contents/test/index.ts 🆗

contents/test/a.ts 🚫

contents/test/t/index.ts 🚫