超实用的 Chrome 插件，保存网页中喜欢的图片

来源： SDK.cn 类型：技术文章发布：2017-05-17 16:07:16

0. 目录

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

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) {
});