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相关的开发文档，希望能够继续得到大家的关注。
