Chrome Extension Boilerplate screenshot

Chrome Extension Boilerplate

Author Avatar Theme by Njzydark
Updated: 29 Aug 2021
53 Stars

A chrome extension boilerplate by Webpack5 + TS + React

Categories

Overview:

The Chrome Extension Boilerplate is a comprehensive starter kit designed to simplify the development of Chrome extensions with modern tools. Utilizing Webpack 5, TypeScript, and React, this boilerplate offers developers a solid foundation to build and manage their extensions efficiently. Whether you’re a seasoned developer or just starting out, this setup reduces the complexity typically associated with Chrome extension development.

This boilerplate not only supports the latest manifest versions but also integrates powerful features like Hot Module Replacement and fast refresh for a smoother coding experience. Designed with flexibility in mind, it allows developers to focus on creating unique and functional extensions without getting bogged down in setup intricacies.

Features:

  • Support for Manifest V2 and V3: Easily switch between the two manifest versions while building your extension.
  • Hot Module Replacement (HMR): Enjoy real-time updates without needing a full reload, enhancing your development speed.
  • Automatic Reloading for Content Scripts: This feature ensures that any changes made to content scripts are instantly reflected.
  • Dynamic Content Script Generation: Automatically generates content scripts from the specified directory structure, streamlining the process.
  • Debugging with VSCode Support: Efficiently debug your content scripts, popup page, options page, and background scripts directly in Visual Studio Code.
  • Integrated ESLint and Prettier Configurations: Out of the box setups for linting and formatting, helping to maintain code quality.
  • Intelligent Manifest Configuration Changes: Provides feedback and guidance when modifying manifest configurations (specifically for version 2).
  • Custom React Refresh Plugin: An added feature that allows for improved development experience when working with React components.