Vite 插件 Web 扩展开发指南

Vite 插件 Web 扩展开发指南

vite-plugin-web-extensionA vite plugin for generating cross browser platform, ES module based web extensions.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-web-extension

项目介绍

vite-plugin-web-extension 是一个用于生成跨浏览器平台的 ES 模块基础的 Web 扩展的 Vite 插件。该插件支持完全 ES 模块化的扩展，包括内容脚本、Vite 基础的 HTML 和静态资源处理、HMR 支持以及所有 Manifest 入口点。此外，它还支持 Manifest V3，并从 Chromium 110 开始提供支持。

项目快速启动

创建一个新的 Vite Web 扩展项目

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

安装依赖

npm install

配置 Vite

在 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

应用案例和最佳实践

案例一：使用 React 开发扩展

1. 初始化项目：

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

2. 配置 Vite：

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import webExtension from "@samrum/vite-plugin-web-extension";
   
   export default defineConfig({
     plugins: [
       react(),
       webExtension({
         manifest: {
           // 你的 manifest 配置
         },
       }),
     ],
   });
   

3. 开发和调试：

   使用 npm run dev 启动开发服务器，并在浏览器中安装扩展进行调试。

最佳实践

• 模块化开发：充分利用 ES 模块的优势，将功能拆分为多个模块。
• HMR 支持：在开发过程中启用 HMR，提高开发效率。
• Manifest 配置：合理配置 Manifest，确保扩展在不同浏览器中的兼容性。

典型生态项目

Vite

vite-plugin-web-extension 依赖于 Vite，Vite 是一个现代的前端构建工具，提供快速的开发服务器和高效的构建过程。

React、Vue、Preact 等框架

该插件支持多种前端框架，如 React、Vue、Preact 等，开发者可以根据项目需求选择合适的框架进行开发。

Manifest V3

Manifest V3 是 Chrome 扩展的新标准，提供了更好的安全性和性能。vite-plugin-web-extension 支持 Manifest V3，帮助开发者适应新的扩展开发标准。

通过以上内容，您可以快速上手并深入了解 vite-plugin-web-extension 插件的使用和开发。希望这篇指南对您有所帮助！

vite-plugin-web-extensionA vite plugin for generating cross browser platform, ES module based web extensions.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-web-extension