概述

本文通過對chrome外掛的各個部分進行快速的介紹，從而讓大家瞭解外掛各個部分的關係，並且知道如何將其進行組裝成一個完整的chrome外掛。

由於chrome官方文件中對於如何從零開發一個chrome擴充套件應用沒有一套完整的流程，同時官方的API文件對於初學者也不是那麼友好，因此本文將通過一個初學者的視角來講解如何從零開始快速瞭解和開發一個chrome外掛。

本文的目標群體：已經瞭解或使用過chrome擴充套件應用，但是自己不知道如何開發一個chrome擴充套件應用的工程師。如果有具體的chrome擴充套件應用開發經驗的同學，本篇文章可能太過簡單，並不適合你。

本文的主要內容如下：

• chrome擴充套件應用模組功能介紹
• chrome擴充套件應用模組開發介紹

本文的內容不包括chrome擴充套件應用開發時提供的各個API功能詳解，有需求的同學可以自行檢視官方API文件。

chrome擴充套件應用模組功能介紹

chrome擴充套件應用由很多部分組成，其中主要模組為：

• Manifest File

• Background Pages

• Content Script

• Options

為了避免由於翻譯原因導致的問題，因此在下文中對相關模組的稱呼一律採用上面的英文。下面，我們先簡單來了解下這些模組具體是什麼作用。

Background Pages

A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.

從官方的介紹我們可以知道，Background Pages的作用就是在瀏覽器執行時，會長時間執行的指令碼。只要瀏覽器處於開啟狀態，在Background Pages中的指令碼就會在後臺執行。

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

從上面官方的介紹我們可以知道，Content Script其實就是我們需要寫的將會在我們希望的目標頁面中執行的指令碼檔案。每次目標頁面重新整理時，這部分指令碼也會重新載入執行。

Options

To allow users to customize the behavior of your extension, you may wish to provide an options page.

從官方的介紹我們可以瞭解，Options部分就是我們對於擴充套件的管理功能。我們能夠通過一個模組來對chrome擴充套件應用的設定和資料進行處理。

chrome擴充套件應用模組開發介紹

首先，讓我們先確定我們外掛需要完成的一個功能，這樣我們就能夠有一個目標示例來進行介紹。

以我自己開發的表情外掛為例，它必須具備以下幾項功能：

• 能夠收集任何網頁的圖片作為表情
• 能夠在外掛中管理已有表情
• 能夠在特定頁面中將表情傳送出去

我們將上面的功能抽象一下，就能夠得到如下的結果：

• 能夠收集儲存任何網頁的圖片作為表情（長時間執行指令碼監聽使用者操作）
• 能夠在特定頁面中將儲存的表情傳送出去（在目標頁面中使用指令碼與頁面進行互動）
• 能夠在外掛中管理已有表情（外掛管理相關功能）

因此，需要完成上述功能，我們就需要用到上面我們提到的功能模組。下面，讓我們按照模組來看下，我們應該如何實現這些功能。

配置檔案（Manifest File）

首先，在進行具體的功能開發時，我們需要來看下我們的專案配置檔案。這個配置檔案在整個chrome擴充套件應用中非常重要，包含了專案的屬性、配置、許可權和資源資訊。

{
  "manifest_version": 2,
  "name": "大象表情收藏",
  "description": "大象表情收藏（非官方）",
  "version": "4.15.1",
  "default_locale": "zh_CN",
  "icons": {
    "16": "img/icon16.png",
    "48": "img/icon48.png",
    "128": "img/icon128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "permissions": [
    "<all_urls>",
    "storage",
    "contextMenus"
  ],
  "content_scripts": [
    {
      "css": [
        "js/main.css"
      ],
      "js": [
        "js/favor.js"
      ],
      "matches": [
        "*://x.sankuai.com/*"
      ],
      "run_at": "document_end"
    }
  ],
  "options_page": "options.html",
  "web_accessible_resources": [
    "img/favorite.png",
    "img/left.svg",
    "img/right.svg",
    "img/icon128.png",
    "img/plane.svg",
    "options.html"
  ]
}
複製程式碼

這是我開發的大象表情外掛的manifest配置檔案，我們通過這個配置檔案來看下相關的屬性欄位。

屬性名稱	屬性含義	備註
manifest_version	manifest檔案版本
name	專案名稱	釋出到商店時的名稱。
description	專案簡介	釋出到商店時的簡介。
version	專案版本	釋出到商店時需要每次遞增。
default_locale	預設的locale目錄	具體見此處。
icons	擴充套件應用圖示	需要提供16x16，48x48，128x128三種尺寸。
background	Background Pages檔案
permissions	擴充套件應用所需許可權	許可權列表見此處。申請許可權後，可以使用chrome物件來進行訪問該許可權提供的API介面。我所開發的擴充套件應用主要是使用到了右鍵選單和儲存許可權
content_scripts	Content Script檔案	matches欄位表示Content Script檔案生效的域名
options_page	Options檔案
web_accessible_resources	擴充套件需要訪問的本地資源	只用列舉的資源才能夠在擴充套件中通過相對路徑方式訪問。

根據上面的例項檔案和具體的屬性介紹，相信大家對manifest檔案有了一個具體的瞭解。下面，我們來具體介紹下我們需要使用的各個功能模組。

