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

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 帐号系统

参照：数据存储入门教程 · JavaScript

实现过程基本照抄这个教程的代码。后台账号系统包括对账号的重复检测、密码加密、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) {
});

3.3 使用LeanEngine做反防盗链中转接口

要实现的效果是:

• 我有一个防盗链图片连接abc.com/xxx.png。

• 我的接口url是http://codeli.leanapp.cn/imag...。

• 访问http://codeli.leanapp.cn/imag...可访问原图，不受防盗链措施限制。

主要原理很简单，后台处理图片请求时更改header中的referer字段，将结果作为response返回。

关于这部分的实现，欢迎阅读我的另一篇文章，就不再赘述：
服务器作防盗链图片中转，nodejs 上手项目简明教程

关于LeanEngin的使用，文档如下，使用方法非常简单。
云引擎快速入门

云引擎支持NodeJS Python PHP JAVA
只需要下载云引擎命令行工具lean，然后输入几行命令就可以建立一个你熟悉的web框架。
然后，使用你熟悉的语言编写反防盗链实现就行了。

3.4 Chrome 插件实现

有了 3.1~3.3 的实现，这部分就是简单的插件部署和业务逻辑了。

Chrome 插件结构如图：

主要业务：

• 在popup窗口中添加注册 登陆 退出 等业务。

• 打开popup 窗口时从云端获取指定账号下保存的图片信息，并展示。若未登陆，则从浏览器localStorage获取并展示。

• background script 中添加右键菜单项: 当目标是图片时，显示Keep image in browser。

• 点击Keep image in browser, 执行保存业务逻辑:
  若登陆了，保存到云端。若未登录，保存到浏览器localStorage。

具体实现见我的github项目: KeepImageInBrowser
插件Web Store地址： Favorite Image

4. 最后，对去后端化的看法

前段时间在知乎上看到了一个问题,我也顺便说下自己的看法。

web后端会不会变得越来越不需要?
像bmob和leancloud这类后台云服务的流行有一段日子了，使用这些服务使一些web、app的开发周期大大缩减。这对于小团队和初创公司尤为方便。

但这并不意味着不再需要自己开发后台。不是因为他们提供的服务不够全面(相反，我倒认为这类服务将向着全面、便捷、快速发展)，而是因为很多公司和产品，为了保持服务的质量和稳定，突出自己产品的特性，需要自己定制自己的后台，有针对性的去优化某些模块。
云服务作为大众服务平台难以为每个产品做定制。

类似于游戏引擎，如今各个平台都不缺乏优秀的游戏引擎。可是仍有公司和团队耗费大量的成本自研游戏引擎，就是希望能配合自己的游戏系统，完美地展现自己的游戏。

一样的，后台云服务和自定制的后台，是相交但永远不会重合的关系。 他们彼此之间相互影响，共同进步。