vue
编辑器：vscode（选择自己喜欢的）
避免复杂的通信 原生的文件开发插件，需要使用 chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx}) 来传递数据，就那么一两个还是可以的，但是往往我们要做的插件不能是这么简单的。 通信多了就麻烦了，vue 就可以解决这个问题，不需要麻烦的通信。 chrome.extension.getBackgroundPage()
保持简单：不适用vuex ，router实时更新： vue 和 webpack非常方便，打包：webpack
GSP:Content Security Policy VUE 完全支持 gsp内容安全策略，CSP 的主要目的是防止跨站脚本攻击（XSS），如果不在 CSP 声明的合法范围内，浏览器会拒绝引用这些资源，这点使用 vue 开发不需要担心。
vue create huaci- 使用 vue-cli3 初始化一个项目，选择简单的 babel 即可。其他的 css 预处理器，eslint 格式都不用了。 确认等待项目初始化完成
进入项目 cd huaci- 初始化项目之后，不要忘记这一步，进入到项目里面去操作，不然就会有错误发生，还找不到错误的原因。
删除不需要的文件 由于我们不是开打 web 项目，vue-cli3 脚手架生成的文件，我们不是都需要， 这里就删除不必要的部分， src/main.jssrc/components 删除这两个文件/文件夹
vue add chrome-ext 安装 vue-cli-plugin-chrome-ext 插件 我们需要修改项目使得 它适用于开发 Chrome 扩展 只能使用 vue add chrome-ext 命令来安装，如果使用 yarn add chrome-ext 会发现项目没有任何改变。 vue add 与 npm install 与 yarn add 的区别vue add 装的是 vue cli 插件，npm install 装的是 npm 插件yarn add 装的是 yarn 插件 vue add 会包含下面两个操作，此外还会帮忙配置文件，这个指令会更改我们现有的文件内容。 例如 router 或是 vuex，Vue CLI 会帮忙配置好文件 vue add router 会配置 router.js 文件以及生成 About.vue 和 Home.vue 并在 App.vue 内建立简单的路由文件. vue add vuex 会被配置好一个 store.js 文件
yarn run build-watch 上面初始化项目的时候，会发现， package.json 文件中执行部分，多了这个执行语句，就是同时执行并且打包。（这里是开发阶段的打包） 'scripts': {'serve': 'vue-cli-service serve','build': 'vue-cli-service build','build-watch': 'vue-cli-service build-watch'}, 执行之后就会得到一个 dist 文件夹，
检测插件 在浏览器加载扩展，查看是否初始化成功 右上角→ ... 符号→更多工具→扩展程序→加载扩展→选择项目中的 dist 文件夹打开
项目结构 初始化增删的项目结构如下， src 就是我们要编辑的源码文件Chrome 扩展的核心部分都在这里 ① manifest.json 文件② popup 弹出页面③ options 选项页面④ 等等其他的页面。。。
页面结构 一个页面包含 4 个部分 page|--app| |---app.vue |--index.html|--index.js index.html 与 index.js 在每个文件都是一致的，我们真正去编辑的是 app.vue，template ，style，script 部分都在这个 app.vue 文件里面。
学无止境~~~~~