收集網頁的圖片（Background Pages）

需要收集各個網頁的圖片，我們需要一個後臺常駐的指令碼來滿足我們的需求。因此，我們需要使用Background Pages。

根據前一節的manifest檔案，我們指定了background.js檔案作為我們的後臺常駐指令碼，下面讓我們來看下這個檔案的部分示例內容。

// 註冊一個右鍵選單選項
chrome.runtime.onInstalled.addListener(function () {
    chrome.contextMenus.create({
        'id': 'F577D6742FF1A1AB5946A8E5281D5C5D',
        'title': '新增到表情收藏',
        'contexts': ['image']
    });
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
    var src = info['srcUrl'];
    // 獲取之前儲存的表情
    chrome.storage.local.get(['newFavorList'], function (items) {
        var newFavorList = items['newFavorList'] || [];
        newFavorList.push(src);
        
        // 儲存所有表情
        chrome.storage.local.set({
        	'newFavorList': newFavorList
    	});
    });
});
複製程式碼

通過上面的例子，我們可以實現我們的目標：當使用者在任意網頁上面右鍵一張圖片時，右鍵選單中都會增加一個選項——新增到表情收藏。點選這個選項，我們就能夠將這張圖片儲存到我們的擴充套件應用提供的儲存模組中。

其中，runtime和contextMenus是chrome提供的原生API，相關API介面可以見此處。

具體效果如下：

傳送儲存的表情（Content Script）

當我們需要傳送我們已經儲存的表情時，我們就需要跟頁面進行部分功能互動了。這個時候，我們需要使用到Content Script。

當我們使用Content Script時，我們的執行上下文將會是整個頁面。因此，我們可以使用JavaScript來操縱DOM節點，和頁面原有的JavaScript進行互動。

下面，我們通過jQuery來頁面注入表情皮膚，同時使用PostMessage來與原有頁面進行資料通訊。讓我們來看下favor.js檔案的部分示例程式碼：

chrome.storage.local.get(['newFavorList'], (items) => {
    let favorBox = $('#favorbox');
    favorBox.empty();
    newFavorList = items.newFavorList;


    let emotionPanel = $('<div>', {
        class: 'smiley-emotion-panel'
    });

    newFavorList.forEach((element) => {
        if (element && element.url) {
            emotionPanel.append($('<span>', {
                class: 'icon icon-smiley-emotions',
                'click': postFavor
            }).append($('<img>', {
                'width': '100%',
                'height': '100%',
                src: element.url
            })));
        }
    });

    favorBox.append(emotionPanel);
});

function postFavor(e) {
    let src = event.target.getAttribute('src');
    
    window.postMessage({
        type: 'sendCustomEmotion',
        text: src
    }, '*');
}
複製程式碼

通過上面的示例程式碼，我們可以知道：從Storage中將表情資料取出後，立即渲染到頁面中。當渲染的表情被點選時，我們就通過PostMessage將資料按照約定的格式傳送即可。

在具體專案中的使用如下圖所示：

這樣，我們就解決了在特定的網頁與頁面的程式碼進行互動的功能。接下來讓我們來看下我們的“設定”頁面應該怎麼開發。

管理已有表情（Options）

通過Options，我們能夠給chrome擴充套件應用開發一個“設定”頁面。當我們指定options_page欄位後，它的值就是我們的“設定”頁面。

開發一個管理已有表情的options頁面，其實就是一個帶有特殊API介面的網頁。我們仍然能夠通過chrome物件來訪問chrome提供的已經申請過許可權的API介面。

首先，我們將我們儲存在Storage中的圖片表情資料渲染出來，然後提供相關的操作函式。options.js部分示例程式碼如下：

$scope.remove = function (obj) {
    var result = [];

    $scope.favors.forEach(function (element) {
        if (element.url !== obj.url) {
            result.push(element);
        }
    });
    $scope.favors = result;
    chrome.storage.local.set({
        'newFavorList': $scope.favors
    });
};
複製程式碼

如果我們需要在“設定”頁面刪除後，Content Script頁面立即響應應該怎麼做呢？我們只需要在Content Script中增加Storage監聽事件即可。具體程式碼示例如下：

chrome.storage.onChanged.addListener((changes) => {
    let newFavorList = changes['newFavorList'];
    
    renderNewValue(newFavorList.newValue);
});
複製程式碼

通過在Options和Content Script增加相關程式碼，我們就能夠完成管理已有表情的功能。具體展示效果如下：

總結

我們通過一個簡單的表情外掛的例子來快速的介紹了chrome擴充套件應用的各個模組的功能和開發方法。通過這篇文章大家應該知道了chrome擴充套件應用各個模組的作用和開發的方法。

如果大家想對chrome擴充套件應用有一個更加深入的瞭解，那麼建議自己動手開發相關的功能。這樣才能夠對chrome擴充套件應用的相關邏輯有一個更加清楚的認識。

附錄中提供了部分學習相關的文件，有興趣的同學可以自行閱讀。

附錄

• chrome官方開發文件(英)——建議有英文閱讀能力的人閱讀此文件。
• chrome開發文件(中)——閱讀中文文件時，自動忽略“百度”二字即可，同時建議參考官方文件一起閱讀。