网站制作公司官网南京,wordpress 企业模版,网络运营商无服务,深圳品牌网站策划使用 Vite 开发 Chrome 插件时#xff0c;构建多页面以及多 js 文件 因为发现 Vite 多页面构建有很多分歧以及问题点#xff0c;所以我把我在 Chrome 插件开发上面使用到的 Vite 多页面以及多入口文件构建配置单独拿出来 开发 Chrome 插件是#xff0c;一般会需要一个 popup…使用 Vite 开发 Chrome 插件时构建多页面以及多 js 文件 因为发现 Vite 多页面构建有很多分歧以及问题点所以我把我在 Chrome 插件开发上面使用到的 Vite 多页面以及多入口文件构建配置单独拿出来 开发 Chrome 插件是一般会需要一个 popup html 页面有时候还会需要一个 content html 页面但是还需要 service-worker.js 文件以及 content.js 文件
一、Chrome 插件版- Vue 项目构建
我们通过 yarn create vite 创建新的项目然后改成我们插件的项目结构
.
├── README.md
├── manifest.json
├── package.json
├── pnpm-lock.yaml
├── src
│ ├── assets
│ │ └── vue.svg
│ ├── background
│ │ └── service-worker.ts
│ ├── content
│ │ └── content.ts
│ ├── contentPage
│ │ ├── App.vue
│ │ ├── components
│ │ │ └── TestContent.vue
│ │ ├── index.html
│ │ ├── main.ts
│ │ └── style.css
│ ├── icons
│ │ └── icon.png
│ ├── popup
│ │ ├── App.vue
│ │ ├── components
│ │ │ └── TestPopup.vue
│ │ ├── index.html
│ │ ├── main.ts
│ │ └── style.css
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.tsmanifest.json 是插件的入口文件此文件必须有在根目录和 src 目录都行但一般习惯放在根目录中src/popup 是弹框页面src/contentPage 是注入页面的 content 页面和 src/content 的区别是这个最终打包为 index.html 文件通过 iframe 的形式插入对应域名的页面中src/background 是 service-worker 页面V3 虽然也叫 background但是这个文件一般都写成 service-workersrc/content 是对应域名的 content.ts 文件src/icons 是放置插件的 16、32、48、128 的 png 图片可以用一张 128 的也行
二、配置 Vite.config.ts 文件
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import path from path
import copy from rollup-plugin-copy// https://vitejs.dev/config/
export default defineConfig({root: src/,plugins: [vue(),copy({targets: [{ src: manifest.json, dest: dist },{ src: src/icons/**, dest: dist/icons }]})],build: {outDir: path.resolve(__dirname, dist),rollupOptions: {input: {popup: path.resolve(__dirname, src/popup/index.html),contentPage: path.resolve(__dirname, src/contentPage/index.html),content: path.resolve(__dirname, src/content/content.ts),background: path.resolve(__dirname, src/background/service-worker.ts),},output: {assetFileNames: assets/[name]-[hash].[ext], // 静态资源chunkFileNames: js/[name]-[hash].js, // 代码分割中产生的 chunkentryFileNames: (chunkInfo) { // 入口文件const baseName path.basename(chunkInfo.facadeModuleId, path.extname(chunkInfo.facadeModuleId))const saveArr [content, service-worker]return [name]/${saveArr.includes(baseName) ? baseName : chunkInfo.name}.js;},name: [name].js}},},
})引入 rollup-plugin-copy 是通过复制文件因为 icons 和 manifest.json 这两个文件不需要 build原来是什么样还是什么样就行通过复制直接放到 dist 目录中root: src/, 是配置跟路径因为我们的页面都是在 src 页面下的但是我们打包之后不需要 src 这个路径在 manifest.json 中配置更不需要所以把这个过滤掉rollupOptions 中的 input配置了四个入口文件两个 index.html两个 ts 文件 index.html 文件好理解就是对应的 popup 页面和注入到对应域名项目中的 content 页面ts 文件是因为我需要把 content.ts 和 service-worker.ts 这两个文件也打包出去因为这两个是单独的 js而且需要在 manifest.json 中使用 output 中的 entryFileNames 是需要把 content.ts 和 service-worker.ts 在构建之后还是保持这两个名字这样 manifest.json 中不会出错
三、Manifest.json 配置
{manifest_version: 3,name: My Vue Chrome Ext,version: 0.0.1,description: Chrome 插件,icons: {16: icons/icon.png,19: icons/icon.png,38: icons/icon.png,48: icons/icon.png,128: icons/icon.png
},action: {default_title: Vue Chrome Ext,default_icon: icons/icon.png,default_popup: popup/index.html},background: {service_worker: background/service-worker.js},permissions: [activeTab,tabs,alarms],host_permissions: [],content_scripts: [{js: [content/content.js],matches: [http://127.0.0.1:5500/*],all_frames: true,run_at: document_end,match_about_blank: true}],web_accessible_resources: [{resources: [popup/*, contentPage/*, assets/*, js/*],matches: [http://127.0.0.1:5500/*],use_dynamic_url: true}]
}参考
【两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件】
