首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue.js 初体验之Chrome 插件开发实录

Posted in Javascript onMay 13, 2017

背景

对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。

需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？

作为一个UI开发，平时跟Chrome浏览器打交道最多，于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码，这样在实际开发中碰到一些需要使用到Animate.css中的动画效果时，可以大大的提高我们的开发效率。

插件安装地址，快来安装体验吧！

作为一个程序员，捣鼓些小工具，不但可以学些新技术还可以提高我们的开发效率，何乐而不为呢。

下面就以一个简单的flexbox对齐预览的插件为例，讲讲使用vuejs开发Chrome插件的开发体验和效率。

扩展如下图所示：

vue.js 初体验之Chrome 插件开发实录

并且还实时根据用户选择的对齐方式，显示对应的CSS代码，方便我们可以直接拷贝代码使用。

Chrome插件开发基本知识

在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。

开发一个插件就跟我们平时做web开发流程没多大的区别，就是先搭好基本的页面，然后使用js来写交互逻辑等功能。

比如我这个插件的目录文件如下：

vue.js 初体验之Chrome 插件开发实录

manifest.json文件

文件中需要注意一下的mainfest.json这个文件，这个json文件的作用是提供插件的各种信息，例如插件能够做的事情，以及插件的文件配置等等信息。下面是一个清单文件的示例，

{
 "manifest_version": 2,
 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",
 "permissions": [
 "https://secure.flickr.com/"
 ],
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 }
}

第一行声明我们使用清单文件格式的版本 2，必须包含（版本 1 是旧的，已弃用，不建议使用）。

接下来的部分定义扩展程序的名称、描述与版本。这些都会在 Chrome 浏览器中使用，向用户显示已安装的扩展程序，同时在 Chrome 网上应用店中向潜在的新用户显示您的扩展程序。名称应该简练，描述不要比一句话左右还长（后面将会有更多的空间用于更详细的描述）。

最后一部分首先请求权限，用于访问 https://secure.flickr.com/ 上的数据，并声明该扩展程序实现了一个浏览器按钮，同时在这一过程中为它指定一个默认图标与弹出窗口。

定义浏览器按钮时指向了两个资源文件：icon.png 与 popup.html。这两个资源都必须在扩展程序包中存在，图片是扩展的显示，html是扩展具体运行的基础文件。

具体详细的开发教程可以看看官方的这个文档，非常简明的入门教程。

功能实现-Vuejs实践

整个插件的核心交互功能非常简单，如文章开头的动图所示，用户选择对齐方式，代码区域显示对应的代码。这种简单数据交互使用vuejs再适合不过了。

这里需要注意的一点是，chrome 扩展的运行环境有一些特殊要求，称为 Content Security Policy (CSP)，使得通常的 vue 不能被正常使用。如果用的是 vue 1.x，那么可以下载 csp 版本，在 这里。如果是 2.x 版本，请参考官网文档的这一段。

核心代码如下所示。

HTML：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <!-- 引入样式 -->
 <link rel="stylesheet" href="main.css" rel="external nofollow" >
 <link rel="stylesheet" href="mystique.css" rel="external nofollow" >
</head>
<body>
 <div id="app">
  <h1 class="title-box">flexbox对齐就是这么简单</h1>
 </div>
 <div id="type-select">
  <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
  </select>
  <!-- <span>Selected: {{ selected }}</span> -->
  <div class="resule-preview">
  <div v-bind:class="selected" class="cols">
   <div class="col col-3">
    <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
  </div>
  </div>
  <div class="resule-code">
  <pre class="code-display">
   <code class="code-lang">
    {{ cssMsg }}
   </code>
  </pre>
  </div>
 </div>
 <!-- 先引入 Vue -->
 <script src="vue.js"></script>
 <!-- 引入组件库 -->
 <script src="main.js"></script>
</body>
</html>

CSS就不列出来了，可以在源代码中查看。

下面来使用vuejs来实现插件的功能。

功能实现

使用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

