chrome浏览器怎么设置中文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
3var VOG_LOG = "VOSTOCK";
4
5//object data saved in chrome storage
6
7var 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相关的开发⽂档，希望能够继续得到⼤家的关注。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。