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
init
An Extension.js template
action
An Extension.js template
content
An Extension.js template
content-esm
An Extension.js template
content-css-modules
An Extension.js template
content-less
An Extension.js template
content-less-modules
An Extension.js template
content-main-world
An Extension.js template
content-sass
An Extension.js template
content-sass-modules
An Extension.js template
declarative_net_request
An Extension.js template
action-locales
An Extension.js template
new
An Extension.js template
new-esm
An Extension.js template
new-less
An Extension.js template
new-sass
An Extension.js template
sidebar
An Extension.js template
special-folders-pages
An Extension.js template
special-folders-scripts
An Extension.js template
storage
An Extension.js template
content-typescript
An Extension.js template
content-env
An Extension.js template
new-typescript
An Extension.js template
new-env
An Extension.js template
action-chatgpt
An Extension.js template
new-crypto
An Extension.js template
new-node-apis
An Extension.js template
content-react-svgr
An Extension.js template
new-react-router
An Extension.js template
new-react
An Extension.js template
content-react
An Extension.js template
new-preact
An Extension.js template
content-preact
An Extension.js template
content-extension-config
An Extension.js template
new-vue
An Extension.js template
content-vue
An Extension.js template
new-svelte
An Extension.js template
new-config-eslint
An Extension.js template
new-config-lint
An Extension.js template
new-config-prettier
An Extension.js template
new-config-stylelint
An Extension.js template
content-tailwind
An Extension.js template
new-tailwind
An Extension.js template
npx extension create <your-extension-name> --template=initHow 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
- Understand Browser Runners and how they help you visualize your extension.
- Learn how Extension.js handles Environment Variables.