WXT 模板

基于 WXT + Vue 3 + TypeScript 的现代化浏览器扩展开发模板，提供完整的开发工具链和最佳实践。

技术栈

WXT - 现代化的浏览器扩展开发框架
Vue 3 - 渐进式 JavaScript 框架
TypeScript - JavaScript 的超集，提供类型安全
Vite - 快速的构建工具
Tailwind CSS - 实用优先的 CSS 框架
Chrome Extension API - 浏览器扩展 API

快速开始

创建项目

bash

# 初始化项目
vup init my-project

# 进入项目目录
cd my-project

# 添加 WXT 应用
vup add my-extension
# 选择 WXT 模板

开发

bash

# 安装依赖
pnpm install

# Chrome 扩展开发
pnpm dev

# Firefox 扩展开发
pnpm dev:firefox

开发服务器将在 http://localhost:9306 启动

构建

bash

# Chrome 扩展构建
pnpm build

# Firefox 扩展构建
pnpm build:firefox

# 打包扩展
pnpm zip

项目结构

my-extension/
├── src/
│   ├── entrypoints/             # 扩展入口点
│   │   ├── background.ts        # 后台脚本
│   │   ├── content.ts           # 内容脚本
│   │   ├── newtab.html          # 新标签页
│   │   ├── newtab/              # 新标签页组件
│   │   │   ├── main.ts          # Vue 应用入口
│   │   │   └── App.vue          # 新标签页组件
│   │   ├── options.html         # 设置页面
│   │   ├── options/             # 设置页面组件
│   │   │   ├── main.ts          # Vue 应用入口
│   │   │   └── App.vue          # 设置页面组件
│   │   └── popup/               # 弹窗页面
│   │       ├── index.html       # 弹窗 HTML
│   │       ├── main.ts          # Vue 应用入口
│   │       ├── App.vue          # 弹窗组件
│   │       └── style.css        # 弹窗样式
│   ├── components/              # 共享组件
│   ├── composables/             # Vue 组合式函数
│   ├── assets/                  # 静态资源
│   └── manifest.ts              # 扩展清单配置
├── public/                      # 公共资源
│   └── icon/                    # 扩展图标
├── wxt.config.ts                # WXT 配置文件
├── package.json                 # 项目配置
└── tsconfig.json                # TypeScript 配置

核心特性

🎯 TypeScript 支持

完整的 TypeScript 支持，提供类型安全和智能提示：

typescript

// 组件中使用 TypeScript
<script setup lang="ts">
interface ExtensionSettings {
  theme: 'light' | 'dark';
  autoSave: boolean;
}

const settings = ref<ExtensionSettings>({
  theme: 'light',
  autoSave: true,
});
</script>

📱 多入口点支持

WXT 支持多种扩展入口点：

弹窗页面 (popup) - 点击扩展图标显示
新标签页 (newtab) - 替换浏览器新标签页
设置页面 (options) - 扩展配置界面
后台脚本 (background) - 扩展后台逻辑
内容脚本 (content) - 页面注入脚本

🎨 现代化 UI

基于 Tailwind CSS 的现代化界面：

vue

<template>
  <div class="popup-container">
    <div class="success-section">
      <div class="success-visual">
        <img src="/wxt.svg" alt="WXT Logo" class="wxt-logo" />
        <img
          src="@_shared/assets/images/vup.svg"
          alt="VUP Logo"
          class="vup-logo"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.popup-container {
  @apply w-96 min-h-96 bg-gradient-to-br from-blue-500 to-purple-600;
  @apply text-white p-5;
}

.wxt-logo,
.vup-logo {
  @apply w-12 h-12 drop-shadow-lg;
  @apply transition-transform duration-300 hover:scale-110;
}
</style>

🔧 扩展功能

丰富的扩展功能支持：

typescript

// 后台脚本
export default defineBackground(() => {
  console.log('Background script loaded');

  // 监听扩展安装
  chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed');
  });
});

// 内容脚本
export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    console.log('Content script loaded on Google');
  },
});

🏪 状态管理

使用 Vue 3 的响应式系统：

typescript

// 扩展设置管理
const useExtensionSettings = () => {
  const settings = ref({
    theme: 'light',
    autoSave: true,
  });

  const updateSettings = (newSettings: Partial<typeof settings.value>) => {
    settings.value = { ...settings.value, ...newSettings };
    chrome.storage.sync.set({ settings: settings.value });
  };

  return { settings, updateSettings };
};

开发工具

代码质量

ESLint - 代码质量检查
Prettier - 代码格式化
TypeScript - 类型检查

开发命令

bash

# 开发服务器
pnpm dev                    # Chrome 扩展开发
pnpm dev:firefox           # Firefox 扩展开发

# 构建
pnpm build                 # Chrome 扩展构建
pnpm build:firefox         # Firefox 扩展构建

# 打包
pnpm zip                   # Chrome 扩展打包
pnpm zip:firefox           # Firefox 扩展打包

# 代码质量
pnpm lint                  # 代码检查
pnpm lint:fix              # 自动修复问题
pnpm format                # 代码格式化

热重载

WXT 提供极速的热重载体验：

修改 Vue 文件时自动刷新
修改 TypeScript 文件时热更新
保持扩展状态

扩展开发

弹窗页面

