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相關的開發文檔，但願可以繼續獲得你們的關注。