說說Chrome外掛從開發除錯到打包釋出

mai-kuraki發表於2018-07-24
Chrome除錯

什麼是Chrome外掛

Chrome外掛其實和一個普通web應用一樣都是由html+css+js經過zip打包組成的，外掛可以使用Chrome提供的瀏覽器API，增強瀏擴充套件覽器的功能。
Chrome外掛通常是.crx字尾的檔案，通過谷歌網上應用商店下載或者在開發者模式中可以直接拖入到瀏覽器進行安裝。外掛安裝成功以後可以出現在兩個位置：

  1. 瀏覽器的位址列中
  2. 瀏覽器的工具欄中

出現的位置可以在配置檔案中配置。

接下來以clearRead為例說說Chrome外掛的開發打包和釋出。clearRead外掛是一款提取新聞頁面內容提供一個乾淨清爽閱讀介面的工具，可以在Chrome應用商店下載安裝。

這裡是GitHub地址github.com/mai-kuraki/…

說說Chrome外掛從開發除錯到打包釋出

專案結構

接下來看一下專案結構。真正打包的目錄是buildSrc資料夾，由於專案使用ES6語法進行開發所以將ES6檔案放到devSrc中進過編譯後輸出到buildSrc中。如果直接使用ES5可以省略devSrc目錄直接在buildSrc中開發。

.
├── Gruntfile.js    //grunt配置檔案
├── LICENSE
├── README.md
├── buildSrc        //最終打包成crx的目錄
│   ├── icon.png
│   ├── icon_gray.png
│   ├── image
│   │   └── icon.png
│   ├── js
│   │   ├── background.js
│   │   ├── contentScript.js
│   │   └── popup.js
│   ├── key.pem
│   ├── manifest.json
│   ├── mdl
│   │   ├── material.min.css
│   │   └── material.min.js
│   ├── popup.html
│   └── style
│       ├── content.css
│       ├── content.css.map
│       ├── content.scss
│       ├── style.css
│       ├── style.css.map
│       └── style.scss
├── crx             //crx檔案生成的輸出目錄
│   ├── clearRead.crx
│   └── clearRead.zip
├── devSrc          //開發檔案目錄
│   ├── background.js
│   ├── contentScript.js
│   ├── lib
│   │   └── Readability.js
│   └── popup.js
├── package-lock.json
└── package.json
複製程式碼

一個外掛的核心是manifest.json清單檔案，提供有關擴充套件程式的各種資訊。

{
  "manifest_version": 2,
  "name": "我的擴充套件程式",
  "version": "版本字串",
}
複製程式碼

這是一個最簡單的清單檔案，注意manifest_version欄位的值固定是2，清單的所有配置項可以檢視文件。

專案開發

Chrome外掛可以分為三部分，分別執行在不同的環境。

後臺頁面/事件頁面(backgrund)

顧名思義，後臺網頁是執行在瀏覽器後臺的，隨著瀏覽器的啟動開始執行，瀏覽器關閉結束執行。 事件頁面則是需要呼叫時載入，指令碼空閒時被解除安裝，兩者都是執行在後臺。

使用者介面網頁(popup)

點選外掛出來的小彈窗，每次點選彈出開始執行，彈窗關閉後結束，可以與backgrund指令碼互動。

內容指令碼(content)

安裝外掛後每開啟一個網頁可以將content指令碼注入到頁面中，內容指令碼可以讀取瀏覽器訪問的網頁的細節，並且可以修改頁面。

1.工具欄popup介面

點選工具欄/位址列（具體位置取決於配置檔案）外掛圖示出來的彈窗其實就是一個html頁面，彈窗要顯示的檔案，和工具欄小圖示在manifest.json檔案中配置。

{
    "browser_action": {
        "default_title": "clearRead",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
}
複製程式碼

在clearRead外掛中，popup介面主要是提供外掛的啟用狀態和快捷鍵配置功能。

說說Chrome外掛從開發除錯到打包釋出

2.內容指令碼content.js

內容指令碼在開啟網頁時會被注入到網頁中，它們在瀏覽器中已載入頁面的上下文中執行。應該將內容指令碼視為已載入頁面的一部分。clearRead的核心功能就是依賴於內容指令碼。 在哪些頁面中注入指令碼和注入什麼指令碼在manifest.json檔案中配置。

{
    "content_scripts": [
        {
            "matches": ["*://*/*", "file://*"],
            "css": ["style/content.css"],
            "js": ["js/contentScript.js"]
        }
    ]
}
複製程式碼

matches欄位可以設定一個匹配表示式來過濾需要注入指令碼的網站。檢視內容指令碼文件
clearRead外掛主要是利用內容指令碼向頁面注入指令碼，通過監聽快捷鍵啟用程式，分析提取頁面中的標題正文來生成閱讀模式。

3.後臺頁面/事件頁面

在manifest.json檔案中配置需要執行的指令碼

{
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  }
}
複製程式碼

配置引數persistent:false則後臺頁面變為事件頁面，事件頁面和背景頁面的區別是 是否常住後臺執行，Chrome 22開始可以使用事件頁面，應該儘量使用事件頁面，檢視事件頁面文件。

4.content、background、popup之間通訊

在指令碼中監聽事件

chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
    console.log('收到訊息')
    sendResponse('傳送返回值');
});
複製程式碼

傳送訊息

