首页
所有分类
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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
Seajs源码详解分析
Apr 02 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
JavaScript高级程序设计之变量与作用域
Nov 17 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
切片(1) 指针(1) pygame(3) map(4) Pillow(2) Slice(1) vue-esign(1) WeUI(1) random(1) 结构体(1)
You might like
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Python time模块详解（常用函数实例讲解,非常好）
2014/04/24 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python生成ppt的方法
2018/06/07 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python语言是免费还是收费的？
2020/06/15 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
最受欢迎的自我评价
2013/12/22 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
工作保证书怎么写
2015/02/28 职场文书
鸦片战争观后感
2015/06/09 职场文书
二婚主持词
2015/06/30 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis