使用 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 是 codeli.leanapp.cn/image?url=x…
• 访问 codeli.leanapp.cn/image?url=a…

主要原理很简单，后台处理图片请求时更改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 的开发周期大大缩减。这对于小团队和初创公司尤其方便。

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

相似于游戏引擎，现在各个平台都不缺少优秀的游戏引擎。但是仍有公司和团队耗费大量的成本自研游戏引擎，就是但愿能配合本身的游戏系统，完美地展示本身的游戏。

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