create-chrome-ext

Scaffolding your chrome extension, multiple boilerplates supported

Browser extensionViteReactVueSolidSvelte
guocaoyi/create-chrome-extcreate-chrome-ext

README

Create Chrome Extension (.crx)


Scaffolding your chrome extension, multiple boilerplates supported!


- 🚀 Lightning Fast HMR(use Vite2)
- 🥡 Out of Box
- 🌈 Multiple Frontend Framework Supported (9+)
- 🥢 Multiple Language Supported (TypeScript & JavaScript)
- 🧶 Optimized Builds
- 🌗 Light & Dark Mode

Installing


Node >= 14.18.0


  1. ```bash
  2. # use npm-create command, or use pnpm | yarn
  3. λ npm create chrome-ext

  5. # or use npx command
  6. λ npx create-chrome-ext

  8. # or use npm-init command
  9. λ npm init chrome-ext
  10. ```

Usage


You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Svelte project, run:

  1. ```bash
  2. # npm 6.x
  3. λ npm create chrome-ext@latest my-crx-app --template svelte-js

  5. # or npm 7+, extra double-dash is needed:
  6. λ npm create chrome-ext@latest my-crx-app -- --template react-ts

  8. # or yarn
  9. λ yarn create chrome-ext my-crx-app --template vue-ts

  11. # or pnpm
  12. λ pnpm create chrome-ext my-crx-app --template vanilla-ts
  13. ```

You can also generator the project with crx cli, run:

  1. ```bash
  2. λ npm install create-chrome-ext --global

  4. # and then
  5. λ crx my-crx-app
  6. # or
  7. λ crx my-crx-app --template preact-js
  8. # or use create-chrome-exe (global env)
  9. λ create-chrome-ext my-crx-app
  10. ```

Supported Templates


framework presets include:

React · Vue · Svelte · Preact · Solid · Alpine · Lit · Inferno · Stencil · Vanilla

languages supported:

JavaScript · TypeScript