Need help with react-extension-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

212 Stars 42 Forks MIT License 40 Commits 19 Opened issues


:rocket: Modern React boilerplate for Firefox and Chrome extensions.

Services available


Need anything else?

Contributors list

# 200,306
30 commits
# 63,781
1 commit
# 164,190
1 commit
# 255,792
1 commit

React Extension Boilerplate for Chrome and Firefox

Fork Issues Stars Watchers MIT license PRs Welcome

Still in Development!

:zap: Are you trying to create a web Extension but still looking for a starting point?
:zap: Do you want your extension to run in both Firefox and Chrome?
:zap: Are you tired of repeteadly reloading your extension after every small change you make?
:zap: Do you want to develop your exetension using modern technologies like React, Webpack, Jest?

We have a solution!

React Extension Boilerplate is a modern web extension template for building Mozilla and Chrome extensions using ReactJS.

Allows smooth and fast development of extension using on-the-go loading, building, packaging and publishing on the most common browsers Chrome and Firefox.
Make changes to the source code and watch the extension implement these changes live in the browser.
Implements all the best Javascript practises with ESLint, Jest, React-StoryBook, Webpack and lots more.

Installation :checkered_flag:

Installing this boilerplate is as simple as cloning this repo in a new folder and start editing the source folder.

Before you begin installing this project you need NodeJS and npm installed on your machine. Make sure to install the latest version of node.

# clone the git repo
$ git clone

Install dependencies

$ npm install

Development :computer:

  • Run script ```bash

    build files to './dev'

    and launches the web ext in a new chrome instance, watches for changes and updates

    $ npm run start:chrome

    launches in firefox

    $ npm run start:firefox

    runs storybook

    $ npm run storybook ``

    npm run chrome-launch` in action:* dev gif
  • If you want to load your unpacked extension by yourself, then run

    npm run dev
    . This will create the extension inside an dev folder in
    mode and will watch the
    folder for changes.
  • Load unpacked extensions with

    folder. Though you have to reload the extension by yourself every time the
    folder updates.

Screenshot of the development folder:
dev folder screenshot

Go to the project folder and run the following commands:

How to develop extension using the boilerplate

The gives an overview of the project structure.
The only folder important to you is the source folder. The

contains the different components of the extension like content_scripts, background, options, popup, sidebar.

Any component which you not require, suppose you don't need sidebar, you can simply delete that component from the src folder and it will not be included inside your build.

If you don't want to use React..

Suppose you don't want to use React in your popup to develop UI. You can delete all the files inside the popup folder only leaving the [

] inside it.
You can use this

as your
. BUT any scripts or CSS files referenced inside this template.html should be put inside the

Example of an extension bootstrapped using React Extension Boilerplate that doesn't use React!

Storing static assets like images, fonts

Separate folders have been provided to store these static assets. *


These assets are copied as it is to the build folder, just like the


Delete unnecessary files from the boilerplate

Files like,,, LICENSE in case they are not relavant to your project. Once the CLI tool is build, it will help you scaffold the extension without including these unnecessary files.

If you need any further help regarding feel free to ask on our Gitter community or create an issue.

Build :wrench: :hammer:

# build files to './extension'
$ npm run build

Once created here's what the extension folder looks like:
Extension folder

Compress :nutandbolt:

# compress build folder to {}.zip and crx
$ npm run build
$ npm run compress -- [options]


If you want to build

file (auto update), please provide options, and add
file url in manifest.json.
  • --app-id: your extension id (can be get it when you first release extension)
  • --key: your private key path (default: './key.pem')
    you can use
    npm run compress-keygen
    to generate private key
  • --codebase: your
    file url

See autoupdate guide for more information.


Contributing :tada:

To get an idea about the structure of the project, read here. Contributions are highly welcome. Please take some time to read the guidelines mentioned here contribute.


The code is available under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.