Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

A chrome extension boilerplate by Webpack5 + TS + React

Notifications You must be signed in to change notification settings

njzydark/chrome-extension-boilerplate

Repository files navigation

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

Demo Video

chrome-extension-boilerplate.mp4

Usage

# 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

{
  ...
  "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

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