Vite Plugin Web Extension 项目教程

Vite Plugin Web Extension 项目教程

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

1. 项目目录结构及介绍

vite-plugin-web-extension/
├── github/
│   └── workflows/
├── husky/
├── src/
│   ├── background/
│   ├── entries/
│   │   └── devtools/
│   └── ...
├── test/
├── types/
├── .gitattributes
├── .gitignore
├── .prettierignore
├── CHANGELOG.md
├── LICENSE
├── MIGRATION.md
├── README.md
├── client.d.ts
├── client.mjs
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── vite.config.js

目录结构介绍

• github/workflows/: 包含GitHub Actions的工作流配置文件。
• husky/: 包含Husky的配置文件，用于Git钩子。
• src/: 项目的源代码目录，包含背景脚本、入口文件等。
  • background/: 包含背景脚本的源代码。
  • entries/: 包含各种入口文件，如devtools的入口文件。
• test/: 包含项目的测试代码。
• types/: 包含TypeScript的类型定义文件。
• .gitattributes: Git属性配置文件。
• .gitignore: Git忽略文件配置。
• .prettierignore: Prettier忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• MIGRATION.md: 项目迁移指南。
• README.md: 项目介绍和使用说明。
• client.d.ts: TypeScript客户端类型定义文件。
• client.mjs: 客户端模块文件。
• package.json: 项目的npm配置文件。
• pnpm-lock.yaml: pnpm的锁定文件。
• tsconfig.json: TypeScript配置文件。
• vite.config.js: Vite配置文件。

2. 项目启动文件介绍

启动文件

• src/background/script.js: 背景脚本文件，用于处理后台任务。
• src/entries/devtools/index.html: DevTools的入口HTML文件。
• src/entries/devtools/devtools.js: DevTools的脚本文件。

启动流程

1. 背景脚本: 在vite.config.js中配置背景脚本，Vite会自动加载并执行该脚本。
2. DevTools: 在vite.config.js中配置devtools_page，Vite会加载src/entries/devtools/index.html，并执行devtools.js。

3. 项目的配置文件介绍

vite.config.js

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

export default defineConfig({
  plugins: [
    webExtension({
      manifest: {
        name: pkg.name,
        description: pkg.description,
        version: pkg.version,
        manifest_version: 3,
        background: {
          service_worker: "src/background/serviceWorker.js",
        },
        devtools_page: "src/entries/devtools/index.html",
      },
      useDynamicUrlWebAccessibleResources: false,
    }),
  ],
});

配置文件介绍

• plugins: 配置Vite插件，这里使用了@samrum/vite-plugin-web-extension插件。
• manifest: 定义Web扩展的Manifest配置，包括名称、描述、版本、背景脚本和DevTools页面。
• useDynamicUrlWebAccessibleResources: 配置是否使用动态URL的Web可访问资源。

通过以上配置，Vite会根据Manifest文件生成跨浏览器的ES模块化Web扩展，并支持HMR（热模块替换）和Manifest V3的特性。

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