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 comprehensive starting point for developers looking to build Chrome and Firefox extensions. It provides support for TypeScript, React, Bootstrap, CSS Modules, and live reloading.

Features

  • Supported Browsers: The starter kit works on both Chrome and Firefox, thanks to the use of the webextension-polyfill.
  • TypeScript: Developers can write their extension code in TypeScript, which provides type checking and improved developer experience.
  • React: The starter kit includes support for React, allowing developers to build their extension UI using the popular JavaScript library.
  • Bootstrap: Bootstrap is integrated into the starter kit, providing a set of pre-designed components and styles for developers to use in their extensions.
  • CSS Modules: CSS Modules are supported, enabling developers to encapsulate styles within individual components and avoid styling conflicts.
  • Live Reloading: Developers can take advantage of live reloading during development, with automatic updates to background scripts and extension pages.

Installation

To install the Extension Starter Kit, follow these steps:

  1. Clone or download the starter kit repository.
  2. Open a terminal and navigate to the project directory.
  3. Run the command npm install to install the required dependencies.
  4. To start the development server for Chrome, run npm run develop. For Firefox, run npm run develop-firefox.
  5. Open the Chrome browser and navigate to chrome://extensions/. Load the extension in the dist-dev directory.
  6. For Firefox, navigate to about:debugging#/runtime/this-firefox. Load the build/manifest.json file.
  7. After making changes to the extension code, the background script and extension pages will be automatically updated through live reload. Content scripts may require a manual refresh.

Summary

The Extension Starter Kit is a powerful tool for building Chrome and Firefox extensions. It provides support for TypeScript, React, Bootstrap, CSS Modules, and live reloading, making it easier for developers to create robust and feature-rich extensions. By using the webextension-polyfill, the starter kit ensures compatibility across both Chrome and Firefox browsers. With an example content script included, developers can quickly see the starter kit in action. The installation process is straightforward, with clear instructions on how to set up and start developing the extension. Overall, the Extension Starter Kit offers a solid foundation for building high-quality extensions for both Chrome and Firefox.