使用 LeanCloud 服務做一站式 Chrome 外掛開發 —— Favorite Image

LeanCloud發表於2019-02-21
CloudChrome

作者：李信棟

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 做反防盜鏈中轉介面

要實現的效果是:

主要原理很簡單，後臺處理圖片請求時更改header中的referer欄位，將結果作為response返回。

關於這部分的實現，歡迎閱讀我的另一篇文章，就不再贅述：
伺服器作防盜鏈圖片中轉，nodejs 上手專案簡明教程

關於LeanEngin的使用，文件如下，使用方法非常簡單。

雲引擎快速入門

雲引擎支援NodeJS Python PHP JAVA

只需要下載雲引擎命令列工具 lean，然後輸入幾行命令就可以建立一個你熟悉的 web 框架。
然後，使用你熟悉的語言編寫反防盜鏈實現就行了。

3.4 Chrome 外掛實現

有了 3.1~3.3 的實現，這部分就是簡單的外掛部署和業務邏輯了。

Chrome 外掛結構如圖：

使用 LeanCloud 服務做一站式 Chrome 外掛開發 —— Favorite Image

主要業務：

  • 在 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 的開發週期大大縮減。這對於小團隊和初創公司尤為方便。

但這並不意味著不再需要自己開發後臺。不是因為他們提供的服務不夠全面(相反，我倒認為這類服務將向著全面、便捷、快速發展)，而是因為很多公司和產品，為了保持服務的質量和穩定，突出自己產品的特性，需要自己定製自己的後臺，有針對性的去優化某些模組。雲服務作為大眾服務平臺難以為每個產品做定製。

類似於遊戲引擎，如今各個平臺都不缺乏優秀的遊戲引擎。可是仍有公司和團隊耗費大量的成本自研遊戲引擎，就是希望能配合自己的遊戲系統，完美地展現自己的遊戲。

一樣的，後臺雲服務和自定製的後臺，是相交但永遠不會重合的關係。 他們彼此之間相互影響，共同進步。

相關文章