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文件内容：

 1 {
 2   "manifest_version": 2,
 3 
 4   "name": "__MSG_extension_name__",
 5   "description": "__MSG_extension_description__",
 6   "version": "1.0",
 7 
 8   "default_locale": "zh_CN",
 9   
10   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
11   
12   "background": {
13     "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"],
14     "persistent": true
15   },
16   
17   "permissions": [
18       "notifications",
19       "storage",
20     "<all_urls>"//由于要通过Web Services调用获取股票的实时信息，此处必须有此项
21   ],
22   
23   "options_page": "html/options.html",
24   "options_ui": {
25     "page": "html/options.html",
26     "chrome_style": true,
27     "open_in_tab": false
28   },
29   
30   "browser_action": {
31     "default_icon": {
32         "38": "img/vos128.png",
33         "19": "img/vos48.png"
34     },
35     "default_title": "__MSG_extension_browser_action_default_title__",
36     "default_popup": "html/popup.html"
37   }
38 }

数据结构：

 1 //object name saved in chrome storage
 2 
 3 var VOG_LOG = "VOSTOCK";
 4 
 5 //object data saved in chrome storage
 6 
 7 var VOG_LOG_DATA = {
 8 
 9        dataVersion: 3,      //当前版本
10 
11        products: [],        //用户监听的股票，用户可以通过options页面配置，其中包括股票的基本信息和用户的期望范围
12 
13        interval: 5,         //股票信息更新时间间隔，默认5秒
14 
15        notification: false  //是否开通Notification通知，默认不开通
16 
17 };

options页面示例：

popup页面示例：

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

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

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