什麼是Chrome外掛

Chrome外掛是一個用Web技術開發、用來增強瀏覽器功能的軟體，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個[.crx][4]字尾的壓縮包.

開發與除錯

Chrome外掛沒有嚴格的專案結構要求，只要保證本目錄有一個manifest.json即可，也不需要專門的IDE，普通的web開發工具即可。

從右上角選單->更多工具->擴充套件程式可以進入 外掛管理頁面，也可以直接在位址列輸入chrome://extensions 訪問。

所需功能介紹

網上介紹chrome外掛開發的文章已經很多了，這裡就不贅述了，只列一些專案中需要的

manifest.json

這是一個Chrome外掛最重要也是必不可少的檔案，用來配置所有和外掛相關的配置，必須放在根目錄。其中，manifest_version、name、version3個是必不可少的，description和icons是推薦的。

下面給出的是一些常見的配置項，均有中文註釋

{
    // 清單檔案的版本，這個必須寫，而且必須是2
    "manifest_version": 2,
    // 外掛的名稱
    "name": "demo",
    // 外掛的版本
    "version": "1.0.0",
    // 外掛描述
    "description": "簡單的Chrome擴充套件demo",
    // 圖示，一般偷懶全部用一個尺寸的也沒問題
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 會一直常駐的後臺JS或後臺頁面
    "background":
    {
        // 2種指定方式，如果指定JS，那麼會自動生成一個背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 瀏覽器右上角圖示設定，browser_action、page_action、app必須三選一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 圖示懸停時的標題，可選
        "default_title": "這是一個示例Chrome外掛",
        "default_popup": "popup.html"
    },
    // 當某些特定頁面開啟才顯示的圖示
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全域性樣式
            "css": ["css/custom.css"],
            // 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
            "run_at": "document_start"
        },
        // 這裡僅僅是為了演示content-script可以配置多個規則
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 許可權申請
    "permissions":
    [
        "contextMenus", // 右鍵選單
        "tabs", // 標籤
        "notifications", // 通知
        "webRequest", // web請求
        "webRequestBlocking",
        "storage", // 外掛本地儲存
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
    ],
    // 普通頁面能夠直接訪問的外掛資源列表，如果不設定是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
    // 外掛主頁，這個很重要，不要浪費了這個免費廣告位
    "homepage_url": "https://www.baidu.com",
    // 覆蓋瀏覽器預設頁面
    "chrome_url_overrides":
    {
        // 覆蓋瀏覽器預設的新標籤頁
        "newtab": "newtab.html"
    },
    // Chrome40以前的外掛配置頁寫法
    "options_page": "options.html",
    // Chrome40以後的外掛配置頁寫法，如果2個都寫，新版Chrome只認後面這一個
    "options_ui":
    {
        "page": "options.html",
        // 新增一些預設的樣式，推薦使用
        "chrome_style": true
    },
    // 向地址欄註冊一個關鍵字以提供搜尋建議，只能設定一個關鍵字
    "omnibox": { "keyword" : "go" },
    // 預設語言
    "default_locale": "zh_CN",
    // devtools頁面入口，注意只能指向一個HTML檔案，不能是JS檔案
    "devtools_page": "devtools.html"
}
 

content-scripts

所謂[content-scripts][10]，其實就是Chrome外掛中向頁面注入指令碼的一種形式（雖然名為script，其實還可以包括css的），藉助content-scripts我們可以實現通過配置的方式輕鬆向指定頁面注入JS和CSS（如果需要動態注入，可以參考下文），最常見的比如：廣告遮蔽、頁面CSS定製，等等。

示例配置：

{
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全域性樣式
            "css": ["css/custom.css"],
            // 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
            "run_at": "document_start"
        }
    ],
}
 

特別注意，如果沒有主動指定run_at為document_start（預設為document_idle），下面這種程式碼是不會生效的

document.addEventListener('DOMContentLoaded', function()
{
    console.log('我被執行了！');
});

content-scripts和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個JS變數），只能通過injected js來實現。content-scripts不能訪問絕大部分chrome.xxx.api，除了下面這4種：

• chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
• chrome.i18n
• chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
• chrome.storage

由於content-script可以注入到頁面，所以我們將要開發的外掛的主要功能就在這裡

background

後臺（姑且這麼翻譯吧），是一個常駐的頁面，它的生命週期是外掛中所有型別頁面中最長的，它隨著瀏覽器的開啟而開啟，隨著瀏覽器的關閉而關閉，所以通常把需要一直執行
的、啟動就執行的、全域性的程式碼放在background裡面。

background的許可權非常高，幾乎可以呼叫所有的Chrome擴充套件API（除了devtools），而且它可以無限制跨域，也就是可以跨域訪問任何網站而無需要
求對方設定CORS。

經過測試，其實不止是background，所有的直接通過chrome-extension://id/xx.html這種方式開啟的網頁都可以無限制跨域。

配置中，background可以通過page指定一張網頁，也可以通過scripts直接指定一個JS，Chrome會自動為這個JS生成一個預設的網頁：

{
    // 會一直常駐的後臺JS或後臺頁面
    "background":
    {
        // 2種指定方式，如果指定JS，那麼會自動生成一個背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}

event-pages

這裡順帶介紹一下[event-pages][11]，它是一個什麼東西呢？鑑於background生命週期太長，長時間掛載後臺可能會影響效能，所以Google又弄一個event-pages，在配置檔案上，它與background的唯一區別就是多了一個persistent引數：

{
    "background":
    {
        "scripts": ["event-page.js"],
        "persistent": false
    },
}

它的生命週期是：在被需要時載入，在空閒時被關閉，什麼叫被需要時呢？比如第一次安裝、外掛更新、有content-script向它傳送訊息，等等。

我們要開發的外掛目前用到了background和content_scripts這兩個選項，如果以後新增新功能時再看看其他的選項，對chrome外掛開發感興趣的同學可以看看這本書