Chrome Extension Manifest V3 Template

This is a simple starter template for building Chrome Extensions using Manifest V3, TypeScript, and Webpack.

---

Features

• Uses Manifest V3 (latest Chrome extension format)
• Background script as service worker
• Content script injection
• Popup and Options pages with HTML, CSS, and TypeScript
• Webpack build system with TypeScript support
• Clean folder structure for easy development

---

Folder Structure

• src/ — Your TypeScript source files (background.ts, content.ts, popup.ts, options.ts)
• html/ — HTML files for popup and options pages
• public/ — Static assets like icons and images
• dist/ — Compiled output files (generated by Webpack)
• manifest.json — Chrome extension manifest file

---

Getting Started

Prerequisites

• Node.js and npm installed on your machine
• Basic knowledge of Chrome extensions and TypeScript

Install Dependencies

Run this command to install all needed packages:

npm install

Build the Extension

To build the extension files (compile TypeScript and bundle with Webpack), run:

npm run build

This creates the dist/ folder with all JavaScript files and copies necessary assets.

Watch for Changes (Development)

To automatically rebuild when you change source files, run:

npm run watch

or

npm run wc

(The wc command cleans the dist/ folder and starts watch mode.)

---

Loading the Extension in Chrome

1. Open Chrome and go to chrome://extensions
2. Enable "Developer mode" (top right)
3. Click "Load unpacked"
4. Select the root folder of this project (make sure manifest.json is there)
5. The extension will load, and you can test it in the browser

---

How It Works

• manifest.json tells Chrome how your extension works
• Background script runs as a service worker (in dist/background.js)
• Content scripts run on all pages and can inject CSS or JS (dist/content.js)
• Popup page shows UI when you click the extension icon (html/popup.html and dist/popup.js)
• Options page allows user settings (html/options.html and dist/options.js)
• Webpack bundles and compiles your TypeScript code into JavaScript

---

Adding Your Code

• Edit the TypeScript files in src/
• Edit the HTML files in html/
• Edit styles in html/css/style.css
• Run npm run build or npm run watch to compile changes

---

Cleaning Build Files

To remove the dist/ folder, run:

npm run clean

or

npm run c

---

Feel free to fork and modify this template for your own Chrome extension projects!