chrome擴展應用開發快速科普

時間 2019-11-06

標籤 chrome 擴展應用開發快速科普欄目 Chrome 简体版

原文原文鏈接

概述

本文經過對chrome插件的各個部分進行快速的介紹，從而讓你們瞭解插件各個部分的關係，而且知道如何將其進行組裝成一個完整的chrome插件。javascript

因爲chrome官方文檔中對於如何從零開發一個chrome擴展應用沒有一套完整的流程，同時官方的API文檔對於初學者也不是那麼友好，所以本文將經過一個初學者的視角來說解如何從零開始快速瞭解和開發一個chrome插件。css

本文的目標羣體：已經瞭解或使用過chrome擴展應用，可是本身不知道如何開發一個chrome擴展應用的工程師。若是有具體的chrome擴展應用開發經驗的同窗，本篇文章可能太過簡單，並不適合你。html

本文的主要內容以下：java

chrome擴展應用模塊功能介紹
chrome擴展應用模塊開發介紹

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

chrome擴展應用模塊功能介紹

chrome擴展應用由不少部分組成，其中主要模塊爲：chrome

Manifest File
Background Pages
Content Script
Options

爲了不因爲翻譯緣由致使的問題，所以在下文中對相關模塊的稱呼一概採用上面的英文。下面，咱們先簡單來了解下這些模塊具體是什麼做用。json

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中的腳本就會在後臺執行。api

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擴展應用的設置和數據進行處理。app

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增長相關代碼，咱們就可以完成管理已有表情的功能。具體展現效果以下：