背景
假如传统的方式，我们用html js的方式来开发，我们最终只要开发出这种结构的就可以
但是这种调试麻烦，开发效率低下，不符合现在数据驱动页面的方式，所以我们就用现在比较流行的vue,react等来开发扩展程序，下面vue来搭建讲述
1、首先搭建一个脚手架
具体访问vue-cli官网
首先
1、vue create vue-extension
2、vue add chrome-ext（这个插件就是官方提供开发谷歌扩展程序的）
3、删除无用文件跟文件夹：src/main.js，public、src/components
以上三步最终得到的工程结构如下
2、运行环境
这条命令就会运行开发环境，对修改文件进行实时编译并自动在根目录下生成
dist 文件夹
接着我们谷歌浏览器加载
这样就可以在右侧的扩展程序栏看到
3、与第三方ui组件的结合开发
下面我们用element-ui来举例子
npm install element-ui
然后假如按需引入，要再执行
npm install babel-plugin-component -D
babel.config.js文件的修改
修改src/popup/index.js
这样我们就可以按需引入element-ui的组件，开发我们的扩展程序
接下来我们写个简单的例子
src/popup/App/App.vue
效果如下
4、简单说下这个扩展程序的通信
首先我们先了解下这个扩展程序的结构
1、我们首先一眼看到的是popup.html,然后这个页面的逻辑会生成popup.js,就是控制我们看到的这个小窗口
2、content.js 主要作用于浏览网页，对打开的网页进行插入、修改 DOM ，对其进行操作交互
3、background 是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面
4 ...
等等
然后就是现在popup页面的按钮，实现点击按钮，页面弹框，我们可以通过popup.js传到content.js,再content.js向我们的页面发送。（先在vue工程建src/content/index.js）
这个content.js 必须配置manifest.develpment.json或者manifest.production.json配置，marches属性具体配置域名才生效，现在以百度为例子
怎么通信呢？这里也有几种方式
1、chrome.runtime.sendMessage 可以实现popup这个来像这个content.js发送，并接收返回数据，例如
popup先发送数据
content.js接受数据
这样我们就可以实现点击扩展程序的按钮，content.js接受到了数据，向网页alert一条消息
2、通过window.postMessage实现通信
3、通过background.js收发Message实现通信
4、等等
后面几种通信方式，留给各位读者尝试
码字不易，望点赞支持，by:向 乾 看
