>

插件开发实录

- 编辑:至尊游戏网站 -

插件开发实录

vuejs 初体验— Chrome 插件开辟实录

2017/05/16 · JavaScript · Chrome, vuejs

原来的书文出处: janilychen   

背景

对那时候常和卡通开采打交道的开采者对于至尊游戏网站,Animate.css其一动漫库不会面生,它把生龙活虎部分大范围的动漫效果都卷入起来了,极度实用。然而一时在支付中,仅仅只是供给某风姿浪漫多个卡通效果,把方方面面CSS文件都引进,那样不是太好。

须要就现身了,能或不能够有叁个工具得以一直预览Animate.css对应的卡通片效果,并且调换对应的动画片代码呢?

用作多少个UI开辟,平日跟Chrome浏览器打交道最多,于是就整了二个Chrome插件能够立即预览对应Animate.css中的动漫效果并转移对应的动漫片代码,那样在事实上付出中蒙受一些内需接受到Animate.css中的动画效果时,能够大大的进步我们的支出成效。

插件安装地点,快来安装体验吧!

用作贰个技术员,捣鼓些小工具,不但能够学些新工夫还足以增进我们的开支功用,甘心情愿呢。

上面就以四个简便的flexbox对齐预览的插件为例,讲讲使用vuejs开垦Chrome插件的花费体验和成效。

扩充如下图所示:

至尊游戏网站 1

插件首要意义是基于客户选择的对齐方式,实时预览效果和展现相应的CSS代码,方便大家得以平昔拷贝代码使用。

Chrome插件开拓基本知识

在应用集团中下载下来的插件基本上都以以.crx为文件后缀,该文件其实正是三个压缩包,包罗插件所急需的html、css、javascript、图片财富等等文件。

支付多少个插件就跟我们平昔做web开辟流程没多大的差异,就是先搭好中央的页面,然后利用js来写人机联作逻辑等效果。

比如本身那么些插件的目录文件如下:

至尊游戏网站 2

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": [ "" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "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 英特网应用店中向地下的新顾客展现你的增加程序。名称应当简练,描述不要比一句话左右还长(前面将会有更加的多的空中用于更详尽的描述卡塔尔。

终极少年老成部分首先乞请权限,用于访谈 上的数码,并声称该扩大程序落成了贰个浏览器开关,同一时候在这里风流浪漫进度中为它钦命一个暗中同意Logo与弹出窗口。

概念浏览器开关时指向了五个能源文件:icon.png 与 popup.html。那五个财富都必需在扩充程序包中留存,图片是扩充的显得,html是增加具体运作的基础文件。

具体详尽的支付教程可以看看官方的这几个文书档案,特别刚强的入门教程。

功能完结-Vuejs试行

全总插件的中坚交互作用功效非常简单,如随笔早先的动图所示,客户采纳对齐格局,代码区域呈现相应的代码。这种轻便多少交互作用使用vuejs再契合可是了,vuejs底蕴知识这里就不再细说了。

此间须求留意的一点是,chrome 扩大的运作遇到有点特殊要求,称为 Content Security Policy (CSP),使得日常的 vue 不可能被平常使用。借使用的是 vue 1.x,那么能够下载 csp 版本,在 这里。借使是 2.x 版本,请参谋官方网址文书档案的这一段。

大旨代码如下所示。

HTML:

XHTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引进样式 --> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="mystique.css"> </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><!-- 引进样式 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="mystique.css">
</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值,代码如下所示:

XHTML

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

1
2
3
4
5
<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中写好和下拉框中值肖似的应和的类名样式,那样当顾客选中差别的值的时候能突显区别的效率。这里大家选取v-bind方法来促成那一个意义,它最首要用于属性绑定,大家能够给v-bind:class三个指标,以动态地切换class。

XHTML

<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>

1
2
3
4
5
6
7
8
9
10
11
<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' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;' }, options: [ { text: '居中对齐', value: 'cols-center'}, { text: '两端对齐', value: 'cols-space-between'}, { text: '间距相等', value: 'cols-space-around'} ] },

1
2
3
4
5
6
7
8
9
10
11
12
13
data: {
    selected: 'cols-center',
    cssText:{
     'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;',
     'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;',
     'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-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]; } }

1
2
3
4
5
6
computed:{
     cssMsg:function(){
     console.log(this)
     return this.cssText[this.selected];
     }
    }

全部代码如下:

var typeSelect = new Vue({ el: 'body', data: { selected: 'cols-center', cssText:{ 'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-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]; } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var typeSelect = new Vue({
   el: 'body',
   data: {
    selected: 'cols-center',
    cssText:{
     'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;',
     'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;',
     'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-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:

XHTML

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

1
2
3
4
5
6
7
<div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}  
            </code>
        </pre>
      </div>

插件代码下载

付出好之后,能够平昔在chrome中运作来调解。打开扩充面板,勾选开荒者格局,然后加载刚开采扩充所在的目录就足以平昔运转了。

至尊游戏网站 3

一个简便的插件就完事了,通过那叁个粗略的chrome插件就足以体会到vuejs在web开荒中轻易、尊贵的魅力,还宛如何说辞而不是起来吧。

1 赞 5 收藏 评论

至尊游戏网站 4

本文由设计建站发布,转载请注明来源:插件开发实录