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相關的開發文件，希望能夠繼續得到大家的關注。

Chrome瀏覽器擴充套件開發系列之十九：擴充套件開發示例

相關文章