生成vue3项目
通过vue create app创建项目后,我们会发现仅仅只能用来开发web页面,如果要开发chrome插件,还需要手动配置下。
配置插件页面
chrome插件都有popup、devtools、options等页面,vue支持多页面,通过vue.config.js
配置pages即可满足需求。
本质上这些页面和普通的web页面没有任何区别,但是我们可能需要在这些页面中调用chrome的相关api,为了能够顺利build,我们可以npm i @types/chrome
来安装声明文件,同时也方便我们编写。
生成background.js,content.js
最麻烦的也是这里,如何单独生成这些js文件,这里我找到了插件
使用vue-cli-plugin-browser-extension
可以快速的帮我们处理好background.js、content.js单独生成的问题,但是对于注入脚本的问题没有解决,我也提了个issues
同时还有其他解决办法
vue-cli-plugin-chrome-ex
vue-web-extension
好像vue-cli-plugin-browser-extension
,对以上2个进行了融合
掘金上有篇文章,详细介绍了手动vue3搭建chrome插件项目的细节