Chrome插件开发之manifest.json
⼴⽽告之：
最近做“⼀键保存⽹页为PDF”过程中，对Chrome插件的开发也有些⼼得，在这⾥分享给⼤家。
在这⾥我将我⽤我插件作为例⼦给⼤家讲解，虽然我这篇⽂章是讲manifest.json⽂件，不过在这过程中会同时介绍⼀些相关的东西。整个Chrome插件开发最核⼼的就是manifest.json，熟悉了它，其它的都很容易了。
⾸先看我的插件的manifest.json⽂件：
鲅鱼怎么做最好吃{
"manifest_version": 2,
"name": "保存⽹页为PDF",
"version": "1.1.7.80",
"description": "保存⽹页为PDF【作者：涂剑凯，邮箱：】",
"icons":{"16":"Images/16.png","48":"Images/48.png","128":"Images/128.png"},
"background": {
"page": "background.html"
},
神经受损怎样恢复"options_page": "options.html",
"browr_action":
{
"default_icon": "Images/16.png",
"name": "保存⽹页为PDF"
},
"permissions": [值班经理
"tabs",
"localhost:9240/",
"activeTab",
"notifications","storage","*/"
],
"update_url": "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"]
},
...买文具
}
清浊合流View Code
需要注意两点：
1、是HTML不能写JS代码，JS代码需要写到JS⽂件中后引⼊；
2、不能使⽤jquery（没有详细测试，可能是我没⽤正确）；
监听⽤户在扩展信息栏按下你的插件图标时，显⽰当前活动页的URL：
经络养生保健操
Clicked.addListener(function (tab) {
alert(tab.url);
});
View Code
options_page
options_page指定你的插件设置页⾯，这个看个⼈需求⽽定，可以不设置。
需要注意两点：
1、你需要将JS写到⼀个JS⽂件中后引⼊；
2、不能有HTML元素的内联事件（如<button onclick="...">），你需要通过JS给HTML元素绑定事件如：
$(document).ready(function () {
$("#btnOpenSetting").click(function () {
OpenSetting();
});
});
View Code
browr_action
春夏browr_action可以设置扩展信息栏的图标、图标悬浮提⽰、点击图标是弹出窗⼝（我的插件不需要弹出窗⼝所以未设置）；
给⼤家看⼀个完整例⼦：
{
"name": "My extension",
...
"browr_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
},
...
}
View Code
permissions
permissions对于manifest.json来说虽然不是必要属性，但是对于我们开发插件来说却是必要的manifest.json，我们总要向chrome申请点权限，才能完成我们的插件；
这⾥我就只介绍我的插件⾥⾯⽤到的权限（当然其实有点权限我最后也没⽤）：
"tabs", 访问浏览器选项卡
"localhost:9240/", AJAX访问localhost:9240的权限
"activeTab", 获取当前活动选项卡
"notifications", 浏览器通知（基于HTML5的通知实现）
"storage", 存储，希望存储⼀些设置的话，就需要⽤到
"*/" 访问任意域名的权限
update_url
update_url指定⾃动更新地址，如果你是通过chrome官⽅发布插件，这个属性不需要设置；但如果跟我⼀样通过⾮官⽅发布，这个属性就很巴适了；你只需要第⼀次拖拽安装插件，以后都能⾃动更新了。这⾥给⼀个update_url需要返回的数据格式例⼦：
<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='/update2/respon' protocol='2.0'>
<app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
<updatecheck codeba='/mytestextension/' version='2.0' />
</app>
</gupdate>
View Code
manifest.json就介绍到这⾥。
最后给⼤家看⼀个⼩例⼦：
解压⽂件，使⽤chrome访问 chrome://extensions/，勾选开发者模式，点击加载正在开发的插件，选择解压⽬录即可。
参考：
