首页 ›存档› 技术 › 查看内容

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

2018-3-30 13:00 |来自: 互联网 294 0

摘要: 通过一个Chrome插件的开发，来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中，开发一些小工具可以大大地提高我们的工作效率。由腾讯云技术社区分享。背景对于经常和动画开发打 ...

通过一个Chrome插件的开发，来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中，开发一些小工具可以大大地提高我们的工作效率。由腾讯云技术社区分享。

背景

对于经常和动画开发打交道的开发者对于Animate.css：

(https://daneden.github.io/animate.css/)

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

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

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

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

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

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

扩展如下图所示：

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

Chrome插件开发基本知识

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

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

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

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.webp",
  "default_popup": "popup.html"
 }
}

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

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

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

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

具体详细的开发教程可以看看官方的这个文档（https://developer.chrome.com/extensions/getstarted），非常简明的入门教程。

功能实现-Vue.js实践

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

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

(https://github.com/vuejs/vue/tree/csp/dist)。如果是 2.x 版本，请参考官网文档的这一段：

(http://vuejs.org/v2/guide/installation.html#CSP-environments)。

核心代码如下所示。

HTML：

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：【JS、杰西莱】弘粉回馈，春装一件9折两件7折三件6折下一篇：洛阳要找工作的，你们有福了！

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

相关分类