Vite Plugin Chrome Extension 使用教程
1. 项目的目录结构及介绍
vite-plugin-chrome-extension/
├── src/
│ ├── assets/
│ ├── background/
│ ├── content/
│ ├── options/
│ ├── popup/
│ └── manifest.json
├── public/
├── vite.config.js
├── package.json
└── README.md
src/
: 源代码目录,包含所有扩展的主要功能代码。assets/
: 存放静态资源文件,如图片等。background/
: 存放后台脚本文件。content/
: 存放内容脚本文件。options/
: 存放选项页面的代码。popup/
: 存放弹出页面的代码。manifest.json
: Chrome 扩展的清单文件。
public/
: 公共资源目录,通常存放不需要经过构建处理的文件。vite.config.js
: Vite 的配置文件。package.json
: 项目的依赖和脚本配置文件。README.md
: 项目说明文档。
2. 项目的启动文件介绍
项目的启动文件主要是 vite.config.js
,它配置了 Vite 的行为,包括插件的使用、构建选项等。以下是一个简单的示例:
import { defineConfig } from 'vite';
import { chromeExtension } from 'vite-plugin-chrome-extension';
export default defineConfig({
plugins: [chromeExtension()],
});
这个配置文件使用了 vite-plugin-chrome-extension
插件,确保 Vite 能够正确处理 Chrome 扩展的构建和打包。
3. 项目的配置文件介绍
manifest.json
manifest.json
是 Chrome 扩展的核心配置文件,定义了扩展的基本信息、权限、资源路径等。以下是一个简单的示例:
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension built with Vite",
"permissions": [
"storage"
],
"background": {
"service_worker": "src/background/index.js"
},
"action": {
"default_popup": "src/popup/index.html",
"default_icon": {
"16": "src/assets/icon16.png",
"48": "src/assets/icon48.png",
"128": "src/assets/icon128.png"
}
},
"icons": {
"16": "src/assets/icon16.png",
"48": "src/assets/icon48.png",
"128": "src/assets/icon128.png"
}
}
manifest_version
: 指定清单文件的版本,目前为 3。name
: 扩展的名称。version
: 扩展的版本号。description
: 扩展的描述。permissions
: 扩展所需的权限。background
: 后台脚本的配置。action
: 扩展图标点击后的弹出页面配置。icons
: 扩展的图标配置。
vite.config.js
vite.config.js
是 Vite 的配置文件,用于配置构建和开发服务器的行为。以下是一个简单的示例:
import { defineConfig } from 'vite';
import { chromeExtension } from 'vite-plugin-chrome-extension';
export default defineConfig({
plugins: [chromeExtension()],
build: {
rollupOptions: {
input: {
manifest: './src/manifest.json'
}
}
}
});
plugins
: 使用的插件列表,这里使用了vite-plugin-chrome-extension
插件。build
: 构建选项,rollupOptions
指定了构建的入口文件。
通过以上配置,可以确保 Vite 能够正确处理 Chrome 扩展的构建和打包。