使用LeanCloud服務(wù)做一站式Chrome插件開發(fā)——Favorite Image

JohnLui 發(fā)布于2019-08-20 14:06 / 3621人閱讀

摘要：云存儲(chǔ)問題，帳號(hào)系統(tǒng)，多端同步最開始只想做瀏覽器本地的存儲(chǔ)，使用提供的存在本地就。具體解決方案云存儲(chǔ)及帳號(hào)系統(tǒng)使用提供的存儲(chǔ)服務(wù)解決。

0. 目錄

要開發(fā)的是什么項(xiàng)目

1.1 想法開端
1.2 應(yīng)該有什么功能?

開發(fā)需要解決的核心問題

具體解決方案

3.1 帳號(hào)系統(tǒng)
3.2 存儲(chǔ)服務(wù)
3.3 使用`LeanEngine`做反防盜鏈中轉(zhuǎn)接口
3.4 Chrome 插件實(shí)現(xiàn)

對(duì)去后端化的看法

1. 要開發(fā)的是什么項(xiàng)目?

一個(gè)Chrome插件，用來(lái)保存瀏覽網(wǎng)頁(yè)時(shí)看到的喜歡的圖片。

1.1 想法開端

在 pixiv 翻圖時(shí)看到一些喜歡的插畫，看完就隨手翻過(guò)去了，沒有保存。為什么呢？因?yàn)橐晕覍?duì)自己的了解，圖片下載下來(lái)，就相當(dāng)于放進(jìn)了垃圾桶。并不是因?yàn)楸镜氐奈募芾碛卸鄟y，而是因?yàn)椋瑤缀鯖]有用鼠標(biāo)打開文件管理器的習(xí)慣。

現(xiàn)在我獲取信息的流量入口最常用的只有兩個(gè)：1. 終端 2. 瀏覽器

于是乎，一個(gè)想法油然而生：

把插畫存到瀏覽器吧！

于是就立刻構(gòu)思，動(dòng)手寫了這款插件。

1.2 應(yīng)該有什么功能?

功能很簡(jiǎn)單，
保存操作：1. 對(duì)圖片點(diǎn)擊右鍵 2. 選擇"保存到瀏覽器.." 之類的選項(xiàng)
查看操作：1. 點(diǎn)擊插件圖標(biāo) 查看保存過(guò)的圖片。
其它：1. 圖片同步到云端，也可保存到瀏覽器本地。2. 既然要保存到云端，自然需要賬號(hào)系統(tǒng)

2. 開發(fā)需要解決的核心問題

核心問題有兩個(gè)，一個(gè)是數(shù)據(jù)云存儲(chǔ)問題，一個(gè)是圖片防盜鏈問題。

云存儲(chǔ)問題，帳號(hào)系統(tǒng)，多端同步
最開始只想做瀏覽器本地的存儲(chǔ)，使用Chrome提供的localStorage存在本地就。
后來(lái)因?yàn)?b>localStorage并不支持?jǐn)?shù)據(jù)庫(kù)語(yǔ)法查詢，有很多不便。使用過(guò)程中又發(fā)現(xiàn)多端同步在體驗(yàn)上的優(yōu)越性，決定要把存儲(chǔ)放到云上。

圖片防盜鏈問題
看了些資料，解決方式基本可以分為兩種。

一類使用前端js嵌入iframe解決，優(yōu)點(diǎn)是解決方式簡(jiǎn)單，問題是Chrome插件不支持頁(yè)面嵌入式的js腳本。所以這個(gè)方案pass。

第二類使用后臺(tái)服務(wù)器做反防盜鏈措施，作為中轉(zhuǎn)給前端使用。優(yōu)點(diǎn)是不受chrome插件的各種安全機(jī)制的限制，缺點(diǎn)是需要后臺(tái)支持，增加工作量和資源成本。
使用第二類完成。

3. 具體解決方案

云存儲(chǔ)及帳號(hào)系統(tǒng)使用LeanCloud提供的存儲(chǔ)服務(wù)解決。

反防盜鏈接口使用LeanCloud提供的云引擎搭建NodeJs后臺(tái)。

啰嗦一句，為什么要使用LeanCloud?
一是對(duì)我的需求可以做到完全免費(fèi)，二是它們的文檔實(shí)在是太xx的好用了。

3.1 帳號(hào)系統(tǒng)

參照：數(shù)據(jù)存儲(chǔ)入門教程 · JavaScript

實(shí)現(xiàn)過(guò)程基本照抄這個(gè)教程的代碼。后臺(tái)賬號(hào)系統(tǒng)包括對(duì)賬號(hào)的重復(fù)檢測(cè)、密碼加密、session等都已經(jīng)實(shí)現(xiàn)。

