使用 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中文网其他相关文章！