React / ES6 Popup Example
What it does
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.
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
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:
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.