我們要做的，就是調(diào)用前端的這幾個(gè)關(guān)鍵方法，實(shí)現(xiàn)簡(jiǎn)單的注冊(cè)、登陸、退出:

  // LeanCloud - 注冊(cè)
  // https://leancloud.cn/docs/leanstorage_guide-js.html#注冊(cè)
  var user = new AV.User();
  user.setUsername(username);
  user.setPassword(password);
  user.setEmail(email);
  user.signUp().then(function (loginedUser) {
    // 注冊(cè)成功
  }, (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 - 當(dāng)前用戶信息
  // https://leancloud.cn/docs/leanstorage_guide-js.html#當(dāng)前用戶
  var currentUser = AV.User.current();


  // 退出登陸
  AV.User.logOut();

3.2 存儲(chǔ)服務(wù)

使用賬號(hào)系統(tǒng)為每個(gè)用戶添加身份信息后，存儲(chǔ)部分就只需要把數(shù)據(jù) + 用戶身份信息一同上傳或下載就可以了。

照樣只貼關(guān)鍵方法

// 初始化類(在數(shù)據(jù)庫(kù)中表現(xiàn)為數(shù)據(jù)表`ImageRepo`)和實(shí)例(數(shù)據(jù)庫(kù)中表現(xiàn)為一條數(shù)據(jù))
this.ImageRepo = AV.Object.extend("ImageRepo");
var repo = new this.ImageRepo();
// 填充數(shù)據(jù)
repo.put("username", "xxx");
// 上傳數(shù)據(jù)
repo.save().then(function (repo) {
    }, function (error) {
    });

// 下載數(shù)據(jù)
// 初始化對(duì)"ImageRepo"表的查詢
var query = new AV.Query("ImageRepo");
// 查詢條件為 username字段等于"xxx"
query.equalTo("username", "xxx");
// 查詢
query.find().then(function(results) {
    // 遍歷results
    // 在頁(yè)面添加解決防盜鏈問題后的圖片
}, function(error) {
});

3.3 使用LeanEngine做反防盜鏈中轉(zhuǎn)接口

要實(shí)現(xiàn)的效果是:

我有一個(gè)防盜鏈圖片連接abc.com/xxx.png。

我的接口url是http://codeli.leanapp.cn/image?url=xxx。

訪問http://codeli.leanapp.cn/image?url=abc.com/xxx.png可訪問原圖，不受防盜鏈措施限制。

主要原理很簡(jiǎn)單，后臺(tái)處理圖片請(qǐng)求時(shí)更改header中的referer字段，將結(jié)果作為response返回。

關(guān)于這部分的實(shí)現(xiàn)，歡迎閱讀我的另一篇文章，就不再贅述：
服務(wù)器作防盜鏈圖片中轉(zhuǎn)，nodejs 上手項(xiàng)目簡(jiǎn)明教程

關(guān)于LeanEngin的使用，文檔如下，使用方法非常簡(jiǎn)單。

云引擎快速入門

云引擎支持NodeJS Python PHP JAVA

只需要下載云引擎命令行工具lean，然后輸入幾行命令就可以建立一個(gè)你熟悉的web框架。
然后，使用你熟悉的語(yǔ)言編寫反防盜鏈實(shí)現(xiàn)就行了。

3.4 Chrome 插件實(shí)現(xiàn)

有了 3.1~3.3 的實(shí)現(xiàn)，這部分就是簡(jiǎn)單的插件部署和業(yè)務(wù)邏輯了。

Chrome 插件結(jié)構(gòu)如圖：

主要業(yè)務(wù)：

在popup窗口中添加注冊(cè) 登陸退出等業(yè)務(wù)。

打開popup 窗口時(shí)從云端獲取指定賬號(hào)下保存的圖片信息，并展示。若未登陸，則從瀏覽器localStorage獲取并展示。

background script 中添加右鍵菜單項(xiàng): 當(dāng)目標(biāo)是圖片時(shí)，顯示Keep image in browser。

點(diǎn)擊Keep image in browser, 執(zhí)行保存業(yè)務(wù)邏輯: 若登陸了，保存到云端。若未登錄，保存到瀏覽器localStorage。

具體實(shí)現(xiàn)見我的github項(xiàng)目:  KeepImageInBrowser
插件Web Store地址： Favorite Image

4. 最后，對(duì)去后端化的看法

前段時(shí)間在知乎上看到了一個(gè)問題,我也順便說(shuō)下自己的看法。

web后端會(huì)不會(huì)變得越來(lái)越不需要?

像bmob和leancloud這類后臺(tái)云服務(wù)的流行有一段日子了，使用這些服務(wù)使一些web、app的開發(fā)周期大大縮減。這對(duì)于小團(tuán)隊(duì)和初創(chuàng)公司尤為方便。

但這并不意味著不再需要自己開發(fā)后臺(tái)。不是因?yàn)樗麄兲峁┑姆?wù)不夠全面(相反，我倒認(rèn)為這類服務(wù)將向著全面、便捷、快速發(fā)展)，而是因?yàn)楹芏喙竞彤a(chǎn)品，為了保持服務(wù)的質(zhì)量和穩(wěn)定，突出自己產(chǎn)品的特性，需要自己定制自己的后臺(tái)，有針對(duì)性的去優(yōu)化某些模塊。
云服務(wù)作為大眾服務(wù)平臺(tái)難以為每個(gè)產(chǎn)品做定制。

類似于游戲引擎，如今各個(gè)平臺(tái)都不缺乏優(yōu)秀的游戲引擎。可是仍有公司和團(tuán)隊(duì)耗費(fèi)大量的成本自研游戲引擎，就是希望能配合自己的游戲系統(tǒng)，完美地展現(xiàn)自己的游戲。

一樣的，后臺(tái)云服務(wù)和自定制的后臺(tái)，是相交但永遠(yuǎn)不會(huì)重合的關(guān)系。他們彼此之間相互影響，共同進(jìn)步。