chrome.extension.sendMessage({msg: 'send a message'},(response) => { 
    console.log(response); 
});
複製程式碼

三個頁面之間可以互相通訊，這裡需要注意的是content指令碼會被注入到每個開啟的瀏覽器標籤中，如果從popup或者background傳送訊息到content中需要先確認當前的content，使用chrome.tabs.query可以找到當前啟用的視窗。
除了通過事件來通訊，popup和background還能通過chrome.extensionAPI來訪問指令碼。

chrome.extension.getBackgroundPage()
複製程式碼

getBackgroundPage可以返回當前擴充套件在後臺運指令碼的window物件。

chrome.extension.getViews()
複製程式碼

getViews返回一個陣列，含有每一個在當前擴充套件程式中執行的頁面的JavaScript window 物件。

5.本地儲存

應用開發還有一個比較重要的就是資料的持久化了，Chrome外掛可以使用html5的localStorage API來實現資料儲存。 對於狀態Chrome提供了chrome.cookies.*API來儲存cookies。同時Chrome還提供了chrome.storage.*API來儲存資料。
這裡主要說明一下chrome.storage，要使用儲存功能首先需要在manifest.json檔案中配置儲存許可權(cookies也需要)：

{
    "permissions": [
      "storage"
    ]
}
複製程式碼

storage儲存分為同步模式和本地模式分別是chrome.storage.sync.*和chrome.storage.local.*兩者的區別在於同步模式儲存的資料如果在另一臺裝置的瀏覽器登入同一個賬號資料會被同步。
儲存資料：

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});
複製程式碼

讀取資料：

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});
複製程式碼

如果想要只讀儲存可以使用chrome.storage.managed來儲存

指令碼的打包

Chrome瀏覽器的擴充套件程式頁面就提供了打包擴充套件的功能。

說說Chrome外掛從開發除錯到打包釋出

首先開啟開發者模式，點選打包擴充套件程式在這裡可以選擇擴充套件程式資料夾（buildSrc）來打包擴充套件。這種打包方式的缺點就是慢，在開發除錯階段打包次數可能讓人奔潰。
第二種就是使用命令打包了，使用crx模組：

npm install crx
複製程式碼

安裝完成後直接進入目錄進行打包

$ cd myFirstExtension
$ crx pack -o myFirstExtension.crx
複製程式碼

第三種方法比較推薦，結合grunt進行打包：

npm install grunt-crx
複製程式碼

安裝grunt-crx模組在Gruntfile.js中配置

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    ...
    grunt.initConfig({
        ...
        crx: {
            myPublicExtension: {
                src: "buildSrc/**/*",
                dest: "crx/clearRead.zip",
            },
            mySignedExtension: {
                src: "buildSrc/**/*",
                dest: "crx/clearRead.crx",
                options: {
                    privateKey: "buildSrc/key.pem"
                }
            }
        }
    });
    ...
    grunt.registerTask('crxTask', ['crx']);
};
複製程式碼

命令列執行命令$ grunt crxTask進行打包。
注：私鑰檔案key.pem可以通過執行crx打包命令生成，打包檔案需要生成crx和zip檔案，Chrome應用商店需要上傳zip檔案

擴充套件程式除錯

1.安裝擴充套件

首先需要開啟Chrome擴充套件管理頁面開啟開發者模式，普通模式下Chrome是禁止安裝非商店下載的擴充套件的。
開啟開發者模式後直接將crx/zip檔案拖入瀏覽器即可安裝。

說說Chrome外掛從開發除錯到打包釋出
也可以通過導航欄的載入已解壓擴充套件程式來安裝（需要解壓zip檔案）

說說Chrome外掛從開發除錯到打包釋出
注：window下直接拖入crx/zip檔案可能報錯（本人使用window10會有這個問題）需要拖入已解壓的資料夾才能安裝

2.除錯popup

在工具欄的擴充套件小圖示上右擊選擇審查彈出內容

說說Chrome外掛從開發除錯到打包釋出
會彈出Chrome的DevTools，除錯方式和普通頁面一樣。

3.除錯backgrund

在擴充套件管理頁面，在安裝的擴充套件上有背景頁按鈕點選會彈出background頁面的DevTools。

說說Chrome外掛從開發除錯到打包釋出

3.除錯content

content指令碼是直接注入到頁面中的所有直接在頁面開啟Devtools就能除錯了。

釋出上架

應用開發完成打包後就可以上架到應用商店了，首先需要一個Google賬號登入開發者資訊這個，首次成為開發著需要支付5美元才能上傳外掛到谷歌應用商店點選新增新內容開始上傳填寫外掛資訊

說說Chrome外掛從開發除錯到打包釋出
上傳檔案後開始填寫外掛的圖示、說明、及截圖，截圖將會以輪播圖的形式展現。螢幕截圖的尺寸必須是1280x800 或 640x400差一點點都會上傳失敗。

說說Chrome外掛從開發除錯到打包釋出
填寫完所有的資訊就可以釋出了，一般釋出十幾分鍾後在應用商店就能搜到你的外掛。外掛中的使用者統計應該是每日更新的，所有剛釋出後下載了但是沒有使用者數這是正常的。還有需要注意的是每次外掛有更新需要先更新manifest.json檔案中的manifest_version欄位再打包上傳。

一些API文件地址

  1. Chrome外掛的介紹
  2. 開發者指南
  3. manifest.json 完整欄位
  4. Chrome APIs

相關文章