Lancez le développement de votre extension de navigateur avec Vite, Vue et Manifest V3

Lancez le développement de votre extension de navigateur avec Vite, Vue 3 et Manifest V3

Vous recherchez un moyen rapide et efficace de commencer à créer des extensions de navigateur avec les technologies Web modernes ? Présentation de notre Modèle de démarrage d'extension Web alimenté par Vite ! Ce modèle est conçu pour rationaliser votre processus de développement en combinant Vue 3, Vite et Manifest V3, vous permettant de créer des extensions puissantes et efficaces pour Chrome, Firefox. , et d'autres navigateurs.

Pourquoi ce modèle ?

Créer une extension de navigateur à partir de zéro peut être une tâche ardue, surtout lorsque vous souhaitez tirer parti des dernières technologies telles que Vue 3 et Vite. Notre modèle est pré-emballé avec des fonctionnalités essentielles, ce qui vous permet de vous concentrer plus facilement sur le développement de votre extension plutôt que sur la configuration de l'environnement.

Principales fonctionnalités

• API de composition Vue 3 : exploitez toute la puissance de Vue 3 avec l'API de composition et la .
• HMR (Hot Module Remplacement) : obtenez des commentaires instantanés grâce à la prise en charge HMR pour les pages d'extension et les scripts de contenu.
• Tailwind CSS & daisyUI : stylisez vos extensions sans effort avec Tailwind CSS, amélioré par les composants daisyUI.
• TypeScript : profitez d'une expérience de développement sécurisée avec une prise en charge complète de TypeScript.
• Processus de construction automatisé : créez et publiez facilement votre extension à l'aide des actions GitHub.
• Webext-Bridge : Simplifiez la communication entre les contextes avec Webext-Bridge.

Liste complète des fonctionnalités

• Prise en charge de Vue DevTools : déboguez vos applications Vue dans les pages d'extension et les scripts de contenu.
• Vue Router : enregistrement automatique des itinéraires alimenté par unplugin-vue-router.
• Composants importés automatiquement : importez automatiquement des composants et des icônes avec unplugin-vue-components et unplugin-icons.
• ESLint et Prettier préconfigurés : maintenez la qualité du code avec ESLint et Prettier préconfigurés pour Vue, JavaScript et TypeScript.
• Cadres d'interface utilisateur : utilisez les plugins CSS Tailwind pour la typographie, les formulaires et bien plus encore.
• Prise en charge de plusieurs navigateurs : conçu pour Chrome, Firefox et d'autres navigateurs basés sur Chromium avec des configurations spécifiques.

Instructions d'utilisation

Cloner et démarrer

Pour commencer, clonez le modèle :

pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm i

Structure du projet

Le modèle est organisé pour une navigation facile :

• src : Répertoire source principal.
• content-script : Scripts et composants pour les scripts de contenu.
• arrière-plan : Scripts d'arrière-plan.
• popup : Application Popup Vue.js.
• options : Options de l'application Vue.js.
• configuration : pages pour les événements d'installation et de mise à jour.
• hors écran : pages hors écran pour des fonctionnalités avancées telles que l'enregistrement audio ou d'écran.
• composants : composants Vue partagés.

Développement et construction

Pour démarrer le serveur de développement :

pnpm dev

Pour construire l'extension pour la production :

pnpm build

Configurations du navigateur

• manifest.config.ts : manifeste d'extension de base.
• vite.config.ts : Configuration de base de Vite.

Contribuer et fournir des commentaires

Nous travaillons constamment à l'amélioration de ce modèle et vos commentaires sont inestimables. Veuillez prendre un moment pour remplir notre formulaire de commentaires et nous faire savoir quelles fonctionnalités vous aimeriez voir ou si vous seriez intéressé à acheter le modèle une fois qu'il sera prêt. Vos réponses façonneront l’avenir de ce projet.

Pensées finales

Ce modèle WebExtension Vite Vue 3 est conçu pour rendre votre expérience de développement fluide et efficace. Que vous créiez un utilitaire simple ou une extension complexe, ce modèle est là pour vous. Essayez-le et dites-nous ce que vous en pensez !

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!