Browser extension templates

Create a project from any template

npx extension@latest create my-new-react --template new-react
cd my-new-react
npm install
npm run dev

All 60 templates

• Action (Popup) Adds a toolbar popup to the browser with a simple page.
• Action Locales Adds a toolbar popup whose text follows your browser's language.
• ChatGPT AI Sidebar Adds a sidebar panel where you can chat with ChatGPT about the page you are viewing.
• Claude AI Sidebar Adds a sidebar panel where you can chat with Claude about the page you are viewing.
• Gemini AI Sidebar Adds a sidebar panel where you can chat with Gemini about the page you are viewing.
• Perplexity AI Sidebar Adds a sidebar panel where you can chat with Perplexity about the page you are viewing.
• Content scripts Injects a small badge into every web page you visit, with an options page that moves it to the left or right edge.
• Content CSS Modules Injects a small styled badge into every web page you visit.
• Custom fonts in a content script Injects a badge rendered in a custom font into every web page you visit, with an options page that turns the custom font on and off.
• Content Env Injects a small panel showing the extension's environment values into every web page you visit.
• Content Less Injects a small styled badge into every web page you visit, with a Less options page that moves it to the left or right edge.
• Content Less Modules Injects a small styled badge into every web page you visit, with a Less modules options page that moves it to the left or right edge.
• Main-world Content Script Injects a small UI into every web page from both the extension and the page's own JavaScript world, with an options page that moves it to the left or right edge.
• Content Multi One Entry Injects four small elements into every web page you visit.
• Multi-entry Content Scripts Injects four small elements into every web page you visit.
• Content Preact Shows an overlay UI on web pages and an options page that moves it from right to left.
• Content React Shows a small overlay UI on every web page, with a React options page that moves it from right to left.
• Content scripts with Sass Injects a small styled badge into every web page you visit, with a Sass options page that moves it to the left or right edge.
• Content scripts with Sass modules Injects a small styled badge into every web page you visit, with a Sass modules options page that moves it to the left or right edge.
• Content Svelte Shows a Svelte overlay on every web page you visit, with an options page that moves it from right to left.
• Content TypeScript Shows a small overlay UI on every web page, with an options page that moves it from right to left.
• Content Vue Shows a small overlay UI on every web page, with a Vue options page that moves it from right to left.
• Devtools panel Adds a devtools panel to the browser that reads the inspected page.
• Devtools panel Preact Adds a devtools panel written in Preact that reads the inspected page.
• React devtools panel Adds a React devtools panel to the browser that reads the inspected page.
• Devtools panel with Svelte Adds a Svelte devtools panel to the browser that reads the inspected page.
• Devtools panel (TypeScript) Adds a devtools panel to the browser that reads the inspected page.
• Devtools panel with Vue Adds a devtools panel built with Vue that reads the inspected page.
• Initial A minimal extension that loads in your browser, ready to build on.
• JavaScript Adds a sidebar panel to the browser with a simple page.
• New Tab Replaces your new tab page with a simple page you can customize.
• New Tab Browser Flags Replaces your new tab page with a launcher that opens the extension's sidebar panel.
• New Tab Config ESLint Replaces your new tab page with a simple page.
• New Tab Config Prettier Replaces your new tab page with a simple page.
• New Tab Config Stylelint Replaces your new tab page with a simple page.
• New Tab Crypto Replaces your new tab page with a page that hashes any text you type using SHA-256.
• Environment Variables Replaces your new tab page with a page showing the extension's environment values.
• New Tab Less Replaces your new tab page with a simple styled page.
• New Tab Preact Replaces your new tab page with a simple Preact page.
• New Tab React Replaces your new tab page with a simple React page.
• New Tab React Router Replaces your new tab page with a small React app you can navigate across routes.
• New Tab Sass Replaces your new tab page with a simple styled page.
• New Tab Svelte Replaces your new tab page with a simple Svelte page.
• New Tab TypeScript Replaces your new tab page with a simple page.
• New Tab Vue Replaces your new tab page with a simple Vue page.
• Options page Adds an options page to the browser that saves a setting with chrome.storage.
• Playwright E2E Sidebar Adds a sidebar panel to the browser, covered end to end by Playwright tests.
• Preact Adds a sidebar panel to the browser with a simple Preact page.
• React Adds a sidebar panel to the browser with a simple React page.
• Sidebar page Adds a sidebar panel to the browser with a simple page.
• Sidebar Ant Design Adds a sidebar panel to the browser showing Ant Design components.
• Sidebar Nx Adds a sidebar panel and shows a small overlay UI on every web page you visit.
• Sidebar Turborepo Adds a sidebar panel and shows a small overlay UI on every web page you visit.
• Sidebar shadcn Adds a sidebar panel to the browser built with shadcn/ui components.
• Special Folders: pages/ Opens a welcome page in a new tab when the extension loads.
• Special Folders Scripts Shows a small overlay on web pages and a toolbar popup that runs the extension's bundled scripts.
• Svelte Adds a sidebar panel to the browser with a simple Svelte page.
• Transformers.js Adds a sidebar panel that classifies the active page or your selected text with on-device AI models.
• TypeScript Adds a sidebar panel to the browser with a simple page.
• Vue Adds a sidebar panel to the browser with a simple Vue page.