我找了很多关于如何开发谷歌插件的文章，但是发现都是很基础的，没有写如何快速编译打包插件。我只是在想，为什么不能通过webpack打包插件？如果通过webpack编译，可以让开发过程更加舒适，使文件结构趋于模块化，打包时直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件，使用vue-cli3开发Google插件很方便，可以直接引用各种UI框架和npm插件。

提示：如果你没有接触过Google插件开发，建议先看看基本文档：

构建环境的Chrome插件开发策略

创建一个vue-cli3项目：vue创建vue-extension，并选择默认的对话框流。转到项目CD vue-ext并安装vue-cli-plugin-chrome-ext插件：vue添加chrome-ext，并根据安装对话框选项进行设置。删除vue-cli3无用的文件和文件夹：src/main.js、public、src/组件来运行项目

Npm run build-watch运行开发环境，实时编译修改后的文件并在根目录下自动生成dist folder，然后在浏览器上加载dist folder完成插件安装。(注意：修改后台文件和manifest.json文件不能实时刷新代码，需要重新加载插件。)

Npm run build运行生产环境来编译和打包，并集成和打包所有文件。

引入元素UI

目前插件加载到浏览器后弹出的页面是这样的界面：

通常，我们必须引入一个好的UI框架。这里我们可以介绍一下element-ui。首先，安装：

在npm install element-ui中，考虑到插件的文件大小，通过按需加载的方式引入组件。按照element-ui的官方按需加载方式，必须先安装babel-plugin-component插件：

NPM安装巴别塔插件组件然后，修改巴别塔配置为：

module . exports={ presets :[' @ vue/app ']，' plugins': [ [ 'component '，{ 'libraryName': 'element-ui '，style library name ' : ' theme-chalk ' }]}接下来，修改popup相关文件以引入所需组件，src/popup/index.js content :

从“Vue”导入Vue；从“”导入AppComponent。/App/App . vue '；Vue.component('app-component '，AppComponent从“元素-用户界面”导入{卡片}；Vue.use(卡片)；new Vue({ el: '#app '，render : create element={ return create element(AppComponent)；}});src/popup/App/App.vue的内容：

模板El-card class=' box-card ' div slot=' header ' class=' clear fix ' span card name/span El-button style=' float : right；padd : 3px 0 ' type=' text ' operation button/El-button/div v-for=' o in 4 ' : key=' o ' class=' text item ' { ' list content ' o } }/div/El-card/templatescript export default { name : ' app '，}/script style . box-card { width : 300 px；}/style渲染效果：

当然，不仅插件内的页面，而且元素-ui组件都可以插入到内容页面中。

Content.js使用元素-ui组件

Content.js主要用于浏览网页，在打开的网页中插入和修改DOM，并对其进行操作和交互。不要以为element-ui只能和vue一起使用，其实它是一个前端框架，只要我们引入就可以使用，webpack会自动拉出来供我们编译打包。

首先，我们创建src/content/index文件，内容：

从元素-ui '导入{消息，消息框}；//发现元素的字体文件无法通过打包加载，所以另外通过内容交付网络来加载样式让element _ CSS=document。创建元素(“链接”)；元素_ CSS。href=' https://unpkg。com/[电子邮件保护]/lib/theme-粉笔/index . CSS“element _ CSS . rel=”样式表文件。头部。追加(element _ CSS)消息框。警报('这是一段内容', '标题名称，{ confirmButtonText: '确定，回调：操作={ Message({ type : ' info '，Message : ` action : $ { action } ` })；}})vue.config.js增加content.js文件的打包配置，因为content.js(背景。射流研究…同样可以只生成射流研究…文件)只有射流研究…文件，不用像应用模式那样打包生成相应的超文本标记语言文件，完整内容如下：

const CopyWebPackplugin=require(' copy-web pack-plugin ')；const path=require(' path ')；//生成页面对象const page Sobj={ }；const chromeName=['popup '，' options ']；chrome名称。foreach(name={ PageSobj[name]={ entry : ` src/$ { name }/index。js `,模板： '公共/索引。html '，filename : ` $ { name } . html ` } })；const plugins=进程。ENV。NODE _ ENV===' production '？[{来自：路径。解析(' src/manifest。生产。JSON ')、到： ` $ { path。解析(' dist ')}/manifest。JSON `}]:[{来自：路径。解析(' src/manifest。发展。JSON ')、到： ` $ { path。解析(' dist ')}/manifest。JSON ` }]；模块。导出={ page s 3360 page sobj，////生产环境是否生成sourceMap文件productionSourceMap: false，configureWebPack : {条目： { '内容' : } ./src/content/index.js' }，输出： { filename : ' js/[name].js' }，plugins :[copywebpacklugin(plugins)]，CSS : { extract : { filename : ' CSS/[name]} .CSS '/chunk filename : ' CSS/[name].css ' } } }最后在manifest.development.json加载content.js文件：

{“manifest _ version”: 2，“name”:“vue-extension”，“description”:一个带有vue-cli3的铬扩展，' version': '0.0.1 '，' options _ page ' : '选项。html '，' browser _ action ' : { ' default _ popup ' : ' popup。html ' }，' content _ security _ policy ' 3360 ' script-src ' self ' ' unsafe-eval object-src ' self ' '，' content _ scripts ' :[{ ' matches ' :[' * :/*。百度。com/*]，' js': [ 'js/content.js' ]，' run_at': 'document_end' }]}然后浏览器重新加载插件后打开https://www.baidu.com/网址后可看到：

添加打包文件大小预览配置

既然用了vue-cli3了，怎能不继续折腾呢，我们平时用工具开发肯定离不开打包组件预览功能，才能分析哪些组件占用文件大，该有的功能一个都不能少未分类的：33366666666这么实用的功能，实现起来也无非就是添加几行代码的事：

//vue。配置。js模块。导出={/*.*/chainwebpack k :配置={ //查看打包组件大小情况if(过程。环境。NPM _配置_报告){//在运行命令中添加报告参数运行，如：国家预防机制运行生成报告配置。插件(“网络包-包-分析器”).使用（必需(“网络包-包-分析器”).bundlealyzer插件)} } }就辣么简单，然后运行新公共管理运行构建-报告看看效果：

搞定收工！

结语

事实证明，vue-cli3很强大，vue相关的插件并不是不能应用于开发浏览器插件，元素用户界面也不仅限于某视频剪辑软件的运用。只有你想不到，没有做不到的事。

提示：如果你懒得从头开始搭建模板的话也可以从开源代码库拉取vue-扩展-模板。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。