摘要：擴(kuò)展應(yīng)用模塊功能介紹擴(kuò)展應(yīng)用由很多部分組成，其中主要模塊為為了避免由于翻譯原因?qū)е碌膯栴}，因此在下文中對相關(guān)模塊的稱呼一律采用上面的英文。附錄官方開發(fā)文檔英建議有英文閱讀能力的人閱讀此文檔。

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

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

本文的目標(biāo)群體：已經(jīng)了解或使用過chrome擴(kuò)展應(yīng)用，但是自己不知道如何開發(fā)一個(gè)chrome擴(kuò)展應(yīng)用的工程師。如果有具體的chrome擴(kuò)展應(yīng)用開發(fā)經(jīng)驗(yàn)的同學(xué)，本篇文章可能太過簡單，并不適合你。

本文的主要內(nèi)容如下：

chrome擴(kuò)展應(yīng)用模塊功能介紹

chrome擴(kuò)展應(yīng)用模塊開發(fā)介紹

本文的內(nèi)容不包括chrome擴(kuò)展應(yīng)用開發(fā)時(shí)提供的各個(gè)API功能詳解，有需求的同學(xué)可以自行查看官方API文檔。

chrome擴(kuò)展應(yīng)用由很多部分組成，其中主要模塊為：

Manifest File

Background Pages

Content Script

Options

為了避免由于翻譯原因?qū)е碌膯栴}，因此在下文中對相關(guān)模塊的稱呼一律采用上面的英文。下面，我們先簡單來了解下這些模塊具體是什么作用。

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的作用就是在瀏覽器運(yùn)行時(shí)，會(huì)長時(shí)間執(zhí)行的腳本。只要瀏覽器處于打開狀態(tài)，在Background Pages中的腳本就會(huì)在后臺(tái)執(zhí)行。

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

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

從官方的介紹我們可以了解，Options部分就是我們對于擴(kuò)展的管理功能。我們能夠通過一個(gè)模塊來對chrome擴(kuò)展應(yīng)用的設(shè)置和數(shù)據(jù)進(jìn)行處理。

首先，讓我們先確定我們插件需要完成的一個(gè)功能，這樣我們就能夠有一個(gè)目標(biāo)示例來進(jìn)行介紹。

以我自己開發(fā)的表情插件為例，它必須具備以下幾項(xiàng)功能：

能夠收集任何網(wǎng)頁的圖片作為表情

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

能夠在特定頁面中將表情發(fā)送出去

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

能夠收集保存任何網(wǎng)頁的圖片作為表情（長時(shí)間執(zhí)行腳本監(jiān)聽用戶操作）

能夠在特定頁面中將保存的表情發(fā)送出去（在目標(biāo)頁面中使用腳本與頁面進(jìn)行交互）

能夠在插件中管理已有表情（插件管理相關(guān)功能）

因此，需要完成上述功能，我們就需要用到上面我們提到的功能模塊。下面，讓我們按照模塊來看下，我們應(yīng)該如何實(shí)現(xiàn)這些功能。

首先，在進(jìn)行具體的功能開發(fā)時(shí)，我們需要來看下我們的項(xiàng)目配置文件。這個(gè)配置文件在整個(gè)chrome擴(kuò)展應(yīng)用中非常重要，包含了項(xiàng)目的屬性、配置、權(quán)限和資源信息。

{
  "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"
  ]
}

這是我開發(fā)的大象表情插件的manifest配置文件，我們通過這個(gè)配置文件來看下相關(guān)的屬性字段。

根據(jù)上面的實(shí)例文件和具體的屬性介紹，相信大家對manifest文件有了一個(gè)具體的了解。下面，我們來具體介紹下我們需要使用的各個(gè)功能模塊。

需要收集各個(gè)網(wǎng)頁的圖片，我們需要一個(gè)后臺(tái)常駐的腳本來滿足我們的需求。因此，我們需要使用Background Pages。

根據(jù)前一節(jié)的manifest文件，我們指定了background.js文件作為我們的后臺(tái)常駐腳本，下面讓我們來看下這個(gè)文件的部分示例內(nèi)容。

