Vite Plugin Web Extension 使用教程

Vite Plugin Web Extension 使用教程

1. 项目的目录结构及介绍

vite-plugin-web-extension/
├── src/
│   ├── assets/
│   ├── content-scripts/
│   ├── background.ts
│   ├── manifest.json
│   └── ...
├── vite.config.js
├── package.json
└── ...

• src/: 项目的主要源代码目录。
  • assets/: 存放静态资源文件，如图片、样式文件等。
  • content-scripts/: 存放内容脚本文件。
  • background.ts: 后台脚本文件。
  • manifest.json: 扩展的配置文件。
• vite.config.js: Vite 项目的配置文件。
• package.json: 项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 vite.config.js，它包含了 Vite 的配置信息，以及插件的配置信息。以下是一个示例：

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

export default defineConfig({
  plugins: [
    webExtension({
      manifest: "src/manifest.json",
    }),
  ],
});

3. 项目的配置文件介绍

vite.config.js

vite.config.js 是 Vite 项目的配置文件，它包含了项目的构建和开发配置。以下是一个示例：

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

export default defineConfig({
  plugins: [
    webExtension({
      manifest: "src/manifest.json",
    }),
  ],
  build: {
    outDir: "dist",
  },
});

manifest.json

manifest.json 是 Web 扩展的配置文件，它定义了扩展的基本信息、权限、入口点等。以下是一个示例：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A sample extension",
  "permissions": ["storage"],
  "background": {
    "service_worker": "background.ts"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-scripts/main.js"]
    }
  ]
}

以上是 vite-plugin-web-extension 项目的基本使用教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！