编写一个简单的chrome插件

编写一个chrome插件，你须要准备好一个好看的图片做为扩展程序的图标。准备好图标后，咱们就要开始设计插件了。

一、chrome扩展须要的文件
能够这么理解，chrome扩展程序就是一个web应用，因此咱们实际是要写html代码。而chrome插件须要的文件就包括配置文件(manifest.json)、扩展图标(icon.png 能够是任意的名字，在配置文件中会使用到)、popup弹出窗口html文件(popup.html)以及其余静态资源文件(如images、css、js等)。以下图，我创建了一个jubar的文件用做chrome扩展文件夹。

二、Browser Actions（扩展图标）
只要chrome启用了某个chrome扩展程序，对应地将该程序的扩展图片显示在地址栏的右侧。

三、popup弹出窗口
接下来，就是编写popup弹出窗口了。

四、编写配置文件manifest.json
{
"name": "Jubar",
"manifest_version":2,
"version": "4.0.1",
"description": "Gather your friends and family",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "Jubar",
"default_popup": "popup.html"
}
}

必须属性：
name、version、manifest_version
一、name 插件名称；
二、version 插件的版本号；
三、manifest_version 指定清单文件格式的版本，在Chrome18以后，应该都是2，因此这个值直接设定为2就OK了；

推荐属性：
description、icons、default_locale
一、description 插件描述，简单介绍插件用途；
二、icons 插件图标，需准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（用在安装过程当中）的三个图标文件，建议为PNG格式，由于PNG对透明的支持最好；
三、default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用；

其余属性
browser_action表明扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。咱们这里定义的popup页面为popup.html。

 

六、打包扩展程序
一、打开Chrome –> 更多工具 –> 扩展程序
二、打开“开发者模式”