Starten Sie die Entwicklung Ihrer Browsererweiterung mit Vite, Vue und Manifest V3

Starten Sie die Entwicklung Ihrer Browsererweiterung mit Vite, Vue 3 und Manifest V3

Suchen Sie nach einer schnellen und effizienten Möglichkeit, mit der Erstellung von Browsererweiterungen mit modernen Webtechnologien zu beginnen? Wir stellen Ihnen unsere Vite-basierte WebExtension-Startervorlage vor! Diese Vorlage wurde entwickelt, um Ihren Entwicklungsprozess durch die Kombination von Vue 3, Vite und Manifest V3 zu optimieren, sodass Sie leistungsstarke und effiziente Erweiterungen für Chrome und Firefox erstellen können , und andere Browser.

Warum diese Vorlage?

Das Erstellen einer Browser-Erweiterung von Grund auf kann eine entmutigende Aufgabe sein, insbesondere wenn Sie die neuesten Technologien wie Vue 3 und Vite nutzen möchten. Unsere Vorlage ist mit wesentlichen Funktionen ausgestattet, sodass Sie sich leichter auf die Entwicklung Ihrer Erweiterung konzentrieren können, anstatt die Umgebung einzurichten.

Hauptmerkmale

• Vue 3 Composition API: Nutzen Sie die volle Leistung von Vue 3 mit Composition API und .
• HMR (Hot Module Replacement): Erhalten Sie sofortiges Feedback mit HMR-Unterstützung für Erweiterungsseiten und Inhaltsskripte.
• Tailwind CSS & daisyUI: Gestalten Sie Ihre Erweiterungen mühelos mit Tailwind CSS, erweitert durch daisyUI-Komponenten.
• TypeScript: Genießen Sie ein typsicheres Entwicklungserlebnis mit vollständiger TypeScript-Unterstützung.
• Automatisierter Build-Prozess: Erstellen und veröffentlichen Sie Ihre Erweiterung ganz einfach mit GitHub Actions.
• Webext-Bridge: Vereinfachen Sie die Kommunikation zwischen Kontexten mit Webext-Bridge.

Vollständige Funktionsliste

• Vue DevTools-Unterstützung: Debuggen Sie Ihre Vue-Anwendungen in Erweiterungsseiten und Inhaltsskripten.
• Vue Router: Automatische Routenregistrierung, unterstützt durch unplugin-vue-router.
• Automatisch importierte Komponenten: Importieren Sie Komponenten und Symbole automatisch mit unplugin-vue-components und unplugin-icons.
• Vorkonfiguriertes ESLint und Prettier: Behalten Sie die Codequalität mit vorkonfiguriertem ESLint und Prettier für Vue, JavaScript und TypeScript bei.
• UI-Frameworks: Nutzen Sie Tailwind-CSS-Plugins für Typografie, Formulare und mehr.
• Multi-Browser-Unterstützung: Erstellen Sie für Chrome, Firefox und andere Chromium-basierte Browser mit spezifischen Konfigurationen.

Gebrauchsanweisung

Klonen und loslegen

Um zu beginnen, klonen Sie die Vorlage:

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

Projektstruktur

Die Vorlage ist für eine einfache Navigation organisiert:

• src: Hauptquellverzeichnis.
• content-script: Skripte und Komponenten für Inhaltsskripte.
• Hintergrund: Hintergrundskripte.
• Popup: Popup-Vue.js-Anwendung.
• Optionen: Optionen der Vue.js-Anwendung.
• Setup: Seiten für Installations- und Update-Ereignisse.
• Offscreen: Offscreen-Seiten für erweiterte Funktionen wie Audio oder Bildschirmaufzeichnung.
• Komponenten: Gemeinsam genutzte Vue-Komponenten.

Entwicklung und Bau

So starten Sie den Entwicklungsserver:

pnpm dev

So erstellen Sie die Erweiterung für die Produktion:

pnpm build

Browserkonfigurationen

• manifest.config.ts: Basiserweiterungsmanifest.
• vite.config.ts: Basis-Vite-Konfiguration.

Tragen Sie bei und geben Sie Feedback

Wir arbeiten ständig an der Verbesserung dieser Vorlage und Ihr Feedback ist von unschätzbarem Wert. Bitte nehmen Sie sich einen Moment Zeit, um unser Feedback-Formular auszufüllen und uns mitzuteilen, welche Funktionen Sie gerne sehen würden oder ob Sie daran interessiert wären, die Vorlage zu kaufen, sobald sie fertig ist. Ihre Antworten werden die Zukunft dieses Projekts prägen.

Letzte Gedanken

Diese Vite Vue 3 WebExtension-Vorlage wurde entwickelt, um Ihre Entwicklungserfahrung reibungslos und effizient zu gestalten. Egal, ob Sie ein einfaches Dienstprogramm oder eine komplexe Erweiterung erstellen, mit dieser Vorlage sind Sie bestens gerüstet. Probieren Sie es aus und teilen Sie uns Ihre Meinung mit!

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonStarten Sie die Entwicklung Ihrer Browsererweiterung mit Vite, Vue und Manifest V3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!