| 廣而告之： Chrome插件之一鍵保存網頁為PDF1.1發布 |
最近做“一鍵保存網頁為PDF”過程中，對Chrome插件的開發也有些心得，在這里分享給大家。
在這里我將我用我插件作為例子給大家講解，雖然我這篇文章是講manifest.json文件，不過在這過程中會同時介紹一些相關的東西。
整個Chrome插件開發最核心的就是manifest.json，熟悉了它，其它的都很容易了。
首先看我的插件的manifest.json文件：
{
"manifest_version": 2,
"name": "保存網頁為PDF",
"version": "1.1.7.80",
"description": "保存網頁為PDF【作者：塗劍凱，郵箱：bdstjk@qq.com】",
"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); });
參見：https://developer.chrome.com/extensions/background_pages.html
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就介紹到這里。
最后給大家看一個小例子：
http://files.cnblogs.com/bdstjk/ChromeExtensions_make_page_red.zip
解壓文件，使用chrome訪問 chrome://extensions/，勾選開發者模式，點擊加載正在開發的插件，選擇解壓目錄即可。
版權所有：http://www.cnblogs.com/bdstjk/ 轉載請保留文章出處。
參考：
http://kb.cnblogs.com/page/76134/