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
项目的基本使用教程,包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助!