使用指南：vite-plugin-vue-crx3 - 开发Chrome扩展的现代方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00190/article/details/142270114

使用指南：vite-plugin-vue-crx3 - 开发Chrome扩展的现代方案

vite-plugin-vue-crx3 本Vite插件用于使用vite2+vue3开发chrome拓展（manifest v3），且支持开发过程中插件热重载项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-vue-crx3

1. 项目目录结构及介绍

当你克隆下来vite-plugin-vue-crx3示例或在自己的项目中集成此插件时，理想的项目结构应大致如下：

my-chrome-extension/
├── public/                 # 存放公共静态资源，如语言包
├── src/
│   ├── assets/             # 资源文件，如图片、字体
│   ├── components/         # 共享的Vue组件
│   ├── store/              # 数据管理，适用于多页应用状态管理
│   ├── libs/               # 拓展特定逻辑文件，例如popup.html, newtab.html及其对应的JavaScript逻辑
│   │   └── background/    # 示例背景脚本目录，包括main.js
│   ├── manifest.json      # 开发用的manifest文件，定义扩展的基础信息
│   └── vite.config.js     # Vite构建配置
├── .gitignore             # Git忽略文件配置
├── package.json           # 项目配置与依赖管理
├── README.md              # 项目说明文档
└── dist/                  # 构建生成的扩展文件存放目录

public: 存储不会被Vite构建过程处理的静态资源。
src: 包含所有开发源代码，重要的是manifest.json，它定义了扩展的各项配置。
vite.config.js: Vite配置文件，引入vite-plugin-vue-crx3的关键所在。
package.json: 包含项目的元数据，脚本命令等。

2. 项目的启动文件介绍

主启动配置：`package.json`的脚本命令

通常，你的package.json文件会有类似这样的脚本配置：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview", // 可选：预览构建结果
  "watch": "vite build --watch" // 开发时使用的热重载命令
}

dev: 用于启动Vite开发服务器，但这个项目可能更倾向使用watch命令。
build: 执行构建任务，生成最终的Chrome扩展文件。
watch: 开发期间使用的命令，支持热重载，便于实时看到更改效果。

Vite配置文件：`vite.config.js`

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import crx3 from "vite-plugin-vue-crx3";

export default defineConfig({
  plugins: [vue(), crx3()],
  resolve: {
    alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
  },
  build: {
    target: "es2015",
    rollupOptions: {
      input: resolve(__dirname, "src/manifest.json"), // 指定manifest.json作为入口
    },
  },
});

这部分配置是启动和构建项目的核心，特别注意将manifest.json设为了构建的入口点，并启用了对Vue的支持。