Design an Icon
Extensions need to have a clean, visible, and memorable icon before being added to the store. We have a Figma template you can use to design your own, or you can use the Icon Generator to create one for you.Icon Generator Extension
Building
If you use a framework like React, you will need to build a static output folder which renders the extension’s contents statically. The default template already has the build steps configured, just confirm that it works by running the build command in the shell. If you are using HTML/CSS/JS, set the build command to a single space" "
and set the output directory to your Replit App’s base URL .
.
Vite
Runningnpx vite build
will create a static folder dist
. Set build
to vite build
in your package.json
file and set the extension’s build command to npm run build
. Next, set the output folder to dist
.
Next.js
Next.js supports building a static HTML export, but some features such as server-side rendering and API routes are not supported. Innext.config.js
, set the output
property to "export"
.
The required steps to build the static output folder consist of:
- Deleting the
.next
folder - Building in development mode
- Running
next export
"export"
command in package.json
.
next export
will create a static folder out
. In the Extension Devtools, set the build command to npm run export
and the output folder to out
.