摘要：最近基于開(kāi)發(fā)了一款圖床插件，現(xiàn)在已經(jīng)開(kāi)源并上架應(yīng)用商店。通過(guò)方法把轉(zhuǎn)成，然后放在里測(cè)試一下看來(lái)效果是的，接下來(lái)就是對(duì)圖床插件進(jìn)行開(kāi)發(fā)的步驟了。至此，整個(gè)插件的開(kāi)發(fā)發(fā)布流程就已經(jīng)完成了。

最近基于 Github API 開(kāi)發(fā)了一款圖床 Chrome 插件 Picee，現(xiàn)在已經(jīng)開(kāi)源并上架 Chrome 應(yīng)用商店。當(dāng)中的過(guò)程涉及到一些有趣的知識(shí)點(diǎn)，故將其記錄下來(lái)。

Github地址：https://github.com/jrainlau/p...
Chrome商店下載地址：Picee

平時(shí)有寫(xiě)點(diǎn)東西的習(xí)慣，但是奈何一直找不到合適的圖床。有人推薦以微博或者七牛來(lái)做圖床，但是總給我一種”受制于人“的感覺(jué)，不知道什么時(shí)候就會(huì)被各種限制，比如禁止圖片外鏈等等。后來(lái)發(fā)現(xiàn)其實(shí) Github 是非常適合做圖床的，因?yàn)閭}(cāng)庫(kù)里的文件都可以通過(guò) https://raw.githubusercontent.com 這個(gè)鏈接直接外鏈以供下載。但是如果為了寫(xiě)個(gè)文章而每次添加圖片都需要一頓 Git 操作，那么寫(xiě)作體驗(yàn)必定非常不好，如果有更方便的辦法就好了——那就是Github API。

Github 提供了一套完善的 API 以供操作，幾乎涵蓋了開(kāi)發(fā)一個(gè)完整 Github 客戶(hù)端的所有功能。API 分為 REST 風(fēng)格的 v3 版本和 GraphQL 風(fēng)格的 v4 版本。為了使用方便，我選擇的是 v3 版本。具體的 API 細(xì)節(jié)可以在官方文檔查看。

要制作一個(gè)圖床應(yīng)用，我們只需要用到上傳文件的 API 即可。但是在調(diào)用這個(gè) API 之前，首選需要用戶(hù)對(duì)應(yīng)用進(jìn)行授權(quán)，也就是所謂的登錄操作。

對(duì)于一般的”查看”操作，是不需要授權(quán)的，比如獲取用戶(hù)的公開(kāi)信息，獲取公有倉(cāng)庫(kù)的 issues 等等。但是有兩個(gè)場(chǎng)景是需要授權(quán)的，其一是任何對(duì)于倉(cāng)庫(kù)的“增刪改查”操作（包括提交 issue，評(píng)論等）；其二則是對(duì)于某 IP 有 API 的調(diào)用次數(shù)限制，若這個(gè) IP 調(diào)用 Github API 的次數(shù)過(guò)多則需要授權(quán)。

那么授權(quán)應(yīng)該怎么做呢？官方提供了三種辦法，分別是 Basic，oAuth2 token和oAuth2 key/secret。

也就是最傳統(tǒng)的賬號(hào)密碼授權(quán)方式，我們可以在命令行用 curl 來(lái)測(cè)試之：

curl -u "賬號(hào):密碼" https://api.github.com

如果是正確的賬號(hào)密碼，則會(huì)返回一系列的內(nèi)容，否則會(huì)返回錯(cuò)誤信息。

對(duì)于開(kāi)發(fā)來(lái)說(shuō)，我更推薦使用 Postman 來(lái)對(duì) API 進(jìn)行測(cè)試：

點(diǎn)開(kāi)右邊的 code ，可以看到 JS 代碼：

其中 xhr.setRequestHeader("Authorization", "Basic xxxxxx");就是我們需要設(shè)置的授權(quán) header，當(dāng)中的 xxxxxx 是這么來(lái)的：

btoa(username + ":" + password)

對(duì)于賬號(hào)密碼來(lái)說(shuō)，輕易地在第三方平臺(tái)輸入其實(shí)并不那么安全，那么有沒(méi)有辦法既能保障賬戶(hù)的安全，又能實(shí)現(xiàn)授權(quán)的需求呢？答案就是 oAuth token。

簡(jiǎn)單來(lái)說(shuō)，oAuth token 相當(dāng)于用戶(hù)提供給第三方的一張授權(quán)令牌，第三方通過(guò)這張令牌可以獲得用戶(hù)所允許使用的一系列權(quán)限，但是卻不會(huì)知曉用戶(hù)的賬號(hào)和密碼，于是便得以在有效保障用戶(hù)賬號(hào)安全的同時(shí)，又能方便地對(duì)第三方應(yīng)用進(jìn)行授權(quán)。

在 Github 里，可以在這個(gè)地方設(shè)置生成具有某些權(quán)限的 token：

最后在 Postman 里選擇 OAuth 2.0 或者 Bearer Token，然后把這串 token 粘貼進(jìn)去即可。

其中的授權(quán) header 為 Bearer token。

這種授權(quán)方式是通過(guò)生成一對(duì) key/secret，來(lái)允許第三方獲取用戶(hù)的公開(kāi)信息，是一種只讀的授權(quán)方式，無(wú)法對(duì)倉(cāng)庫(kù)進(jìn)行改寫(xiě)操作，主要用于第三方登錄，故在這里不適用。更多關(guān)于 key/secret 的內(nèi)容可以查看阮一峰的《GitHub OAuth 第三方登錄示例教程》，寫(xiě)得非常生動(dòng)詳細(xì)。

在了解了三種授權(quán)方式之后，我們就可以進(jìn)行下一步操作，實(shí)現(xiàn)圖片的上傳了。

