mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
f369ddc642
* convert chrome. to browser. Issue #165 * fix browser-polyfill * convert chrome.* to browser.* (#166) * convert chrome.* to browser.* * change chrome to browser * change the callback-style to promise-style * change the callback-style to promise-style
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.
Usage
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:
Icons
The icon for this extension is provided by icons8.