Getting started
Create React App with the WebExt template is a way to create single-page React web extensions. It offers a modern build setup with no configuration.
Quick start
Get started by creating a new web extension with create react app.
npx create-react-app my-app --template webext
cd my-app
npm start
If you've previously installed
create-react-app
globally vianpm install -g create-react-app
, we recommend you uninstall the package usingnpm uninstall -g create-react-app
oryarn global remove create-react-app
to ensure thatnpx
always uses the latest version.
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
A new browser window will open with your web extension.
When youβre ready to deploy to production, create an addon bundle with npm run build
.
Get Started Immediately
You donβt need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
Create a project, and youβre good to go.
Creating a web extension
Youβll need to have Node >= 14 on your local development machine. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.
To create a new web extension, you may choose one of the following methods:
npx
npx create-react-app my-app --template webext
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
npm
npm init react-app my-app --template webext
npm init <initializer>
is available in npm 6+
Yarn
yarn create react-app my-app --template webext
yarn create
is available in Yarn 0.25+
Selecting a package manager
When you create a new web extension, the CLI will use npm or Yarn to install dependencies, depending on which tool you use to run create-react-app
. For example:
# Run this to use npm
npx create-react-app my-app --template webext
# Or run this to use yarn
yarn create react-app my-app --template webext
Output
Running any of these commands will create a directory called my-app
inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-app
βββ README.md
βββ node_modules
βββ package.json
βββ .gitignore
βββ public
β βββ favicon.ico
β βββ index.html
β βββ logo192.png
β βββ logo512.png
β βββ manifest.json
β βββ robots.txt
βββ src
βββ App.css
βββ App.js
βββ App.test.js
βββ index.css
βββ index.js
βββ logo.svg
βββ serviceWorker.js
βββ setupTests.js
No configuration or complicated folder structures, only the files you need to build your web extension. Once the installation is done, you can open your project folder:
cd my-app
Scripts
Inside the newly created project, you can run some built-in commands:
npm start
or yarn start
Runs the web extension in development mode. A new browser window will open with your web extension.
The web extension will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
npm run build
or yarn build
Builds the web extension for production to the build
folder. It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your web extension is ready to be deployed.