使用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 插件结构如图:


使用LeanCloud服务做一站式Chrome插件开发——Favorite Image_第1张图片
图片来自 蒋国纲的技术博客

主要业务:

  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的开发周期大大缩减。这对于小团队和初创公司尤为方便。

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

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

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

你可能感兴趣的:(使用LeanCloud服务做一站式Chrome插件开发——Favorite Image)