Find file History

React / ES6 Popup Example

What it does

This is an example of creating a browser action popup UI in React and ES6 JavaScript.

What it shows

  • How to bundle React and any other NodeJS module into an extension.
  • How to transpile code that is not supported natively in a browser such as import / export syntax and JSX.
  • How to continuously build code as you edit files.
  • How to customize web-ext for your extension's specific needs.
  • How to structure your code in reusable ES6 modules.


First, you need to change into the example subdirectory and install all NodeJS dependencies with npm or yarn:

npm install

Start the continuous build process to transpile the code into something that can run in Firefox or Chrome:

npm run build

This creates a WebExtension in the extension subdirectory. Any time you edit a file, it will be rebuilt automatically.

In another shell window, run the extension in Firefox using a wrapper around web-ext:

npm start

Any time you edit a file, web-ext will reload the extension in Firefox. To see the popup, click the watermelon icon from the browser bar. Here is what it looks like:

popup screenshot


The icon for this extension is provided by icons8.