经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解vue-cli3开发Chrome插件实践
来源:jb51  时间:2019/5/29 9:51:12  对本文有异议

之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码。后来发现了 vue-cli-plugin-chrome-ext 插件,通过这个插件能很方便地用 vue-cli3 来开发谷歌插件,并能直接引用各种UI框架跟npm插件。

tip:如果你没接触过谷歌插件开发的话建议先看看基础文档:

搭建环境

  • 创建一个vue-cli3项目: vue create vue-extension,对话流程选择默认就行。
  • 进入项目cd vue-extension
  • 安装vue-cli-plugin-chrome-ext插件:vue add chrome-ext,根据安装对话选项设置好。
  • 删除vue-cli3无用文件跟文件夹:src/main.js,public、src/components

运行项目

npm run build-watch 运行开发环境,对修改文件进行实时编译并自动在根目录下生成 dist 文件夹,然后在浏览器上加载 dist 文件夹完成插件安装。(注意:修改 background 文件跟 manifest.json 文件并不能实时刷新代码,需要重新加载插件才行)

npm run build 运行生产环境编译打包,将所有文件进行整合打包。

引入element UI

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

平时我们肯定要引入好看的UI框架的,在这里我们可以引入 element-ui,首先安装:

  1. npm install element-ui

考虑到插件打包后的文件大小,最后通过按需加载的方式来引入组件,按照 element-ui 官方的按需加载方法,要先安装 babel-plugin-component 插件:

  1. npm install babel-plugin-component -D

然后,将 babel.config.js 修改为:

  1. module.exports = {
  2. presets: [
  3. '@vue/app'
  4. ],
  5. "plugins": [
  6. [
  7. "component",
  8. {
  9. "libraryName": "element-ui",
  10. "styleLibraryName": "theme-chalk"
  11. }
  12. ]
  13. ]
  14. }

接下来修改 popup 相关文件引入所需组件, src/popup/index.js 内容:

  1. import Vue from "vue";
  2. import AppComponent from "./App/App.vue";
  3.  
  4. Vue.component("app-component", AppComponent);
  5.  
  6. import {
  7. Card
  8. } from 'element-ui';
  9.  
  10. Vue.use(Card);
  11.  
  12. new Vue({
  13. el: "#app",
  14. render: createElement => {
  15. return createElement(AppComponent);
  16. }
  17. });

src/popup/App/App.vue 内容:

  1. <template>
  2. <el-card class="box-card">
  3. <div
  4. slot="header"
  5. class="clearfix"
  6. >
  7. <span>卡片名称</span>
  8. <el-button
  9. style="float: right; padding: 3px 0"
  10. type="text"
  11. >操作按钮</el-button>
  12. </div>
  13. <div
  14. v-for="o in 4"
  15. :key="o"
  16. class="text item"
  17. >
  18. {{'列表内容 ' + o }}
  19. </div>
  20. </el-card>
  21. </template>
  22.  
  23. <script>
  24. export default {
  25. name: 'app',
  26. }
  27. </script>
  28.  
  29. <style>
  30. .box-card {
  31. width: 300px;
  32. }
  33. </style>

渲染效果:

当然,不仅仅是插件内部的页面,还可以将 element-ui 组件插入到 content 页面。

content.js 使用 element-ui 组件

content.js 主要作用于浏览网页,对打开的网页进行插入、修改 DOM ,对其进行操作交互。别觉得 element-ui 只能配合 vue 使用,其实就是一个前端框架,只要我们引入了就能使用, webpack 会自动帮我们抽离出来编译打包。

首先我们创建 src/content/index 文件,内容:

  1. import {
  2. Message,
  3. MessageBox
  4. } from 'element-ui';
  5.  
  6. // 发现element的字体文件无法通过打包加载,所以另外通过cdn来加载样式
  7. let element_css = document.createElement('link');
  8. element_css.href = 'https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css'
  9. element_css.rel = "stylesheet"
  10. document.head.append(element_css)
  11.  
  12. MessageBox.alert('这是一段内容', '标题名称', {
  13. confirmButtonText: '确定',
  14. callback: action => {
  15. Message({
  16. type: 'info',
  17. message: `action: ${ action }`
  18. });
  19. }
  20. })

vue.config.js 增加 content.js 文件的打包配置,因为 content.jsbackground.js 同样可以只生成js文件)只有js文件,不用像app模式那样打包生成相应的 html 文件,完整内容如下:

  1. const CopyWebpackPlugin = require("copy-webpack-plugin");
  2. const path = require("path");
  3.  
  4. // Generate pages object
  5. const pagesObj = {};
  6.  
  7. const chromeName = ["popup", "options"];
  8.  
  9. chromeName.forEach(name => {
  10. pagesObj[name] = {
  11. entry: `src/${name}/index.js`,
  12. template: "public/index.html",
  13. filename: `${name}.html`
  14. };
  15. });
  16.  
  17. const plugins =
  18. process.env.NODE_ENV === "production" ? [{
  19. from: path.resolve("src/manifest.production.json"),
  20. to: `${path.resolve("dist")}/manifest.json`
  21. }] : [{
  22. from: path.resolve("src/manifest.development.json"),
  23. to: `${path.resolve("dist")}/manifest.json`
  24. }];
  25.  
  26. module.exports = {
  27. pages: pagesObj,
  28. // // 生产环境是否生成 sourceMap 文件
  29. productionSourceMap: false,
  30.  
  31. configureWebpack: {
  32. entry: {
  33. 'content': './src/content/index.js'
  34. },
  35. output: {
  36. filename: 'js/[name].js'
  37. },
  38. plugins: [CopyWebpackPlugin(plugins)]
  39. },
  40. css: {
  41. extract: {
  42. filename: 'css/[name].css'
  43. // chunkFilename: 'css/[name].css'
  44. }
  45. }
  46. };

最后在 manifest.development.json 加载 content.js 文件:

  1. {
  2. "manifest_version": 2,
  3. "name": "vue-extension",
  4. "description": "a chrome extension with vue-cli3",
  5. "version": "0.0.1",
  6. "options_page": "options.html",
  7. "browser_action": {
  8. "default_popup": "popup.html"
  9. },
  10. "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  11. "content_scripts": [{
  12. "matches": [
  13. "*://*.baidu.com/*"
  14. ],
  15. "js": [
  16. "js/content.js"
  17. ],
  18. "run_at": "document_end"
  19. }]
  20. }

然后浏览器重新加载插件后打开 https://www.baidu.com/ 网址后可看到:

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

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

  1. // vue.config.js
  2.  
  3. module.export = {
  4. /* ... */
  5.  
  6. chainWebpack: config => {
  7. // 查看打包组件大小情况
  8. if (process.env.npm_config_report) {
  9. // 在运行命令中添加 --report参数运行, 如:npm run build --report
  10. config
  11. .plugin('webpack-bundle-analyzer')
  12. .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  13. }
  14. }
  15. }

就辣么简单,然后运行 npm run build --report 看看效果:

搞定收工!

结语

事实证明,vue-cli3很强大,vue相关的插件并不是不能应用于开发浏览器插件,element-ui也不仅限于vue的运用。只有你想不到,没有做不到的事😁。

tip:如果你懒得从头开始搭建模板的话也可以从GitHub拉取vue-extension-template

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号