Chrome Extension Boilerplate ⚡

A modern foundation for Chrome extensions with Webpack 5, Tailwind CSS 3, and Manifest V3.

Features

• 🛠 Webpack 5 + Babel
• 🎨 Tailwind CSS + PostCSS
• 📦 Manifest V3 Ready
• 📄 HTML/JS/CSS Hot Reloading
• ⚡ Production Optimization
• 📦 Auto ZIP Packaging
• 📝 Code Formatter with Prettier
• 🎁 Automatic changelog generation with Semantic Release
• 📏 Linter with ESLint

Demo

Content Script Loaded	Options UI

Popup UI (Status tab)	Popup UI (Actions tab)

Options UI in Popup	Options UI in Popup (Saved)

Requirements

• Node.js 22+ and npm

Quick Start

1. Getting started Run the following command on your local environment:

git clone --depth=1 https://github.com/justintieu/chrome-extension-boilerplate.git
cd chrome-extension-boilerplate
npm install

2. Build Project

npm run build

3. Load in Chrome

• Go to chrome://extensions
• Enable "Developer mode" (toggle top-right)
• Click "Load unpacked"
• Select the dist folder

Project Structure

├── README.md           # README file
├── .github             # GitHub folder
├── public/             # Static assets
│   ├── *.html          # Extension pages
│   └── icons/          # Extension icons
├── scripts             # Scripts folder
├── src/
│   ├── background.js   # Service worker
│   ├── content.js      # Content scripts
│   ├── popup.js        # Popup UI
│   ├── options.js      # Settings page
│   └── styles.js       # Tailwind CSS
├── webpack.config.js   # Build configuration
├── tailwind.config.js  # Tailwind settings
├── postcss.config.js   # PostCSS plugins
└── manifest.json       # Extension manifest

Scripts

Customization

1. Update Manifest Edit manifest.json based on your needs:

{
  "name": "Your Extension",
  "description": "Custom description",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  }
}

2. Add/Remove Pages

• Create new HTML in public/
• Add JS entry in webpack.config.js
• Update manifest permissions

3. Modify Styles Edit Tailwind config:

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: "#3b82f6",
            },
        },
    },
};

Packaging

1. Build production files and create ZIP package

npm run release

2. Upload extension.zip to Chrome Web Store Dashboard

FAQ

Q: Styles not updating?

• Restart Webpack dev server
• Check Tailwind content config

Q: Extension not loading?

• Reload extension in chrome://extensions
• Check browser console (Ctrl+Shift+J)

Contributions

Everyone is welcome to contribute to this project. Feel free to open an issue if you have any questions or find a bug. Totally open to suggestions and improvements.

License

Licensed under the MIT License, Copyright © 2025 See LICENSE for more information.

Found this useful? Please star ⭐ the repo!