第一次寫 Chrome 擴充功能就上手：多語言

繼上次新增空白頁籤的功能，這次要介紹如何支援多語言。

首先，在專案目錄下建立多語言資料的目錄： _locales，
在此目錄下，建立所需語言的名稱目錄，
例：正體中文：zh_TW
(名稱對應表可參考此)

專案目錄結構如下：
(以上圖片來自 Chrome Extension i18n 開發文件)

放置多語言翻譯文字的檔案名稱為：messages.json
檔案內容為 json 格式。

將擴充功能說明改為多語言為例，
新增 _locales/zh_TW/messages.json，內容如下：

{
  "appDesc" : {                  // 項目名稱
    "message" : "客製化的新頁籤"   // 欲顯示的內容
  }
}

預設語系為英文，
新增另一檔案 _locales/en/messages.json ，內容如下：

{
  "appDesc" : {
    "message" : "customized new tab"
  }
}

擴充功能的說明是放在 manifest.json 中，
所以內容調整如下：

{
  ~略~
  "description": "__MSG_appDesc__", // 對應 messages.json 中定義名稱
  "default_locale": "en",           // 提供多語言，一定要設定預設語言
  ~略~
}

為了區分項目是多語言還是單純字串，所以多語言的項目格式為：
__MSG_[NAME]__
[NAME] 是對應多語言項目的名稱。

下圖是顯示的效果：
瀏覽器語系是英文時效果：

 

瀏覽器語系是正體中文時效果：

如果是要由 js 取得多語言，則是呼叫 api：chrome.i18n.getMessage([NAME])
--> chrome.i18n.getMessage(“appDesc”)


很簡單吧!
這次分享就到此，下次見~~ (揮手下降)