Chrome Extension V3 Boilerplate

Very basic Webpack boilerplate for developing Chrome Extension compatible with manifest V3.

Features

• TypeScript support
• CSS Modules support
• Auto-build with Webpack in dev mode (no browser hot reload, though)
• Clean, straightforward and ready-to-use project structure

Getting started

Node.js is requierd.

1. Clone this repository
2. Run npm install command in the project directory
3. Configure src/manifest.json and package.json files to your will
4. Run npm run dev or npm run build in the project directory (it will generate build directory)
5. In your Chrome Browser:
   1. Go to chrome://extensions/
   2. Turn on Developer mode
   3. Click Load unpacked
   4. Select the build directory
   5. Your extension should appear in Chrome

Project structure

📦chrome-extension-v3-boilerplate
 ┣ 📂src
 ┃ ┣ 📂css
 ┃ ┃ ┣ 📂modules
 ┃ ┃ ┃ ┗ name.module.css
 ┃ ┃ ┣ 📜content.css
 ┃ ┃ ┣ 📜options.css
 ┃ ┃ ┗ 📜popup.css
 ┃ ┣ 📂html
 ┃ ┃ ┣ 📜content.html
 ┃ ┃ ┣ 📜options.html
 ┃ ┃ ┗ 📜popup.html
 ┃ ┣ 📂img
 ┃ ┃ ┗ 📜example.png
 ┃ ┣ 📂ts
 ┃ ┃ ┣ 📜background.ts
 ┃ ┃ ┣ 📜content.ts
 ┃ ┃ ┣ 📜options.ts
 ┃ ┃ ┗ 📜popup.ts
 ┃ ┗ 📜manifest.json
 ┣ 📜.gitignore
 ┣ 📜declaration.d.ts
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tsconfig.json
 ┗ 📜webpack.config.js

Notes:

• manifest.json should be in src directory
• All script files should be in src/ts, however you can create subdirectories for module scripts
• All HTML files should be in src/html directory
• CSS Modules files should be named as *.module.css, but they don't have to be placed in src/css/modules directory
• You can setup your TypeScript preferences in tsconfig.json file

Notes

This simple boilerplate was created for my personal extension development. It was heavily inspired by chrome-extension-webpack-boilerplate project. I believe that for someone it might be a good starting point.

Contact

Created by @michaltkacz - feel free to contact me!