Vue 3 + Vite + CRXJS

This template helps you quickly start developing Chrome extensions with Vue 3, TypeScript and Vite. It includes the CRXJS Vite plugin for seamless Chrome extension development.

Features

• Vue 3 with <script setup> syntax
• TypeScript support
• Vite build tool
• CRXJS Vite plugin integration
• Chrome extension manifest configuration

Quick Start

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. Open Chrome and navigate to chrome://extensions/, enable "Developer mode", and load the unpacked extension from the dist directory.

4. Build for production:

npm run build

Project Structure

• src/popup/ - Extension popup UI
• src/content/ - Content scripts
• manifest.config.ts - Chrome extension manifest configuration

Documentation

• Vue 3 Documentation
• Vite Documentation
• CRXJS Documentation

Chrome Extension Development Notes

• Use manifest.config.ts to configure your extension
• The CRXJS plugin automatically handles manifest generation
• Content scripts should be placed in src/content/
• Popup UI should be placed in src/popup/

CI/CD

https://www.npmjs.com/package/chrome-webstore-upload-cli

pnpm dlx shadcn-vue@1.0.3 add

https://18055975947.github.io/extension/

https://crxjs.dev/zh/guide/installation/create-crxjs

webext-bridge 用法

https://www.doubao.com/thread/wdee2a57ba429b4b5