而下拉框（select）列表的渲染，就可以使用vue中的v-for方法来渲染下拉列表选项，下拉选项数据写在js中的data对象中的options中。用v-bind方法来绑定option的value值，代码如下所示：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
</select>

在vuejs中可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。这里在select中使用v-model方法来监听选中的值。

为了能预览不同对齐的效果，先在CSS中写好和下拉框中值相同的对应的类名样式，这样当用户选中不同的值的时候能显示不同的效果。

<div v-bind:class="selected" class="cols">
   <div class="col col-3">
    <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
   <div class="col col-3">
   <p>对齐</p>
   </div>
</div>

下拉框这块功能就这样，简简单单几行代码就实现了。想想要是用jquery或者是原生的js来实现同样的功能，不仅代码量要大而且写起来也没有vuejs这么舒服。

接下来是代码同步功能，即在代码区域显示对应flex对齐的CSS代码。

开始之前先讲讲vuejs中的computed属性方法，可计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

对应到我们这个实例，就是当用户选择flexbox不同的对齐方式的时候，及时同步对应的CSS代码到代码预览区域。简单起见，直接把几个不同的代码写到js中：

data: {
  selected: 'cols-center',
  cssText:{
   'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
   'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
   'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
  },
  options: [
   { text: '居中对齐', value: 'cols-center'},
   { text: '两端对齐', value: 'cols-space-between'},
   { text: '间隔相等', value: 'cols-space-around'}
  ]
 },

根据不同的名字对应不同的CSS代码。然后使用computed方法来根据用户选取的值实时取出对应的CSS代码：

computed:{
  cssMsg:function(){
   console.log(this)
   return this.cssText[this.selected];
  }
 }

完整代码如下：

var typeSelect = new Vue({
  el: 'body',
  data: {
  selected: 'cols-center',
  cssText:{
   'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
   'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
   'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
  },
  options: [
   { text: '居中对齐', value: 'cols-center'},
   { text: '两端对齐', value: 'cols-space-between'},
   { text: '间隔相等', value: 'cols-space-around'}
  ]
 },
 computed:{
  cssMsg:function(){
   console.log(this)
   return this.cssText[this.selected];
  }
 }
})

最后在html中绑定通过computed方法得到数据也就是CSS：

<div class="resule-code">
  <pre class="code-display">
   <code class="code-lang">
    {{ cssMsg }} 
   </code>
  </pre>
  </div>

开发好之后，可以直接在chrome中运行来调试。打开扩展面板，勾选开发者模式，然后加载刚开发扩展所在的目录就可以直接运行了。

完整的源代码已上传在附件，可以下下来直接运行。

vue.js 初体验之Chrome 插件开发实录

一个简单的插件就完成了，通过这一个简单的chrome插件就可以体验到vuejs在web开发中简单、优雅的魅力，还有什么理由不用起来呢。

以上所述是小编给大家介绍的vue.js 初体验之Chrome 插件开发实录，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue.js 初体验之Chrome 插件开发实录

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js遍历td tr等html元素
Dec 13 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
JS中cookie的使用及缺点讲解
May 13 #Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
jQuery遍历节点方法汇总(推荐)
May 13 #jQuery
基于angular实现三级联动的生日插件
May 12 #Javascript
vue.js中mint-ui框架的使用方法
May 12 #Javascript
js图片加载效果实例代码（延迟加载+瀑布流加载）
May 12 #Javascript
微信小程序之数据双向绑定与数据操作
May 12 #Javascript
PyTorch(1) compose(3) opencv(7) FuzzyWuzzy(1) 模型保存加载(1) 人工智能(2) 模糊匹配(1) Pyecharts(7) Athens(1) moviepy(1)
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php远程下载类分享
2016/04/13 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
VBScript版代码高亮
2006/06/26 Javascript
表单提交验证类
2006/07/14 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
读jQuery之十四 （触发事件核心方法）
2011/08/23 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
银行求职信模板
2015/03/20 职场文书
庆七一活动简报
2015/07/20 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL