Chrome浏览器扩展开发系列之十九：扩展开发示例

翻译总结了这么多的官网内容，下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例，介绍Chrome浏览器扩展程序的开发，开发环境为Eclipse IDE+Chrome Browser。

“沪深股票价格变化实时追踪提醒”软件能够实时获取用户指定的股票的价格等参数，并根据用户设置的价格区间进行越界提醒。该软件目前只实现了两部分，一个是options页面，用以配置用户要监听的股票及股票的价格区间。另一个是browser action类型的popup页面，供用户查看股票当前价格，并通过图标的Badge实现价格越界提醒。

首先在Eclipse中创建JavaScript项目。

在JavaScript项目所在的目录下分别创建_locales、css、html、img和js子目录，并创建manifest.json文件。

在_locales目录下创建zh_CN子目录，在zh_CN子目录下创建messages.json文件，支持中文的国际化。

将必要的CSS文件复制到css目录下。

将必要的PNG文件复制到img目录下。

在html目录下创建options.html和popup.html文件。HTML页面非常简单，只给出了HTML基本元素结构，引入了必要的CSS和JS。页面的具体内容都是由JS根据读取的数据动态生成的。

在js目录下创建如下JS文件:

constants.js定义全局常量

background.js定义数据操作逻辑，包括启动时的初始化和运行时的读写逻辑

storage.js定义数据存储逻辑，通过chrome.storage.sync API实现持久化数据的真正读写

options.js定义options.html页面的内容

popup.js定义popup.html页面的内容

utils.js定义通用的JS函数

jquery-min.js第三方jQuery类库

manifest.json文件内容：

{
"manifest_version": 2,

"name": "__MSG_extension_name__",
"description": "__MSG_extension_description__",
"version": "1.0",

"default_locale": "zh_CN",

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

"background": {
"scripts": ["js/shanghaiA.js", "js/shanghaiB.js", "js/shenzhenA.js", "js/shenzhenB.js", "js/shenzhenC.js", "js/shenzhenJ.js", "js/constants.js", "js/utils.js", "js/background.js", "js/storage.js"],
"persistent": true
},

"permissions": [
"notifications",
"storage",
"<all_urls>"//由于要通过Web Services调用获取股票的实时信息，此处必须有此项
],

"options_page": "html/options.html",
"options_ui": {
"page": "html/options.html",
"chrome_style": true,
"open_in_tab": false
},

"browser_action": {
"default_icon": {
"38": "img/vos128.png",
"19": "img/vos48.png"
},
"default_title": "__MSG_extension_browser_action_default_title__",
"default_popup": "html/popup.html"
}
}

数据结构：

//object name saved in chrome storage

var VOG_LOG = "VOSTOCK";

//object data saved in chrome storage

var VOG_LOG_DATA = {

dataVersion: 3,      //当前版本

products: [],        //用户监听的股票，用户可以通过options页面配置，其中包括股票的基本信息和用户的期望范围

interval: 5,         //股票信息更新时间间隔，默认5秒

notification: false  //是否开通Notification通知，默认不开通

};

options页面示例：



popup页面示例：



上图中，提示股票价格达到了期望上限。

关于Chrome浏览器扩展的介绍就此告一段落，谢谢大家的关注。

下面将陆续结合笔者目前的实际工作，陆续发布与Chrome浏览器Native Client相关的开发文档，希望能够继续得到大家的关注。