WXT开发环境搭建：5分钟快速上手指南 ⚡

WXT开发环境搭建：5分钟快速上手指南 ⚡

【免费下载链接】wxt ⚡ Next-gen Web Extension Framework 项目地址: https://gitcode.com/gh_mirrors/wx/wxt

想要快速构建现代化的浏览器扩展程序吗？WXT作为下一代Web扩展框架，为您提供了简单高效的开发体验。本文将带您了解如何在5分钟内完成WXT开发环境的完整搭建。

🚀 快速开始：一键初始化项目

WXT提供了便捷的项目初始化命令，无论您使用哪种包管理器，都能轻松上手：

PNPM用户：

pnpm dlx wxt@latest init

NPM用户：

npx wxt@latest init

Bun用户：

bunx wxt@latest init

初始化过程将引导您选择项目模板，包括Vanilla、Vue、React、Svelte和Solid等多种选择，所有模板都默认使用TypeScript。

📋 从零开始搭建步骤

如果您希望完全自定义项目结构，可以按照以下步骤手动搭建：

第一步：创建项目目录

mkdir my-extension
cd my-extension

第二步：初始化package.json

根据您使用的包管理器执行相应命令：

• pnpm init（PNPM）
• npm init（NPM）
• bun init（Bun）
• yarn init（Yarn）

第三步：安装WXT依赖

# PNPM
pnpm i -D wxt

# NPM  
npm i -D wxt

# Bun
bun i -D wxt

# Yarn
yarn add --dev wxt

第四步：配置项目脚本

在package.json中添加以下脚本：

{
  "scripts": {
    "dev": "wxt",
    "dev:firefox": "wxt -b firefox",
    "build": "wxt build", 
    "build:firefox": "wxt build -b firefox",
    "zip": "wxt zip",
    "zip:firefox": "wxt zip -b firefox",
    "postinstall": "wxt prepare"
  }
}

🎯 启动开发环境

完成上述配置后，运行开发命令：

pnpm dev  # 或 npm run dev、bun run dev、yarn dev

WXT将自动打开浏览器窗口并安装您的扩展程序，开始您的开发之旅！

💡 后续学习建议

• 深入了解WXT的项目结构
• 配置开发模式下的自动浏览器启动
• 探索WXT示例库学习特定API的使用方法

WXT框架为浏览器扩展开发带来了革命性的改进，让您能够专注于功能实现，而不是繁琐的配置工作。立即开始您的第一个WXT项目吧！🚀

【免费下载链接】wxt ⚡ Next-gen Web Extension Framework 项目地址: https://gitcode.com/gh_mirrors/wx/wxt