說說Chrome插件從開發調試到打包發佈

時間 2019-11-06

原文原文鏈接

什麼是Chrome插件

Chrome插件其實和一個普通web應用同樣都是由html+css+js通過zip打包組成的，插件可使用Chrome提供的瀏覽器API，加強瀏擴展覽器的功能。
Chrome插件一般是.crx後綴的文件，經過谷歌網上應用商店下載或者在開發者模式中能夠直接拖入到瀏覽器進行安裝。插件安裝成功之後能夠出如今兩個位置：css

瀏覽器的地址欄中
瀏覽器的工具欄中

出現的位置能夠在配置文件中配置。html

接下來以clearRead爲例說說Chrome插件的開發打包和發佈。clearRead插件是一款提取新聞頁面內容提供一個乾淨清爽閱讀界面的工具，能夠在Chrome應用商店下載安裝。html5

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

項目結構

接下來看一下項目結構。真正打包的目錄是buildSrc文件夾，因爲項目使用ES6語法進行開發因此將ES6文件放到devSrc中進過編譯後輸出到buildSrc中。若是直接使用ES5能夠省略devSrc目錄直接在buildSrc中開發。github

.
├── 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清單文件，提供有關擴展程序的各類信息。web

{
  "manifest_version": 2,
  "name": "個人擴展程序",
  "version": "版本字符串",
}
複製代碼

這是一個最簡單的清單文件，注意manifest_version字段的值固定是2，清單的全部配置項能夠查看文檔。chrome

項目開發

Chrome插件能夠分爲三部分，分別運行在不一樣的環境。npm

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

顧名思義，後臺網頁是運行在瀏覽器後臺的，隨着瀏覽器的啓動開始運行，瀏覽器關閉結束運行。事件頁面則是須要調用時加載，腳本空閒時被卸載，二者都是運行在後臺。json

用戶界面網頁(popup)

點擊插件出來的小彈窗，每次點擊彈出開始運行，彈窗關閉後結束，能夠與backgrund腳本交互。api

內容腳本(content)

安裝插件後每打開一個網頁能夠將content腳本注入到頁面中，內容腳本能夠讀取瀏覽器訪問的網頁的細節，而且能夠修改頁面。

1.工具欄popup界面

點擊工具欄/地址欄（具體位置取決於配置文件）插件圖標出來的彈窗其實就是一個html頁面，彈窗要顯示的文件，和工具欄小圖標在manifest.json文件中配置。

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

在clearRead插件中，popup界面主要是提供插件的啓用狀態和快捷鍵配置功能。

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瀏覽器的擴展程序頁面就提供了打包擴展的功能。

首先打開開發者模式，點擊打包擴展程序在這裏能夠選擇擴展程序文件夾（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文件