摘要：擴展應用模塊功能介紹擴展應用由很多部分組成，其中主要模塊為為了避免由于翻譯原因導致的問題，因此在下文中對相關模塊的稱呼一律采用上面的英文。附錄官方開發文檔英建議有英文閱讀能力的人閱讀此文檔。

本文通過對chrome插件的各個部分進行快速的介紹，從而讓大家了解插件各個部分的關系，并且知道如何將其進行組裝成一個完整的chrome插件。

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

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

本文的主要內容如下：

chrome擴展應用模塊功能介紹

chrome擴展應用模塊開發介紹

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

chrome擴展應用由很多部分組成，其中主要模塊為：

Manifest File

Background Pages

Content Script

Options

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

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 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其實就是我們需要寫的將會在我們希望的目標頁面中執行的腳本文件。每次目標頁面刷新時，這部分腳本也會重新加載執行。

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

從官方的介紹我們可以了解，Options部分就是我們對于擴展的管理功能。我們能夠通過一個模塊來對chrome擴展應用的設置和數據進行處理。

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

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

能夠收集任何網頁的圖片作為表情

能夠在插件中管理已有表情

能夠在特定頁面中將表情發送出去

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

能夠收集保存任何網頁的圖片作為表情（長時間執行腳本監聽用戶操作）

能夠在特定頁面中將保存的表情發送出去（在目標頁面中使用腳本與頁面進行交互）

能夠在插件中管理已有表情（插件管理相關功能）

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

首先，在進行具體的功能開發時，我們需要來看下我們的項目配置文件。這個配置文件在整個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": [
    "",
    "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文件有了一個具體的了解。下面，我們來具體介紹下我們需要使用的各個功能模塊。

需要收集各個網頁的圖片，我們需要一個后臺常駐的腳本來滿足我們的需求。因此，我們需要使用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時，我們的執行上下文將會是整個頁面。因此，我們可以使用JavaScript來操縱DOM節點，和頁面原有的JavaScript進行交互。

下面，我們通過jQuery來頁面注入表情面板，同時使用PostMessage來與原有頁面進行數據通信。讓我們來看下favor.js文件的部分示例代碼：

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


    let emotionPanel = $("
", {
        class: "smiley-emotion-panel"
    });

    newFavorList.forEach((element) => {
        if (element && element.url) {
            emotionPanel.append($("", {
                class: "icon icon-smiley-emotions",
                "click": postFavor
            }).append($("", {
                "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，我們能夠給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開發文檔(中)——閱讀中文文檔時，自動忽略“百度”二字即可，同時建議參考官方文檔一起閱讀。