关于chrome插件开发(一)

      由于自己在做chrome插件开发的东西，也看了一些帖子，觉得大多原创帖子还是不错的，但不乏转的帖子，就存在重复和多余之处。现将我的开发过程写出来，一是自己记录一下，以便后面温习，或许写毕业论文也能用上；二是给一些刚开始学chrome插件开发，不知从何下手的同学一些建议。

     最简单的chrome插件由以下几个文件组成：manifest.json、popup.html和icon.

     首先，manifest.json文件是整个扩展的入口，描述chrome这个插件的所有相关信息，一个完成的manifest文件模板如下：

{
    "app":{
        "background":{
        "script":["background.js"]
      }
    },


    "manifest_version":2,
    "name":"My Extension",
    "version":"versionString",
    "default_locale":"en",
    "description":"A palin text description",
    "icons":{
        "16":"images/icon16.png",
        "48":"images/icon48.png",
        "128":"images/icon128.png"
    },
    "browser_action":{
        "default_icon":{
            "19":"images/icon19.png",
            "38":"images/icon38.png"
        },
        "default_title":"Extension Title",
        "default_popup":"popup.html"
    },
    "page_action":{
        "default_icon":{
            "19":"images/icon19.png",
            "38":"images/icon38.png"
    },
        "default_title":"Extension Title",
        "default_popup":"popup.html"
    },
    "background":{
        "scripts":["background.js"]
    },
    "content_scripts":[
        {
            "matches":["http://www.google.com/*"],
            "css":["mystyles.css"],
            "js":["jquery.js","myscript.js"]
        }
    ],
    "options_page":"options.html",
    "permissions":[
             "*://www.google.com/*"
    ],
    "web_accessible_resources":[
             "images/*.png"
    ]

具体每项的含义会在后面具体描述。

     其次就是一个popup.html文件，定义完这个文件，就可以在chrome工具栏中点击相应插件图标来显示一个小型网页，包含插件要显示的内容。

     最后就是一个图标文件夹了，里面有各种像素的图标，用于作为插件的badge.

     最简单的就是一个显示hello world的插件，如下：

   建一个名为Hello_World的文件夹，下面包含三个文件：manifest.json、popup,html、icon.png

   manifest.json文件如下：

   {
"name": "HelloChrome",  
    "version": "1.0",  
    "manifest_version": 2,  
    "icons":   
    {  
        "128": "icon.png"  
    },  
    "permissions": [ "notifications" ],  
    "description":"Hello Chrome: My First Chrome App!",  
    "browser_action":   
    {  
        "default_icon": "icon.png",  
        "default_popup": "popup.html"  
    }  
}  

popup.html文件如下：

<p>Hello,Chrome!</p>  

icon.png文件：

一个图片文件，后缀为PNG

最后一步：直接把Hello_World文件夹拖到chrome扩展工具一栏，点击右上角自己插件的图标即可显示Hello World