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.
Template Flag | Description | Demo |
---|---|---|
--template=new |
Includes a new tab page override (default). | Demo |
--template=init |
Includes a single manifest.json file. | Demo |
--template=content |
Includes a content_script. | Demo |
--template=new-react |
Includes a new tab override using React, TypeScript, and Tailwind.css. | Demo |
--template=new-typescript |
Includes a new tab override using TypeScript. | Demo |
--template=content-react |
Includes a content_script using React, TypeScript, and Tailwind.css. | Demo |
--template=action-chatgpt |
Includes an action using React, Tailwind.css, DaisyUI, and a ChatGPT integration. | Demo |
This template is the default for Extension.js, giving you a new tab page override. It’s useful when you want a quick and functional new tab experience using standard web technologies like HTML, CSS, and JavaScript. Ideal for simple, static extensions.
The init
template is minimal, perfect for fast prototyping or when you just need a basic starting point. It includes only a single manifest.json
file, allowing you to customize everything else as needed.
The content
template is helpful when your extension needs to interact with existing web content. It includes a content_script that runs in the context of the current tab, allowing you to manipulate the DOM or gather data directly from the page.
For developers looking to build rich user interfaces, the new-react
template offers a new tab override using React and sakura.css. It’s ideal for developers who prefer JSX and want to quickly scaffold a React-based extension.
This template is great for TypeScript developers who want to include a new tab override built with HTML, CSS, and TypeScript. It provides a strong foundation for building type-safe browser extensions.
This template is a good starting point for extensions that need to interact with web content while using a rich user interface. It includes a content_script built with React, TypeScript, and Tailwind.css.
This is the most advanced template offered, fully integrated with the ChatGPT API. It includes a sidebar_panel
built with React, Tailwind.css, and the official OpenAI Node API library. Ideal for building AI-powered extensions.
You can find more templates here. Use a folder name in the template param like so, --template=<folder_name>
.