vuejs初体验-Chrome插件开发实录

游客2024-07-11 10:30:01

背景

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

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

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

至于插件,可以去应用商店搜索 就可以直接找到插件了。快来安装体验吧!

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

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

扩展如下图所示:

插件主要功能是根据用户选择的对齐方式,实时预览效果和显示对应的CSS代码,方便我们可以直接拷贝代码使用。

插件开发基本知识

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

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

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

.json文件

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

  1. {

  2.  "manifest_version": 2,

  3.  

  4.  "name": "One-click Kittens",

  5.  "description": "This extension demonstrates a browser action with kittens.",

  6.  "version": "1.0",

  7.  

  8.  "permissions": [

  9.    "https://secure.flickr.com/"

  10.  ],

  11.  "browser_action": {

  12.    "default_icon": "icon.png",

  13.    "default_popup": "popup.html"

  14.  }

  15. }

  16.  

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

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

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

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

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

功能实现-Vuejs实践

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

这里需要注意的一点是, 扩展的运行环境有一些特殊要求,称为 (CSP),使得通常的 vue 不能被正常使用。如果用的是 vue 1.x,那么可以下载 csp 版本。如果是 2.x 版本,请参考官网文档的说明,相关链接点击原文就可以查看到了。

核心代码如下所示。

HTML:

  1.  <meta charset="UTF-8">

  2.  

  3.  <link rel="stylesheet" href="main.css">

  4.    <link rel="stylesheet" href="mystique.css">

  5. <body>

  6.     id="app">

  7.       class="title-box">flexbox对齐就是这么简单

  8.    

  •     id="type-select">

  •       v-model="selected">

  •         v-for="option in options" v-bind:value="option.value">

  •          {{ option.text }}

  •        

  •      

  •      

  •       class="resule-preview">

  •         v-bind:class="selected" class="cols">

  •           class="col col-3">

  •              

    对齐

  •          

  •           class="col col-3">

  •            

    对齐

  •          

  •           class="col col-3">

  •            

    对齐

  •          

  •        

  •      

  •       class="resule-code">

  •         class="code-display">

  •             class="code-lang">

  •               {{ cssMsg }}

  •            

  •