使用 Vite、Vue 和 Manifest V3 啟動您的瀏覽器擴充功能開發

使用 Vite、Vue 3 和 Manifest V3 啟動您的瀏覽器擴充功能開發

您是否正在尋找一種快速有效的方法來開始使用現代網頁技術建立瀏覽器擴充功能？隆重介紹我們的由 Vite 驅動的 WebExtension 入門範本！此範本旨在透過結合Vue 3、Vite 和Manifest V3 簡化您的開發流程，讓您能夠為Chrome、Firefox 創建強大且高效的擴展，以及其他瀏覽器。

為什麼選擇這個模板？

從頭開始建立瀏覽器擴充功能可能是一項艱鉅的任務，尤其是當您想要利用 Vue 3 和 Vite 等最新技術時。我們的模板預先包含了基本功能，讓您更輕鬆地專注於開發擴充功能而不是設定環境。

主要特點

• Vue 3 Composition API：透過 Composition API 和 充分利用 Vue 3 的強大功能。
• HMR（熱模組替換）：透過 HMR 對擴充頁面和內容腳本的支援獲得即時回饋。
• Tailwind CSS 和 daisyUI：使用由 daisyUI 元件增強的 Tailwind CSS 輕鬆設計您的擴充功能。
• TypeScript：透過完整的 TypeScript 支援享受類型安全的開發體驗。
• 自動建置流程：使用 GitHub Actions 輕鬆建置和發佈您的擴充功能。
• Webext-Bridge：使用 Webext-Bridge 簡化上下文之間的通訊。

完整功能列表

• Vue DevTools 支援：在擴充頁面和內容腳本中偵錯您的 Vue 應用程式。
• Vue Router：由 unplugin-vue-router 支援的自動路由註冊。
• 自動導入元件：使用 unplugin-vue-components 和 unplugin-icons 自動導入元件和圖示。
• 預先配置的 ESLint 和 Prettier：使用針對 Vue、JavaScript 和 TypeScript 的預先配置 ESLint 和 Prettier 來維護程式碼品質。
• UI 框架：利用 Tailwind CSS 外掛程式進行排版、表單等。
• 多瀏覽器支援：針對 Chrome、Firefox 和其他具有特定配置的基於 Chromium 的瀏覽器進行建置。

使用說明

克隆並開始

首先，複製模板：

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

專案結構

模板的組織方式易於導航：

• src：主要來源目錄。
• content-script：內容腳本的腳本和元件。
• 背景：後台腳本。
• popup：彈出 Vue.js 應用程式。
• 選項：選項Vue.js應用程式。
• 設定：安裝和更新事件的頁面。
• 離螢幕：用於音訊或螢幕錄製等進階功能的離螢幕頁面。
• 組件：共用Vue組件。

開發與建設

啟動開發伺服器：

pnpm dev

建置生產擴充：

pnpm build

瀏覽器配置

• manifest.config.ts：基本擴充清單。
• vite.config.ts：基礎 Vite 設定。

貢獻並提供回饋

我們一直致力於改進此模板，您的回饋非常寶貴。請花一點時間填寫我們的回饋表，讓我們知道您希望看到哪些功能，或者您是否有興趣在模板準備好後購買。您的回應將塑造該項目的未來。

最後的想法

這個 Vite Vue 3 WebExtension 範本旨在讓您的開發體驗流暢且有效率。無論您是建立簡單的實用程式還是複雜的擴展，此範本都能滿足您的需求。嘗試一下，讓我們知道您的想法！

編碼愉快！

以上是使用 Vite、Vue 和 Manifest V3 啟動您的瀏覽器擴充功能開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！