Skip to content

Latest commit

 

History

History
72 lines (58 loc) · 2.44 KB

README.md

File metadata and controls

72 lines (58 loc) · 2.44 KB

Chrome Extension V3 Boilerplate

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

Features

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!