vite-plugin-chrome-extension（Vue版本）
vite-plugin-chrome-extension（Vue版本）
biaoblog.cn 个人博客
发布于 2022-08-11 19:46:04
发布于 2022-08-11 19:46:04
文章被收录于专栏：web技术开发分享
由于mv2在2023年1月份就要被chrome浏览器全面抛弃
我们的插件的vue独立引入写法也无法支持支持了
原因参考之前写文章：chrome插件 manifest 2 to 3
所以大趋势之下，我们需要脚手架的帮助来升级mv3
还好的是别人已经开源了相关的库- vite-plugin-chrome-extension
这个库提供了很多可支持的写法（vue,react,ts,js）
以及其它相关的一些UI的引用
先以搭建vue+element plus
(vite只支持vue3.0，所以elementUI也需要配套的变成element plus)
1.初始化项目：
npm init -y projectName然后根据下面的package.json文件下载相关依赖：npm i
{
"name": "vue-content-scripts",
"version": "0.0.1",
"scripts": {
"dev": "vite build --mode developmemnt",
"build": "vite build",
"build:watch": "nodemon --watch src --exec npm run build --ext \"ts,vue\"",
"serve": "vite preview"
},
"dependencies": {
"element-plus": "^1.0.2-beta.40",
"vue": "^3.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.1",
"@vue/compiler-sfc": "^3.0.5",
"nodemon": "^2.0.15",
"rollup-plugin-probe": "0.0.3",
"typescript": "^4.1.3",
"vite": "^2.1.5",
"vite-plugin-chrome-extension": "^0.0.7",
"vue-tsc": "^0.0.24"
}
}其中的build:watch 是在开发的时候需要监听文件的变化 随时来重新自动build
然后浏览器那边reload文件方便而添加的
"build:watch": "nodemon --watch src --exec npm run build --ext \"ts,vue\"",基础工作完成之后，直接去vite-plugin-chrome-extension的库里面找到对应的示例：vue-element
文件目录直接复制过来
开发时执行：npm run build:watch
打包时执行：npm run build
即可
React 版本搭建
明天更新
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
