記錄一個 Chrome 擴展的開發過程

chrome-extension-smms 是基於 smms 實現的一個 chrome 圖牀擴展。
其實很早以前就想學習 Chrome 擴展開發 了，只是一直沒有抽出時間，一直瞎忙。今天恰好閒下來了並且恰好看到一些跟 Chrome 擴展開發相關的文章，因而就像動手寫一個試試，因而就有了這篇文章。

什麼是 Chrome 擴展 ？

首先，這裏所說的 Chrome擴展 ，並不是 Chrome插件，二者是有區別的，想要弄明白這兩個概念的能夠看看知乎的這個問題 Chrome 的插件（Plugin）與擴展（Extension）有什麼區別？

• 擴展（Extension）: 指的是經過調用 Chrome 提供的 Chrome API 來擴展瀏覽器功能的一種組件，工做在瀏覽器層面，使用 HTML + Javascript 語言開發。好比著名的 Adblock plus。

如何開發一個 Chrome 擴展 ？

既然知道了 Chrome 擴展 是用 HTML + javascript 開發的了，那麼咱們首先要作的就是要搭建一個前端項目出來。

本文講述的是一個 Chrome擴展 的大體過程，不會出現具體的功能如何實現。

初始化項目

因爲我我的喜歡用 react.js 來構建前端應用， 這裏我使用 dva-cli 來初始化項目，這個沒有特殊要求，你能夠隨意使用本身喜歡的前端項目構建工具。

npm i -g dva-cli
dva new smms-extension
cd smms-extension

編寫擴展的相關業務實現

在項目中編寫業務的實現，例如 smms圖牀擴展 的邏輯是上傳圖片到圖牀，而後展現列表，提供刪除圖片和預覽圖片的方法，而後實現他。

打包前端項目並在 Chrome 中預覽

npm run build 打包好應用後，添加 manifest.json 文件到打包好的資源的文件夾，我這裏是 dist 文件夾。而後修改 manifest.json 文件:

{
  "manifest_version": 2,
  "name": "SMMS圖牀",
  "description": "一個簡單實用的圖牀擴展",
  "version": "1.",
  "icons": {
    "16": "qbhy.png",
    "48": "qbhy.png",
    "128": "qbhy.png"
  },
  "permissions": [
    "tabs"
  ],
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "qbhy.png",
    "default_title": "SMMS圖牀",
    "default_popup": "index.html"
  }
}

以上內容大概描述了該擴展的圖標、默認打開方式、入口文件 、title 等屬性，完整的 manifest.json 屬性請移步 360瀏覽器擴展開發文檔(其實就是翻譯事後的 Chrome 擴展開發文檔)。

注意 index.html 文件裏面的資源引用問題，不能使用 /index.js 這種方式引用腳本，要用相對路徑引用,例如直接寫 index.js，css同理。

而後用 Chrome 打開 chrome://extensions 頁面，勾選開發者模式。
而後點擊 加載已解壓的擴展程序

選擇包含 manifest.json 的文件夾，我這裏是dist。

而後右上角就多了一個圖標，不過如今還不是咱們設置的那個圖標，由於如今還沒打包成 .crx 後綴的擴展。

而後點開就能夠預覽了

打包擴展程序

通過一番調試，肯定擴展沒有問題後，就能夠打包了。


打包好後會在跟目錄同級的地方生成一個跟目錄同名的以 .crx 爲後綴的擴展文件，這個文件就能夠直接發給別人使用了，至於密鑰文件我還不知道有什麼用，反正我是刪了。

後續步驟

最後初始化一個 git 倉庫，上傳上去，這事就算這麼完了。什麼？你要發佈到 chrome store ？首先告訴你這要付 5$ 的開發者年費，對是 5 刀，不是 5 軟妹幣，其實也不算貴，畢竟裝一個很愉快的逼比這點錢重要多了，可是我仍是在發佈的路上碰到坑了， 例如：

而後我就放棄了發佈到 chrome store 的想法。
感興趣的朋友能夠自行嘗試一下，傳送門

本文主要想記錄一個 Chrome 擴展開發的大體過程，同時但願讓初學者可以看清 Chrome 擴展的神祕面紗後面的真相，因此許多細節並未深究，如讀者有興趣能夠在下方評論與我一塊兒討論。