從零開始寫一個 Chrome 擴展

一個 Chrome 擴展其實就是一個配置文件 manifest.json 和一系列 HTML、CSS、JS、圖片文件的集合，因此只要有前端基礎，寫一個簡單的 Chrome 擴展是分分鐘的事情。

一個簡單的 Chrome 擴展的目錄結構是這樣的：

--chrome extension
  |--manifest.json
  |--script.js
  |--style.css
  |--popup.html

這裏主要講 Manifest 文件的編寫和擴展的調試，至於HTML、CSS、JS 及文件組織，跟普通的 Web 開發同樣。下面的涉及到的兩個栗子，源碼分別在 stock 和 weather 。

Manifest 文件

基本屬性

manifest.json 是 Chrome 擴展的入口文件，定義了 擴展的名稱（name）、版本（version）、描述（description）、圖標位置（icons）和 Manifest 版本（manifest_version）等信息。

其中，name、version 和 manifest_version 是必須的，並且 manifest_version 必須爲 2 。

browser_action

browser_action 指定擴展的圖標放在 Chrome 工具欄中，它定義了擴展圖標文件位置（default_icon）、懸浮提示（default_title）和點擊擴展圖標所顯示的頁面位置（default_popup）。

栗子

{
    ...
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "stock helper",
        "default_popup": "popup.html"
    },
    ...
}

好比一個查看股票信息的擴展，點開圖標後是這樣的效果

options_page

options_page 屬性定義了擴展的設置頁面，配置後在擴展圖標點擊右鍵能夠看到 選項 ，點擊即打開指定頁面。對於沒有圖標（沒有設置 browser_action）的擴展，能夠在 chrome://extensions/ 頁面找到選項按鈕。

栗子

{
    ...
    "options_page": "options.html",
    ...
}

permissions

permissions 屬性是一個數組，它定義了擴展須要向 Chrome 申請的權限，好比經過 XMLHttpRequest 跨域請求數據、訪問瀏覽器選項卡（tabs）、獲取當前活動選項卡（activeTab）、瀏覽器通知（notifications）、存儲（storage）等，能夠根據須要添加。

栗子

{
    ...
    "permissions": [
        "http://hq.sinajs.cn/list=*"
        "tabs",
        "activeTab",
        "notifications",
        "storage"
    ],
    ...
}

background

background 可使擴展常駐後臺，比較經常使用的是指定子屬性 scripts，表示在擴展啓動時自動建立一個包含全部指定腳本的頁面。

栗子

{
    ...
    "background": {
        "scripts": ["js/background.js"]
    },
    ...
}

chrome_url_overrides

chrome_url_overrides 屬性能夠自定義的頁面替換 Chrome 相應默認的頁面，好比新標籤頁（newtab）、書籤頁面（bookmarks）和歷史記錄（history）。

栗子

{
    ...
    "chrome_url_overrides": {
        "newtab": "tab.html"
    },
    ...
}

結合前面的 background 屬性，能夠作一個打開新標籤頁，就能看到天氣和當前時間的擴展，以下圖

調試

在編寫的過程當中，能夠經過打開 Chrome 設置-擴展程序（chrome://extensions/） 頁面，勾選 開發者模式，點擊 加載正在開發的擴展程序 按鈕，選擇擴展所在的文件夾，就能夠在瀏覽器工具欄中看到本身寫的擴展了。

若是是帶圖標的擴展，右鍵點擊圖標，點擊審查彈出內容，在相應位置加斷點，而後在控制檯（console）上，輸入如下命令：

location.reload()

從新加載這個頁面，就能夠調試了。

若是是覆蓋新標籤頁的應用，直接右鍵審查元素，加斷點，刷新便可。