翻譯總結了這么多的官網內容，下面以一款博主開發的“滬深股票價格變化實時追蹤提醒”軟件為例，介紹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相關的開發文檔，希望能夠繼續得到大家的關注。