// 注冊一個(gè)右鍵菜單選項(xiàng)
chrome.runtime.onInstalled.addListener(function () {
    chrome.contextMenus.create({
        "id": "F577D6742FF1A1AB5946A8E5281D5C5D",
        "title": "添加到表情收藏",
        "contexts": ["image"]
    });
});

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

通過上面的例子，我們可以實(shí)現(xiàn)我們的目標(biāo)：當(dāng)用戶在任意網(wǎng)頁上面右鍵一張圖片時(shí)，右鍵菜單中都會(huì)增加一個(gè)選項(xiàng)——添加到表情收藏。點(diǎn)擊這個(gè)選項(xiàng)，我們就能夠?qū)⑦@張圖片存儲(chǔ)到我們的擴(kuò)展應(yīng)用提供的存儲(chǔ)模塊中。

其中，runtime和contextMenus是chrome提供的原生API，相關(guān)API接口可以見此處。

具體效果如下：

當(dāng)我們需要發(fā)送我們已經(jīng)保存的表情時(shí)，我們就需要跟頁面進(jìn)行部分功能交互了。這個(gè)時(shí)候，我們需要使用到Content Script。

當(dāng)我們使用Content Script時(shí)，我們的執(zhí)行上下文將會(huì)是整個(gè)頁面。因此，我們可以使用JavaScript來操縱DOM節(jié)點(diǎn)，和頁面原有的JavaScript進(jìn)行交互。

下面，我們通過jQuery來頁面注入表情面板，同時(shí)使用PostMessage來與原有頁面進(jìn)行數(shù)據(jù)通信。讓我們來看下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中將表情數(shù)據(jù)取出后，立即渲染到頁面中。當(dāng)渲染的表情被點(diǎn)擊時(shí)，我們就通過PostMessage將數(shù)據(jù)按照約定的格式發(fā)送即可。

在具體項(xiàng)目中的使用如下圖所示：

這樣，我們就解決了在特定的網(wǎng)頁與頁面的代碼進(jìn)行交互的功能。接下來讓我們來看下我們的“設(shè)置”頁面應(yīng)該怎么開發(fā)。

通過Options，我們能夠給chrome擴(kuò)展應(yīng)用開發(fā)一個(gè)“設(shè)置”頁面。當(dāng)我們指定options_page字段后，它的值就是我們的“設(shè)置”頁面。

開發(fā)一個(gè)管理已有表情的options頁面，其實(shí)就是一個(gè)帶有特殊API接口的網(wǎng)頁。我們?nèi)匀荒軌蛲ㄟ^chrome對象來訪問chrome提供的已經(jīng)申請過權(quán)限的API接口。

首先，我們將我們存儲(chǔ)在Storage中的圖片表情數(shù)據(jù)渲染出來，然后提供相關(guān)的操作函數(shù)。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
    });
};

如果我們需要在“設(shè)置”頁面刪除后，Content Script頁面立即響應(yīng)應(yīng)該怎么做呢？我們只需要在Content Script中增加Storage監(jiān)聽事件即可。具體代碼示例如下：

chrome.storage.onChanged.addListener((changes) => {
    let newFavorList = changes["newFavorList"];
    
    renderNewValue(newFavorList.newValue);
});

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

我們通過一個(gè)簡單的表情插件的例子來快速的介紹了chrome擴(kuò)展應(yīng)用的各個(gè)模塊的功能和開發(fā)方法。通過這篇文章大家應(yīng)該知道了chrome擴(kuò)展應(yīng)用各個(gè)模塊的作用和開發(fā)的方法。

如果大家想對chrome擴(kuò)展應(yīng)用有一個(gè)更加深入的了解，那么建議自己動(dòng)手開發(fā)相關(guān)的功能。這樣才能夠?qū)hrome擴(kuò)展應(yīng)用的相關(guān)邏輯有一個(gè)更加清楚的認(rèn)識。

附錄中提供了部分學(xué)習(xí)相關(guān)的文檔，有興趣的同學(xué)可以自行閱讀。

chrome官方開發(fā)文檔(英)——建議有英文閱讀能力的人閱讀此文檔。

chrome開發(fā)文檔(中)——閱讀中文文檔時(shí)，自動(dòng)忽略“百度”二字即可，同時(shí)建議參考官方文檔一起閱讀。