Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Extension Starter Kit screenshot

Extension Starter Kit

Author Avatar Theme by Namuorg
Updated: 8 Dec 2020
181 Stars

Starter kit for building Chrome/Firefox extensions

Github

Categories

React Scss

Overview:

The Extension Starter Kit is a tool designed for developers looking to build Chrome or Firefox extensions. It provides a starting point for creating extensions with support for TypeScript, React, Bootstrap, CSS Modules, and live reloading.

Features:

  • TypeScript: Write your extension code in TypeScript for improved type safety and developer productivity.
  • React: Use React to build dynamic and interactive user interfaces for your extension.
  • Bootstrap: Utilize the Bootstrap framework to easily create responsive and visually appealing designs.
  • CSS Modules: Keep your styles modular and manageable with CSS Modules, preventing conflicts and improving code organization.
  • Live Reloading: Enable live reloading during development, allowing for quick and seamless updates without needing to manually refresh the extension.

Installation:

To install the Extension Starter Kit, follow these steps:

  1. Clone or download the repository to your local machine.
  2. Open a command prompt or terminal and navigate to the project directory.
  3. Run npm install to install the necessary dependencies.
  4. Depending on your desired development environment:
    • For Chrome:
      • Run npm run develop to start the webpack-dev-server.
      • Open chrome://extensions/ in your Chrome browser.
      • Load the extension from the dist-dev directory.
    • For Firefox:
      • Run npm run develop-firefox to start the webpack-dev-server.
      • Load build/manifest.json from about:debugging#/runtime/this-firefox in your Firefox browser.
  5. The extension will be automatically updated through live reload or hot module replacement, except for content scripts which may require a manual refresh.

Summary:

The Extension Starter Kit is a versatile tool that provides a solid foundation for building Chrome and Firefox extensions. With support for TypeScript, React, Bootstrap, CSS Modules, and live reloading, developers can create powerful and visually appealing extensions with ease. The installation process is straightforward, allowing developers to quickly set up their development environment and start building their extensions.