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

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

　　1. 要开发的是什么项目?

　　1.1 想法开端

　　在 pixiv 翻图时看到一些喜欢的插画，看完就随手翻过去了，没有保存。为什么呢？ 因为以我对自己的了解，图片下载下来，就相当于放进了垃圾桶。 并不是因为本地的文件管理有多乱，而是因为，几乎没有用鼠标打开文件管理器的习惯。

　　现在我获取信息的流量入口最常用的只有两个，即终端和浏览器。于是乎，一个想法油然而生：

　　“

　　把插画存到浏览器吧！

　　于是就立刻构思，动手写了这款插件。

　　1.2 应该有什么功能?

　　功能很简单：

　　2. 开发需要解决的核心问题

　　“

　　核心问题有两个，一个是数据云存储问题，一个是图片防盗链问题。

　　云存储问题，帐号系统，多端同步

　　最开始只想做浏览器本地的存储，使用 Chrome 提供的 localStorage 存在本地就。后来因为 localStorage 并不支持数据库语法查询，有很多不便。使用过程中又发现多端同步在体验上的优越性，决定要把存储放到云上。

　　图片防盗链问题

　　看了些资料，解决方式基本可以分为两种。

　　一类使用前端 js 嵌入 iframe 解决，优点是解决方式简单，问题是 Chrome 插件不支持页面嵌入式的 js 脚本。所以这个方案 pass。

　　第二类使用后台服务器做反防盗链措施，作为中转给前端使用。优点是不受 chrome 插件的各种安全机制的限制，缺点是需要后台支持，增加工作量和资源成本。使用第二类完成。

　　3. 具体解决方案

　　“

　　云存储及帐号系统使用 LeanCloud 提供的存储服务解决。

　　反防盗链接口使用 LeanCloud 提供的云引擎搭建 NodJs 后台。

　　啰嗦一句，为什么要使用 LeanCloud?

　　一是对我的需求可以做到完全免费，二是它们的文档实在是太xx的好用了。

　　3.1 帐号系统

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

　　实现过程基本照抄这个教程的代码。后台账号系统包括对账号的重复检测、密码加密、session 等都已经实现。

　　“

　　我们要做的，就是调用前端的这几个关键方法，实现简单的注册、登陆、退出:

　　

　　3.2 存储服务

　　“

　　使用账号系统为每个用户添加身份信息后，存储部分就只需要把数据+用户身份信息一同上传或下载就可以了。

　　照样只贴关键方法：

　　

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

　　要实现的效果是:

　　“

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

　　关于这部分的实现，欢迎阅读我的另一篇文章，就不再赘述：

　　服务器作防盗链图片中转，nodejs 上手项目简明教程。

　　关于 LeanEngin 的使用，文档如下，使用方法非常简单。

　　云引擎快速入门：

　　云引擎支持 NodeJSPythonPHPJAVA

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

　　3.4 Chrome 插件实现

　　“

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

　　Chrome 插件结构如图：

　　

　　主要业务：

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

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

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

　　“

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

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

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

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

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

　　原文链接：

　　end

　　更多内容请关注「LeanCloud通讯」