详解vue-cli3开发Chrome插件实践


Posted in Javascript onMay 29, 2019

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

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

  • Chrome插件开发全攻略

搭建环境

  • 创建一个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 文件并不能实时刷新代码,需要重新加载插件才行)

详解vue-cli3开发Chrome插件实践

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

引入element UI

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

详解vue-cli3开发Chrome插件实践

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

npm install element-ui

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

npm install babel-plugin-component -D

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

module.exports = {
 presets: [
 '@vue/app'
 ],
 "plugins": [
 [
 "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"
 }
 ]
 ]
}

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

import Vue from "vue";
import AppComponent from "./App/App.vue";

Vue.component("app-component", AppComponent);

import {
 Card
} from 'element-ui';

Vue.use(Card);

new Vue({
 el: "#app",
 render: createElement => {
 return createElement(AppComponent);
 }
});

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

<template>
 <el-card class="box-card">
 <div
 slot="header"
 class="clearfix"
 >
 <span>卡片名称</span>
 <el-button
 style="float: right; padding: 3px 0"
 type="text"
 >操作按钮</el-button>
 </div>
 <div
 v-for="o in 4"
 :key="o"
 class="text item"
 >
 {{'列表内容 ' + o }}
 </div>
 </el-card>
</template>

<script>
export default {
 name: 'app',
}
</script>

<style>
.box-card {
 width: 300px;
}
</style>

渲染效果:

详解vue-cli3开发Chrome插件实践

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

content.js 使用 element-ui 组件

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

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

import {
 Message,
 MessageBox
} from 'element-ui';

// 发现element的字体文件无法通过打包加载,所以另外通过cdn来加载样式
let element_css = document.createElement('link');
element_css.href = 'https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css'
element_css.rel = "stylesheet"
document.head.append(element_css)

MessageBox.alert('这是一段内容', '标题名称', {
 confirmButtonText: '确定',
 callback: action => {
 Message({
  type: 'info',
  message: `action: ${ action }`
 });
 }
})

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

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

// Generate pages object
const pagesObj = {};

const chromeName = ["popup", "options"];

chromeName.forEach(name => {
 pagesObj[name] = {
 entry: `src/${name}/index.js`,
 template: "public/index.html",
 filename: `${name}.html`
 };
});

const plugins =
 process.env.NODE_ENV === "production" ? [{
 from: path.resolve("src/manifest.production.json"),
 to: `${path.resolve("dist")}/manifest.json`
 }] : [{
 from: path.resolve("src/manifest.development.json"),
 to: `${path.resolve("dist")}/manifest.json`
 }];

module.exports = {
 pages: pagesObj,
 // // 生产环境是否生成 sourceMap 文件
 productionSourceMap: false,

 configureWebpack: {
 entry: {
 'content': './src/content/index.js'
 },
 output: {
 filename: 'js/[name].js'
 },
 plugins: [CopyWebpackPlugin(plugins)]
 },
 css: {
 extract: {
 filename: 'css/[name].css'
 // chunkFilename: 'css/[name].css'
 }
 }
};

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

{
 "manifest_version": 2,
 "name": "vue-extension",
 "description": "a chrome extension with vue-cli3",
 "version": "0.0.1",
 "options_page": "options.html",
 "browser_action": {
 "default_popup": "popup.html"
 },
 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 "content_scripts": [{
 "matches": [
  "*://*.baidu.com/*"
 ],
 "js": [
  "js/content.js"
 ],
 "run_at": "document_end"
 }]
}

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

详解vue-cli3开发Chrome插件实践

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

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

// vue.config.js

module.export = {
 /* ... */

 chainWebpack: config => {
 // 查看打包组件大小情况
 if (process.env.npm_config_report) {
 // 在运行命令中添加 --report参数运行, 如:npm run build --report
 config
 .plugin('webpack-bundle-analyzer')
 .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
 }
}

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

详解vue-cli3开发Chrome插件实践

搞定收工!

结语

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

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

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

Javascript 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
You might like
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
pycharm远程调试openstack代码
2017/11/21 Python
python实现决策树
2017/12/21 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python使用Geany编辑器配置方法
2020/02/21 Python
jupyter notebook清除输出方式
2020/04/10 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
2014各大专业毕业生自我评价
2014/09/17 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
荒岛余生观后感
2015/06/09 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript