Create Command#

The create command is responsible for setting up a new browser extension project using Extension.js. This command accepts flags like --template for initializing your extension with various templates, and allows you to define the directory or path where the extension will be created. The command is designed to simplify the setup process for developers, providing a streamlined way to get started with cross-browser extension development.

How Does It Work?#

Given a folder or template URL, the create command initializes a new extension project in the specified directory applying the chosen template and relevant metadata to the project.

Usage#

You can run the create command using the following syntax. Replace <extension-name|extension-path> with your project name or path and set any required options:

npx extension@latest create <extension-name|extension-path> [options]

Example Usage with Templates

npx extension@latest create my-extension --template=react

This example demonstrates creating a new extension using the react template. You can substitute react with any available template from the Templates section.

Path Option#

The create command can also accept a specific directory where you want to create the extension. If no path is provided, it defaults to the current working directory.

extension create path/to/my-extension --template=react

In this example, the extension is created in the path/to/my-extension directory.

Arguments and Flags#

The create command accepts several arguments and flags to customize the behavior of the extension creation:

• Path or Name: If a path is provided, the extension is created at that location. If a name is provided, it is created in the current working directory.
• --template: Specifies the template to use when bootstrapping the extension (e.g., react, typescript).

Example Commands#

This command creates a new extension named my-new-extension using the React template.

npx extension@latest create my-extension --template=react

Available Templates#

OverviewDetails

init

An Extension.js template

manifest.json

Select

OverviewDetails

action

An Extension.js template

action

Select

OverviewDetails

content

An Extension.js template

content

Select

OverviewDetails

content-esm

An Extension.js template

content

Select

OverviewDetails

content-css-modules

An Extension.js template

content

Select

OverviewDetails

content-less

An Extension.js template

content

Select

OverviewDetails

content-less-modules

An Extension.js template

content

Select

OverviewDetails

content-main-world

An Extension.js template

content

Select

OverviewDetails

content-sass

An Extension.js template

content

Select

OverviewDetails

content-sass-modules

An Extension.js template

content

Select

OverviewDetails

declarative_net_request

An Extension.js template

manifest.json

Select

OverviewDetails

action-locales

An Extension.js template

action

Select

OverviewDetails

new

An Extension.js template

newTab

Select

OverviewDetails

new-esm

An Extension.js template

newTab

Select

OverviewDetails

new-less

An Extension.js template

newTab

Select

OverviewDetails

new-sass

An Extension.js template

newTab

Select

OverviewDetails

sidebar

An Extension.js template

sidebar

Select

OverviewDetails

special-folders-pages

An Extension.js template

manifest.json

Select

OverviewDetails

special-folders-scripts

An Extension.js template

manifest.json

Select

OverviewDetails

storage

An Extension.js template

manifest.json

Select

OverviewDetails

content-typescript

An Extension.js template

content

Select

OverviewDetails

content-env

An Extension.js template

content

Select

OverviewDetails

new-typescript

An Extension.js template

newTab

Select

OverviewDetails

new-env

An Extension.js template

newTab

Select

OverviewDetails

action-chatgpt

An Extension.js template

action

Select

OverviewDetails

new-crypto

An Extension.js template

newTab

Select

OverviewDetails

new-node-apis

An Extension.js template

newTab

Select

OverviewDetails

content-react-svgr

An Extension.js template

content

Select

OverviewDetails

new-react-router

An Extension.js template

newTab

Select

OverviewDetails

new-react

An Extension.js template

newTab

Select

OverviewDetails

content-react

An Extension.js template

content

Select

OverviewDetails

new-preact

An Extension.js template

newTab

Select

OverviewDetails

content-preact

An Extension.js template

content

Select

OverviewDetails

content-extension-config

An Extension.js template

content

Select

OverviewDetails

new-vue

An Extension.js template

newTab

Select

OverviewDetails

content-vue

An Extension.js template

content

Select

OverviewDetails

new-svelte

An Extension.js template

newTab

Select

OverviewDetails

new-config-eslint

An Extension.js template

newTab

Select

OverviewDetails

new-config-lint

An Extension.js template

newTab

Select

OverviewDetails

new-config-prettier

An Extension.js template

newTab

Select

OverviewDetails

new-config-stylelint

An Extension.js template

newTab

Select

OverviewDetails

content-tailwind

An Extension.js template

content

Select

OverviewDetails

new-tailwind

An Extension.js template

newTab

Select

Previous slideNext slide

npmpnpmYarn

npx extension dev --browser=init

Best Practices#

• Starting from a Template: Using a template is the fastest way to get started with browser extension development in Extension.js.

Next Steps#

• Learn how to develop your extension.
• Use the extension.config.js file to configure your extension.