React Templates & Themes Logo React Templates & Themes
Vite React Tailwindcss Browser Extension Simple screenshot

Vite React Tailwindcss Browser Extension Simple

Author Avatar Theme by Akoskm
Updated: 10 Mar 2025
26 Stars

A simple cross-browser extension template

Github

Categories

Vite Tailwind

Overview:

The Cross Platform Browser Extension template repository is a React + TailwindCSS template bundled with Vite. It provides a framework for building browser extensions that can run on multiple platforms. The extensions modify the website https://blank.org when enabled, and also include a “Click me!” button that sends a message to the background script.

Features:

  • Cross Platform Compatibility: The template is designed to work on multiple platforms, including Firefox and Google Chrome.
  • React and TailwindCSS Integration: The template utilizes React and TailwindCSS to provide a modern and customizable user interface.
  • Extension Functionality: The extensions modify the website https://blank.org when enabled and include a feature that sends a message to the background script when the “Click me!” button is clicked.

Installation:

Building the Extension for Firefox:

  1. Run the command npm run build to build the extension for Firefox.
  2. The generated files can be found in the dist/ directory.
  3. To load the extension in Firefox, go to about:debugging#/runtime/this-firefox or navigate to Firefox > Preferences > Extensions & Themes > Debug Add-ons > Load Temporary Add-on....
  4. Locate the dist/ directory and open the manifest.json file.

Building the Extension for Google Chrome:

  1. Run the command npm run build:chrome to build the extension for Google Chrome.
  2. The generated files can be found in the dist/ directory.
  3. To load the extension in Google Chrome, go to chrome://extensions/ and click on “Load unpacked”.
  4. Locate the dist/ directory and select the manifest.json file.

Summary:

The Cross Platform Browser Extension template repository provides a convenient starting point for building browser extensions that are compatible with multiple platforms. It integrates React and TailwindCSS for a modern and customizable user interface. The extensions modify a specific website and also include additional functionality such as sending messages to the background script. Detailed installation instructions are provided for Firefox and Google Chrome.