Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@leo-millenial/vite-vue-bex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue 3 Chrome Extension Template

🇷🇺 Русское описание | 🇺🇸 English

A modern template for creating Chrome extensions using Vue 3, TypeScript, Vite, and UnoCSS.

Install template

npx degit leo-millenial/vite-vue-bex <my-project-name>

🚀 Features

⚡ Fast development with Vite
🎯 Vue 3 with Composition API and <script setup>
🔷 TypeScript for type safety
🎨 UnoCSS for atomic CSS styling
🌸 DaisyUI for beautiful UI components
🔧 webext-bridge for script communication
📦 webextension-polyfill for cross-browser compatibility
🧪 Vitest for testing
🔄 Hot Module Replacement in development mode

📋 Project Structure (FSD)

src/
├── app/
│   └── background/         # Background scripts
│       └── index.ts
├── content/                # Content scripts
│   └── content.ts
├── pages/
│   ├── popup/              # Popup interface
│   │   ├── index.html
│   │   ├── index.vue
│   │   └── main.ts
│   └── welcome/            # Welcome page
│       ├── index.html
│       ├── index.vue
│       └── main.ts
├── shared/                 # Shared utilities
│   └── config/
└── public/
    └── images/             # Extension icons

🛠 Tech Stack

Core Dependencies

Vue 3 - Progressive JavaScript framework
TypeScript - Typed JavaScript
Vite - Fast build tool and dev server
UnoCSS - Atomic CSS engine
DaisyUI - Tailwind CSS component library

Extensions & Plugins

@crxjs/vite-plugin - Vite plugin for Chrome extensions
@vitejs/plugin-vue - Vue plugin for Vite
webext-bridge - Extension script communication
webextension-polyfill - Cross-browser API

Development Tools

Vitest - Fast testing framework
@vue/test-utils - Vue component testing utilities
ESLint - JavaScript/TypeScript linter
Prettier - Code formatter

🚀 Quick Start

Using npm

# Create new project
npm create @leo-millenial/vite-vue-bex my-extension
cd my-extension

# Install dependencies
npm install

# Start development
npm run dev

Using pnpm

# Create new project
pnpm create @leo-millenial/vite-vue-bex my-extension
cd my-extension

# Install dependencies
pnpm install

# Start development
pnpm run dev

Using yarn

# Clone the template
npx degit your-username/vue3-chrome-extension-template my-extension
cd my-extension

# Install dependencies
pnpm install
# or
npm install
# or
yarn install