This is an example of creating a browser action popup UI in React and ES6 JavaScript.
- 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:
The icon for this extension is provided by icons8.