圖片上傳使用了 content API 的 create-a-file 接口，通過(guò) PUT 發(fā)送一條文件內(nèi)容為 base64 的請(qǐng)求到指定的倉(cāng)庫(kù)目錄。

這里著重圈出了必須把文件進(jìn)行 base64 編碼，否則接口調(diào)用將會(huì)出錯(cuò)。

通過(guò) btoa("hello world) 方法把 hello world 轉(zhuǎn)成 base64，然后放在 Postman 里測(cè)試一下：

看來(lái)效果是OK的，接下來(lái)就是對(duì)圖床插件進(jìn)行開(kāi)發(fā)的步驟了。

除了看官方文檔學(xué)習(xí)插件開(kāi)發(fā)以外，也可以參考由@小茗同學(xué) 所寫(xiě)的《【干貨】Chrome插件(擴(kuò)展)開(kāi)發(fā)全攻略》，里面對(duì)于 Chrome 插件的開(kāi)發(fā)有著詳細(xì)的敘述，非常值得一讀。

讀完上面推薦的文章之后，我選擇使用 VueJS 進(jìn)行開(kāi)發(fā)。由于項(xiàng)目比較簡(jiǎn)單，所以我沒(méi)有用任何的打包工具，直接通過(guò) script 的方式引入 VueJS。值得注意的是，Chrome 插件不允許行內(nèi) script 和行內(nèi) style，所以任何的 css 和 js 文件都必須通過(guò)本地文件鏈接的方式去使用。另外由于我們的 JS 是運(yùn)行在 Chrome 環(huán)境的，所以可以放心大膽地使用 es 模塊和 async/await 等高級(jí)語(yǔ)法，而無(wú)需任何的構(gòu)建工具參與。

但是在使用 VueJS 的第一步我就遇到了問(wèn)題，綁定了 new Vue() 的 DOM 元素竟然顯示不出來(lái)。經(jīng)過(guò)查證，原來(lái) Chrome 插件有 Content Security Policy (CSP) 限制，默認(rèn)是不支持 eval()，new Function() 等方式運(yùn)行代碼的，而完整版的 VueJS 恰好是這么干的（官網(wǎng)有說(shuō)），所以就出問(wèn)題了。那么怎么解決呢？很簡(jiǎn)單，在 manifest.json 里面聲明一下就好了：

// manifest.json

{
  // ...
  "content_security_policy": "script-src "self" "unsafe-eval"; object-src "self""
}

這里我采用的是 popup 形式的插件，彈出來(lái)的窗口就是項(xiàng)目所定義的 index.html。如果要調(diào)試插件的頁(yè)面，可以直接在插件彈出的窗口點(diǎn)擊右鍵，然后點(diǎn)擊“檢查”，就會(huì)彈出我們熟悉的開(kāi)發(fā)者工具了。如果插件文件有改動(dòng)，除了重新打開(kāi)插件以外，我們也可以在開(kāi)發(fā)者工具通過(guò) cmd + r 去直接刷新，省去了多次點(diǎn)擊的麻煩。

經(jīng)過(guò)前面的準(zhǔn)備，我們已經(jīng)掌握了如何對(duì) Github API 進(jìn)行授權(quán)然后上傳圖片的辦法，接下來(lái)就是在業(yè)務(wù)邏輯里去實(shí)現(xiàn)它們。我封裝了一下原生的 fetch 方法，讓它更方便調(diào)用：

const $fetch = (options) => {
  return window.fetch(options.url, {
    method: options.method || "GET",
    headers: {
      "Content-Type": "application/json",
      "Authorization": localStorage.getItem("picee_token")
    },
    body: JSON.stringify(options.body) || null,
    mode: "cors"
  })
    .then(async res => {
      if (res.status >= 200 && res.status < 400) {
        return {
          status: res.status,
          data: await res.json()
        }
      } else {
        return {
          status: res.status,
          data: null
        }
      }
    })
    .catch(e => e)
}

export default $fetch

請(qǐng)求接口時(shí)攜帶的授權(quán) header 所需的 token，我把它們存放在插件的 localStorage 下，方便調(diào)用。

有了請(qǐng)求接口的方法以后，接下來(lái)就要完成選擇圖片和把圖片轉(zhuǎn)化成 base64 的工作。這里我復(fù)用了另一個(gè)作品里的 chooseImg.js 和 paste.js 方法，最終能夠支持以選擇、粘貼、拖拽的方式上傳圖片。

剩下的一些功能細(xì)節(jié)就不贅述了，代碼非常簡(jiǎn)單，建議讀者們自行查閱。

準(zhǔn)備好了 logo，描述等善后工作之后，就可以正式提交應(yīng)用發(fā)布了。我們可以在開(kāi)發(fā)者信息中心里面把插件提交上去，填入必要的信息以后點(diǎn)擊發(fā)布，等待審核完成。但是在此之前，你必須支付5美元的開(kāi)發(fā)者注冊(cè)費(fèi)，國(guó)內(nèi)的開(kāi)發(fā)者在完成這一步的時(shí)候可能會(huì)遇到蠻大的困難，這一個(gè)問(wèn)題在知乎也有討論：如何在中國(guó)使用信用卡支付“Chrome 網(wǎng)上應(yīng)用店”開(kāi)發(fā)者注冊(cè)費(fèi)？。我是通過(guò)萬(wàn)能的淘寶搞定的。

在完成注冊(cè)之后和發(fā)布以后，就能看到插件的主頁(yè)了：

值得注意的是，剛發(fā)布的插件是暫時(shí)不能被搜索出來(lái)的，需要等待一段時(shí)間以后才能搜索出來(lái)。

至此，整個(gè)插件的開(kāi)發(fā)——發(fā)布流程就已經(jīng)完成了。