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

个人博客地址： 斯科特安的时间

0. 目录

1. 要开发的是什么项目
   1.1 想法开端
   1.2 应该有什么功能?
2. 开发需要解决的核心问题
3. 具体解决方案
   3.1 帐号系统
   3.2 存储服务
   3.3 使用LeanEngine做反防盗链中转接口
   3.4 Chrome 插件实现
4. 对去后端化的看法

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做反防盗链中转接口

要实现的效果是:

1. 我有一个防盗链图片连接abc.com/xxx.png。
2. 我的接口url是http://codeli.leanapp.cn/image?url=xxx。
3. 访问http://codeli.leanapp.cn/image?url=abc.com/xxx.png可访问原图，不受防盗链措施限制。

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

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

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

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

3.4 Chrome 插件实现

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

Chrome 插件结构如图：

图片来自 蒋国纲的技术博客

主要业务：

1. 在popup窗口中添加注册 登陆 退出 等业务。
2. 打开popup 窗口时从云端获取指定账号下保存的图片信息，并展示。若未登陆，则从浏览器localStorage获取并展示。
3. background script 中添加右键菜单项: 当目标是图片时，显示Keep image in browser。
4. 点击Keep image in browser, 执行保存业务逻辑: 若登陆了，保存到云端。若未登录，保存到浏览器localStorage。

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

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

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

web后端会不会变得越来越不需要?

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

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

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

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