使用 LeanCloud 服务做一站式Chrome插件开发——Favorite Image-白红宇

使用 LeanCloud 服务做一站式Chrome插件开发——Favorite Image

阅读量：6079 次

发布时间：2019-06-20

本文共 3195 字，大约阅读时间需要 10 分钟。

1. 要开发的是什么项目?

一个Chrome插件，用来保存浏览网页时看到的喜欢的图片。

1.1 想法开端

在 pixiv 翻图时看到一些喜欢的插画，看完就随手翻过去了，没有保存。为什么呢？因为以我对自己的了解，图片下载下来，就相当于放进了垃圾桶。并不是因为本地的文件管理有多乱，而是因为，几乎没有用鼠标打开文件管理器的习惯。

现在我获取信息的流量入口最常用的只有两个：1. 终端 2. 浏览器

于是乎，一个想法油然而生：

把插画存到浏览器吧！

于是就立刻构思，动手写了这款插件。

1.2 应该有什么功能?

功能很简单

保存操作：1. 对图片点击右键 2. 选择"保存到浏览器.." 之类的选项

查看操作：1. 点击插件图标查看保存过的图片。

其它：1. 图片同步到云端，也可保存到浏览器本地。2. 既然要保存到云端，自然需要账号系统

2. 开发需要解决的核心问题

核心问题有两个，一个是数据云存储问题，一个是图片防盗链问题。

云存储问题，帐号系统，多端同步

最开始只想做浏览器本地的存储，使用Chrome提供的localStorage存在本地就。

后来因为localStorage并不支持数据库语法查询，有很多不便。使用过程中又发现多端同步在体验上的优越性，决定要把存储放到云上。

图片防盗链问题

看了些资料，解决方式基本可以分为两种。

一类使用前端js嵌入iframe解决，优点是解决方式简单，问题是Chrome插件不支持页面嵌入式的js脚本。所以这个方案pass。

第二类使用后台服务器做反防盗链措施，作为中转给前端使用。优点是不受chrome插件的各种安全机制的限制，缺点是需要后台支持，增加工作量和资源成本。

使用第二类完成。

3. 具体解决方案

云存储及帐号系统使用LeanCloud提供的存储服务解决。

反防盗链接口使用LeanCloud提供的云引擎搭建NodeJs后台。

啰嗦一句，为什么要使用LeanCloud?

一是对我的需求可以做到完全免费，二是它们的文档实在是太xx的好用了。

3.1 帐号系统

参照：

实现过程基本照抄这个教程的代码。后台账号系统包括对账号的重复检测、密码加密、session等都已经实现。

我们要做的，就是调用前端的这几个关键方法，实现简单的注册、登陆、退出:

// LeanCloud - 注册  // https://leancloud.cn/docs/leanstorage_guide-js.html#注册  var user = new AV.User();  user.setUsername(username);  user.setPassword(password);  user.setEmail(email);  user.signUp().then(function (loginedUser) {    // 注册成功  }, (function (error) {      alert(JSON.stringify(error));  }));  // LeanCloud - 登录  // https://leancloud.cn/docs/leanstorage_guide-js.html#用户名和密码登录  AV.User.logIn(username, password).then(function (loginedUser) {    // 登录成功  }, function (error) {    alert(JSON.stringify(error));  });  // LeanCloud - 当前用户信息  // https://leancloud.cn/docs/leanstorage_guide-js.html#当前用户  var currentUser = AV.User.current();  // 退出登陆  AV.User.logOut();

3.2 存储服务

使用账号系统为每个用户添加身份信息后，存储部分就只需要把数据 + 用户身份信息一同上传或下载就可以了。

照样只贴关键方法

// 初始化类(在数据库中表现为数据表`ImageRepo`)和实例(数据库中表现为一条数据)this.ImageRepo = AV.Object.extend('ImageRepo');var repo = new this.ImageRepo();// 填充数据repo.put('username', 'xxx');// 上传数据repo.save().then(function (repo) {    }, function (error) {    });// 下载数据// 初始化对'ImageRepo'表的查询var query = new AV.Query('ImageRepo');// 查询条件为 username字段等于'xxx'query.equalTo('username', 'xxx');// 查询query.find().then(function(results) {    // 遍历results    // 在页面添加解决防盗链问题后的图片}, function(error) {});