Templates

Extension.js allows you to create new browser extensions quickly by using templates. Templates provide pre-built structures, components, and configurations that fit various needs and technologies. By using the --template flag, you can select the one that best suits your project requirements.

Available Templates

Prototype screenshot

init

An Extension.js template

manifest.json
Prototype screenshot

action

An Extension.js template

action
Prototype screenshot

content

An Extension.js template

content
Prototype screenshot

content-esm

An Extension.js template

content
Prototype screenshot

content-css-modules

An Extension.js template

content
Prototype screenshot

content-less

An Extension.js template

content
Prototype screenshot

content-less-modules

An Extension.js template

content
Prototype screenshot

content-main-world

An Extension.js template

content
Prototype screenshot

content-sass

An Extension.js template

content
Prototype screenshot

content-sass-modules

An Extension.js template

content
Prototype screenshot

declarative_net_request

An Extension.js template

manifest.json
Prototype screenshot

action-locales

An Extension.js template

action
Prototype screenshot

new

An Extension.js template

newTab
Prototype screenshot

new-esm

An Extension.js template

newTab
Prototype screenshot

new-less

An Extension.js template

newTab
Prototype screenshot

new-sass

An Extension.js template

newTab
Prototype screenshot

sidebar

An Extension.js template

sidebar
Prototype screenshot

special-folders-pages

An Extension.js template

manifest.json
Prototype screenshot

special-folders-scripts

An Extension.js template

manifest.json
Prototype screenshot

storage

An Extension.js template

manifest.json
Prototype screenshot

content-typescript

An Extension.js template

content
Prototype screenshot

content-env

An Extension.js template

content
Prototype screenshot

new-typescript

An Extension.js template

newTab
Prototype screenshot

new-env

An Extension.js template

newTab
Prototype screenshot

action-chatgpt

An Extension.js template

action
Prototype screenshot

new-crypto

An Extension.js template

newTab
Prototype screenshot

new-node-apis

An Extension.js template

newTab
Prototype screenshot

content-react-svgr

An Extension.js template

content
Prototype screenshot

new-react-router

An Extension.js template

newTab
Prototype screenshot

new-react

An Extension.js template

newTab
Prototype screenshot

content-react

An Extension.js template

content
Prototype screenshot

new-preact

An Extension.js template

newTab
Prototype screenshot

content-preact

An Extension.js template

content
Prototype screenshot

content-extension-config

An Extension.js template

content
Prototype screenshot

new-vue

An Extension.js template

newTab
Prototype screenshot

content-vue

An Extension.js template

content
Prototype screenshot

new-svelte

An Extension.js template

newTab
Prototype screenshot

new-config-eslint

An Extension.js template

newTab
Prototype screenshot

new-config-lint

An Extension.js template

newTab
Prototype screenshot

new-config-prettier

An Extension.js template

newTab
Prototype screenshot

new-config-stylelint

An Extension.js template

newTab
Prototype screenshot

content-tailwind

An Extension.js template

content
Prototype screenshot

new-tailwind

An Extension.js template

newTab
npx extension dev --browser=init

How Does It Work?

When you run the create command with the --template flag, Extension.js fetches the template from the repository and generates the project structure based on the template. This process includes installing dependencies, setting up configurations, and creating the necessary files for the extension.

More templates

You can find a list of all officially supported templates here. Their folder name is the template param name like so, --template=<folder_name>.

Best Practices

  • Use templates to bootstrap your project quickly and efficiently.
  • Start using templates with technology stacks you are familiar with.
  • Choose the browser extension context that best fits your project requirements.

Next Steps