《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"]
  },
  ...
}

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

需要注意两点：

1、是HTML不能写JS代码，JS代码需要写到JS文件中后引入；

2、不能使用jquery（没有详细测试，可能是我没用正确）；

监听用户在扩展信息栏按下你的插件图标时，显示当前活动页的URL：

chrome.browserAction.onClicked.addListener(function (tab) {
alert(tab.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();
    });
});

$(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
  },
  ...
}

{
  "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>

<?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就介绍到这里。