vue.js第一次体验的Chrome插件开发记录

背景

经常处理动画开发的开发者对动画库比较熟悉，它封装了一些常见的动画效果，非常实用。但是有时候在开发的时候，只需要一两个动画效果，引入整个CSS文件，不是很好。

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

作为一个UI开发人员，我平时和Chrome浏览器打交道最多，所以我集成了一个Chrome插件，及时预览对应的animation.css中的动画效果，生成对应的动画代码，在实际开发中需要用到animation.css中的一些动画效果时，可以大大提高我们的开发效率。

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

作为一个程序员，摆弄小玩意不仅可以学到一些新技术，还可以提高我们的开发效率。为什么不呢？

让我们以一个简单的flexbox对齐预览插件为例，谈谈用vuejs开发Chrome插件的开发体验和效率。

展开如下图所示：

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

Chrome插件开发的基础知识

从应用商店下载的插件基本上都有。crx作为文件后缀，这实际上是一个压缩包，包括html、css、javascript、图像资源等插件所需的文件。

开发一个插件和我们平时的web开发流程没有太大的区别，就是先设置基本页面，然后用js编写交互逻辑等功能。

例如，我的插件的目录文件如下：

Manifest.json文件

应该在文件中注明mainfest.json文件。这个json文件的功能是提供插件的各种信息，比如插件能做什么，插件的文件配置。以下是清单文件的示例。

{ 'manifest_version': 2，' name': '一键式小猫'，' description': '此扩展演示了使用小猫的浏览器操作，' 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扩展的运行环境有一些特殊的要求，叫做内容安全策略(CSP)，使得普通vue无法正常使用。如果你正在使用vue 1.x，你可以在这里下载csp版本。如果是2.x版本，请参考官网文档的这一段。

核心代码如下所示。

HTML:

！DOCTYPE html html head meta charset=' UTF-8 '！-引入样式-linkrel='样式表' href=' main . CSS ' rel=' external nofollow ' link rel='样式表' href='神秘感. CSS ' rel=' external nofollow '/Head body div id=' app ' h1 class=' title-box ' flex box对齐方式就这么简单/h1/div div id=' type-select ' select v-model=' selected ' option v-for=' options ' v-bind : value=' option ' { option。-span selected : { { selected } }/span-Div class=' resume-preview ' Div v-bind : class=' selected ' class=' cols ' Div class=' col col-3 ' PS alignment/p/Div class=' col-3 ' p alignment/p/Div class=' col col-3 ' p alignment/p/Div/Div class=' resume-code ' pre class=' code-display ' code class=' code-lang ' { csmsg } }/code-引入组件库-script src=' http :min . js '/script/body/html CSS未列出，但可以在源代码中查看。

下面用vuejs实现插件功能。

功能实现

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

在选择列表的呈现中，可以使用vue中的v-for方法来呈现下拉列表选项，下拉选项数据写入js中数据对象的选项中。使用v-bind方法绑定选项的值值，代码如下：

在选项“v-bind: value=”选项中选择v-model=“selected”选项v-for=“option”。值“{option。text}}/option/select在vuejs中，可以使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。这里，在select中使用v-model方法来监听选定的值。

为了预览不同对齐的效果，首先在CSS中的下拉框中写下与该值相同的对应类名样式，这样当用户选择不同的值时，就可以显示不同的效果。

div v-bind : class=' selected ' class=' cols ' div class=' col col-3 ' pAlignment/p/div div class=' col col-3 ' pAlignment/p/div/div下拉框这个函数简单又简单想想如果用jquery或者原生js来实现同样的功能，不仅代码量大，而且写起来也不如vuejs舒服。

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

在我们开始之前，让我们来谈谈vuejs中计算属性的方法。计算属性是原始数据中不存在的属性，但会在运行时实时计算。

对应我们的例子，当用户选择flexbox的不同对齐方式时，对应的CSS代码会及时同步到代码预览区。为简单起见，将几个不同的代码直接写入js:

data : { selected : ' cols-center '，CSS text : { ' cols-center ' : ' \ n \ r-web kit-alignment-content : center；\ n \ r-ms-flex-pack 3360中心；\ n \调整-content : center；'，' cols-space-between ' : ' \ n \ r-web kit-justice-content : space-between；\ n \ r-ms-flex-pack 3360调整；\ n \调整-content :之间的空格，' cols-space-round ' : ' \ n \ r-web kit-justice-content : space-round；\ n \ r-ms-flex-pack 3360分发；\ n \调整-content:空格；'}，options: [{text: '中心对齐'，value:' cols-center'}，{text: '两端对齐'，value: ' cols-space-between ' }，{text: '等间隔'，value : '然后使用computed方法根据用户选择的值实时获取相应的CSS代码：

computed : { CSsms g : FuncTion(){ console . log(this)返回this . CSStext[this . selected]；}}完整的代码如下：

var typeSelect=new Vue({ El : ' body '，data : { selected : ' cols-center '，CSS text : { ' cols-center ' : ')\ n \ r-web kit-alignment-content : center；\ n \ r-ms-flex-pack 3360中心；\ n \调整-content : center；'，' cols-space-between ' : ' \ n \ r-web kit-justice-content : space-between；\ n \ r-ms-flex-pack 3360调整；\ n \调整-content :之间的空格，' cols-space-round ' : ' \ n \ r-web kit-justice-content : space-round；\ n \ r-ms-flex-pack 3360分发；\ n \调整-content:空格；'}，options: [{text: '中心对齐'，value:' cols-center'}，{text: '两端对齐'，value : ' cols-space-between ' }，{text: '等间隔'，value : ' cols-space-around ' }]}，computed : { cssms g 3360 FuncTion(){ console . log(this)返回this . CSS text[this selected]；}}})最后，将计算方法得到的数据绑定在html中，也就是CSS:

div class=' resume-code ' pre class=' code-display ' code class=' code-lang ' { { csmsg } }/code/pre/div可以直接在chrome中运行进行调试。打开扩展面板，检查开发人员模式，然后加载新开发的扩展所在的目录直接运行。

完整的源代码已经上传到附件中，可以直接下载和运行。

一个简单的插件就完成了。通过这个简单的chrome插件，可以体验到vuejs在web开发中的素雅魅力。不使用的理由是什么？

以上是边肖介绍的vue.js的Chrome插件开发的记录，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！