最近做“一鍵儲存網頁為PDF”過程中，對Chrome外掛的開發也有些心得，在這裡分享給大家。

在這裡我將我用我外掛作為例子給大家講解，雖然我這篇文章是講manifest.json檔案，不過在這過程中會同時介紹一些相關的東西。

整個Chrome外掛開發最核心的就是manifest.json，熟悉了它，其它的都很容易了。

首先看我的外掛的manifest.json檔案：

{
  
	"manifest_version": 2,
  
	"name": "儲存網頁為PDF",
  
	"version": "1.1.7.80",
  
	"description": "儲存網頁為PDF【作者：塗劍凱，郵箱：
 
[email protected]】",

	"icons":{"16":"Images/16.png","48":"Images/48.png","128":"Images/128.png"},

	"background": {
		"page": "background.html"
	},

	"options_page": "options.html",
  
	"browser_action": 
	{
    
		"default_icon": "Images/16.png",
    
		"name": "儲存網頁為PDF"
  
	},
  
	"permissions": [
		"tabs",
		"http://localhost:9240/",
		"activeTab",
		"notifications","storage","http://*/"
	],

	"update_url": "http://localhost:9240/SaveService/GetUpdateXML"
}
 

必須屬性：name、version、manifest_version

1、name 顧名思義就是你的外掛的名稱；

2、version 指你的外掛的版本號；

3、manifest_version 指定清單檔案格式的版本，在Chrome18之後，應該都是2，所以這個值直接設定為2就OK了；

推薦屬性：description、icons、default_locale 

1、description 外掛描述，簡單介紹外掛用途；

2、icons 外掛圖示，需準備16*16（擴充套件資訊欄）、48*48（擴充套件管理頁面）、128*128（用在安裝過程中）的三個圖示檔案，建議為PNG格式，因為PNG對透明的支援最好；

3、default_locale 國際化支援，支援何種語言的瀏覽器，雖然官方推薦，不過我沒用；

background

這是一個比較重要的屬性，如果你需要執行一些後臺指令碼，比如監聽使用者在擴充套件資訊欄按下你的外掛圖示，或者你要監聽使用者新建tab頁，這個時候你就需要有一個background的頁面。background你可以指定一個HTML頁面（如我的外掛），也可以指定一個JS檔案，如：

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"]
  },
  ...
}

需要注意兩點：

1、是HTML不能寫JS程式碼，JS程式碼需要寫到JS檔案中後引入；

2、不能使用jquery（沒有詳細測試，可能是我沒用正確）；

監聽使用者在擴充套件資訊欄按下你的外掛圖示時，顯示當前活動頁的URL：

chrome.browserAction.onClicked.addListener(function (tab) {
alert(tab.url);
});

options_page

options_page指定你的外掛設定頁面，這個看個人需求而定，可以不設定。

需要注意兩點：

1、你需要將JS寫到一個JS檔案中後引入；

2、不能有HTML元素的內聯事件（如<button onclick="...">），你需要通過JS給HTML元素繫結事件如：

$(document).ready(function () {
    $("#btnOpenSetting").click(function () {
        OpenSetting();
    });
});

browser_action

browser_action可以設定擴充套件資訊欄的圖示、圖示懸浮提示、點選圖示是彈出視窗（我的外掛不需要彈出視窗所以未設定）；

給大家看一個完整例子：

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                    // optional
      "19": "images/icon19.png",           // optional
      "38": "images/icon38.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

permissions

permissions對於manifest.json來說雖然不是必要屬性，但是對於我們開發外掛來說卻是必要的manifest.json，我們總要向chrome申請點許可權，才能完成我們的外掛；

這裡我就只介紹我的外掛裡面用到的許可權（當然其實有點許可權我最後也沒用）：

"tabs", 訪問瀏覽器選項卡
"http://localhost:9240/", AJAX訪問localhost:9240的許可權
"activeTab", 獲取當前活動選項卡
"notifications", 瀏覽器通知（基於HTML5的通知實現）
"storage", 儲存,希望儲存一些設定的話，就需要用到
"http://*/" 訪問任意域名的許可權

update_url

update_url指定自動更新地址，如果你是通過chrome官方釋出外掛，這個屬性不需要設定；但如果跟我一樣通過非官方釋出，這個屬性就很巴適了；你只需要第一次拖拽安裝外掛，以後都能自動更新了。這裡給一個update_url需要返回的資料格式例子：

<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
  <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
    <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
  </app>
</gupdate>

manifest.json就介紹到這裡。

最後給大家看一個小例子：

解壓檔案，使用chrome訪問 chrome://extensions/，勾選開發者模式，點選載入正在開發的外掛，選擇解壓目錄即可。

參考：