Vue3+Vite的项目结构

my-chrome-extension/
├── src/
│   ├── assets/           # 静态资源
│   ├── components/       # 可重用的Vue组件
│   ├── composables/      # 自定义的组合式API函数
│   ├── router/           # Vue Router配置
│   ├── store/            # 状态管理文件
│   ├── views/            # 页面级别的组件
│   ├── App.vue           # 应用的根组件
│   ├── main.js           # 应用的入口文件
│   └── styles/           # 全局样式
├── public/               # 静态资源目录
│   ├── manifest.json     # Chrome插件的配置文件
│   └── index.html        # 入口HTML文件
├── package.json          # 项目依赖和脚本
├── vite.config.js        # Vite配置文件
└── tsconfig.json         # TypeScript配置文件（可选）

打包和部署

npm run build

构建完成后，将dist目录打包成.crx文件，或者直接将dist目录加载到Chrome浏览器中进行测试。