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