Vite Web Extension 项目教程

Vite Web Extension 项目教程

vite-web-extensionVite web extension template. Setup with React, Typescript and TailwindCSS项目地址:https://gitcode.com/gh_mirrors/vi/vite-web-extension

1、项目介绍

Vite Web Extension 是一个基于 Vite 的插件，用于生成跨浏览器平台的 ES 模块化 Web 扩展。该项目支持完全基于 ES 模块的扩展，包括内容脚本、Vite 的 HTML 和静态资源处理、HMR（热模块替换）支持、Manifest V3 支持等。它还支持多种前端框架（如 Preact、React、Solid、Svelte、Vanilla、Vue）和 TypeScript。

2、项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令初始化一个新的 Vite Web Extension 项目：

npm init @samrum/vite-plugin-web-extension@latest

配置

在项目根目录下创建一个 vite.config.js 文件，并添加以下配置：

import { defineConfig } from "vite";
import webExtension from "@samrum/vite-plugin-web-extension";

export default defineConfig({
  plugins: [
    webExtension({
      manifest: {
        // 你的 Manifest 配置
      },
    }),
  ],
});

开发

使用以下命令启动开发服务器：

npm run dev

构建

使用以下命令构建生产版本：

npm run build

3、应用案例和最佳实践

应用案例

Vite Web Extension 可以用于开发各种浏览器扩展，例如：

• 广告拦截器：通过内容脚本拦截广告请求。
• 网页增强工具：通过注入脚本增强网页功能，如自动填写表单、页面美化等。
• 开发工具：为开发者提供调试工具，如查看网络请求、DOM 结构等。

最佳实践

• 模块化开发：使用 ES 模块进行代码组织，提高代码的可维护性。
• HMR 支持：利用 Vite 的 HMR 功能，加快开发速度。
• Manifest V3 支持：确保扩展兼容最新的 Manifest V3 规范。

4、典型生态项目

• Vite：Vite 是一个快速的构建工具，支持现代前端开发。
• TypeScript：TypeScript 提供了静态类型检查，提高代码质量。
• Preact/React/Solid/Svelte/Vue：这些前端框架可以与 Vite Web Extension 结合使用，提供丰富的 UI 组件和开发体验。

通过以上步骤，你可以快速上手 Vite Web Extension 项目，并开发出功能强大的浏览器扩展。

vite-web-extensionVite web extension template. Setup with React, Typescript and TailwindCSS项目地址:https://gitcode.com/gh_mirrors/vi/vite-web-extension