vue

<template>
  <div class="popup-container">
    <h1>{{ title }}</h1>
    <button @click="openNewTab" class="action-btn">打开新标签页</button>
  </div>
</template>

<script setup lang="ts">
const title = ref('VUP 1.5x 扩展');

const openNewTab = () => {
  chrome.tabs.create({ url: chrome.runtime.getURL('/newtab.html') });
};
</script>

新标签页

vue

<template>
  <div class="newtab-container">
    <div class="hero-section">
      <h1>VUP 1.5x</h1>
      <p>基于 WXT + Vue 3 的现代化浏览器扩展</p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 新标签页逻辑
</script>

设置页面

vue

<template>
  <div class="options-container">
    <h1>扩展设置</h1>
    <form @submit.prevent="saveSettings">
      <label>
        <input v-model="settings.theme" type="radio" value="light" />
        浅色主题
      </label>
      <label>
        <input v-model="settings.theme" type="radio" value="dark" />
        深色主题
      </label>
      <button type="submit">保存设置</button>
    </form>
  </div>
</template>

<script setup lang="ts">
const settings = ref({
  theme: 'light',
});

const saveSettings = () => {
  chrome.storage.sync.set({ settings: settings.value });
};
</script>

内容脚本

typescript

export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    // 在 Google 页面上注入内容
    const button = document.createElement('button');
    button.textContent = 'VUP 1.5x';
    button.onclick = () => {
      console.log('Button clicked!');
    };

    document.body.appendChild(button);
  },
});

配置管理

WXT 配置

typescript

// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  srcDir: 'src',
  modules: ['@wxt-dev/module-vue'],
  dev: {
    server: {
      port: 9306,
      host: '0.0.0.0',
    },
  },
  vite: () => ({
    css: {
      postcss: path.resolve(__dirname, '../../postcss.config.js'),
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "tailwindcss/base";
            @import "tailwindcss/components";
            @import "tailwindcss/utilities";
          `,
        },
      },
    },
  }),
});

扩展清单

typescript

// src/manifest.ts
import { defineManifest } from '@wxt/sdk';

export default defineManifest({
  name: 'VUP 1.5x',
  description: '基于 WXT + Vue 3 的现代化浏览器扩展开发模板',
  version: '1.1.0',
  manifest_version: 3,
  icons: {
    16: '/icon/16.png',
    32: '/icon/32.png',
    48: '/icon/48.png',
    96: '/icon/96.png',
    128: '/icon/128.png',
  },
  action: {
    default_popup: '/popup.html',
    default_title: 'VUP 1.5x 扩展',
  },
  background: {
    service_worker: '/background.js',
  },
  content_scripts: [
    {
      matches: ['<all_urls>'],
      js: ['/content.js'],
    },
  ],
  options_page: '/options.html',
  chrome_url_overrides: {
    newtab: '/newtab.html',
  },
  permissions: ['storage', 'activeTab', 'tabs'],
  host_permissions: ['<all_urls>'],
});

最佳实践

扩展开发

使用 TypeScript 提供类型安全
合理使用 Chrome Extension API
遵循浏览器扩展开发规范
优化扩展性能

状态管理

使用 Chrome Storage API 持久化数据
合理使用 Vue 3 响应式系统
避免在内容脚本中存储大量数据

样式开发

优先使用 Tailwind CSS 类
考虑不同浏览器的兼容性
使用扩展特定的样式作用域

性能优化

合理使用内容脚本
避免阻塞主线程
优化扩展包大小

部署

开发测试

bash

# 构建扩展
pnpm build

# 在 Chrome 中加载扩展
# 1. 打开 chrome://extensions/
# 2. 开启"开发者模式"
# 3. 点击"加载已解压的扩展程序"
# 4. 选择 .output/chrome-mv3 目录

生产发布

bash

# 打包扩展
pnpm zip

# 上传到 Chrome Web Store 或 Firefox Add-ons

部署到 Vercel

WXT 应用可以部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。

WXT 模板 ​

技术栈 ​

快速开始 ​

创建项目 ​

开发 ​

构建 ​

项目结构 ​

核心特性 ​

🎯 TypeScript 支持 ​

📱 多入口点支持 ​

🎨 现代化 UI ​

🔧 扩展功能 ​

🏪 状态管理 ​

开发工具 ​

代码质量 ​

开发命令 ​

热重载 ​

扩展开发 ​

弹窗页面 ​

新标签页 ​

设置页面 ​

内容脚本 ​

配置管理 ​

WXT 配置 ​

扩展清单 ​

最佳实践 ​

扩展开发 ​

状态管理 ​

样式开发 ​

性能优化 ​

部署 ​

开发测试 ​

生产发布 ​

部署到 Vercel ​

相关资源 ​

WXT 模板

技术栈

快速开始

创建项目

开发

构建

项目结构

核心特性

🎯 TypeScript 支持

📱 多入口点支持

🎨 现代化 UI

🔧 扩展功能

🏪 状态管理

开发工具

代码质量

开发命令

热重载

扩展开发

弹窗页面

新标签页

设置页面

内容脚本

配置管理

WXT 配置

扩展清单

最佳实践

扩展开发

状态管理

样式开发

性能优化

部署

开发测试

生产发布

部署到 Vercel

相关资源