Firefox用WebExtensionsアドオンを国際化する：CopyTabTitleUrl

「Firefox用WebExtensionsアドオンを作成する：CopyTabTitleUrl」の続きで、Firefoxのアドオンを国際化(多言語対応)します。

なぜ、国際化する？

多くの人に使ってもらうため
国や言語が異なっていても拡張機能として使用したい機能に差はあまりないため
簡単に出来るならば、やっておいて損はなさそうだから

messages.json

i18n.getMessage() - Mozilla | MDN

上記を参考にして、_locales/en/messages.jsonを準備する。英語(en)だけではなく、日本語(ja)や他言語も準備する。manifest.jsonにdefault_localeを指定する。

筆者は、翻訳はGoogle翻訳に丸投げしました。英語以外も準備しておいたほうがいいとは思うけど、残りやってないです。（最終的には、英語を含めて10言語を元ファイルから全自動でGoogle翻訳で翻訳するスクリプトを組んで対応しました。自動化様様です）

{
  "extensionDescription": {
    "message": "Add a tab compare menu and copy the title and URL to the clipboard.",
    "description": "拡張機能の説明"
  },
  "contextMenu_CopyTabTitleUrl": {
    "message": "Copy tab title and URL",
    "description": "コンテキストメニューの説明"
  },
  "contextMenu_CopyTabTitle": {
    "message": "Copy tab title",
    "description": "コンテキストメニューの説明"
  },
..
}

manifest.json

manifest.json内の国際化する文字列を以下の記述に置き換える。

__MSG_{messageContent}__

{
  "manifest_version": 2,
  "name": "CopyTabTitleUrl",
  "description": "__MSG_extensionDescription__",
..
  "default_locale": "en",
..
}

ソース

国際化する文字列を以下の記述で取得する。

chrome.i18n.getMessage("messageContent")

..
        chrome.contextMenus.create({
          id: "contextMenu_CopyTabTitleUrl",
          title: chrome.i18n.getMessage("contextMenu_CopyTabTitleUrl"),
          contexts: contexts,
          "onclick": function(info, tab) {
            copyToClipboard(tab.title+'\n'+tab.url);
          }
        });
..

`options`などのhtmlファイルの国際化

htmlファイル内にmessageContentの記載のみを行い、文字列の国際化はJavaScriptで行う。（他にも方法はあると思うので一例として記載します）

htmlのタグにdata-label属性を指定して属性を保持するタグをJavaScriptで国際化してタグ内の文字列を挿入する。

<!DOCTYPE html>
<html>
..
<body>
    <fieldset class="browser-style">
        <legend data-label="optionsPage_Menu"></legend>
        <p><input id="menu_all" type="checkbox" /><label for="menu_all" data-label="optionsPage_ContextMenuCheckbox"></label></p>
        <p><input id="menu_tab" type="checkbox" /><label for="menu_tab" data-label="optionsPage_TabContextMenuCheckbox"></label></p>
..
    <script src="/js/options.js"></script>
</body>
</html>

..
  // 多言語化
  var labels = document.querySelectorAll('*[data-label]');
  for (var i=0; i<labels.length; i++) {
    labels[i].textContent = chrome.i18n.getMessage(labels[i].dataset.label);
  }
..

補足

デバッグ環境用のFirefoxの言語変更は、以下をページを参考にしてください。

言語パックで Firefox のインターフェイスを他の言語にする | Firefox ヘルプ

記事読んでもよくわからない場合、xpiファイルを直接覗いたほうがいいと思います。
下記のアドオンを使用すると簡易にアドオンを閲覧できるのでおすすめです。

Extension source viewer – Firefox 向けアドオン

記事作成時に作成したアドオンは、「CopyTabTitleUrl 」の0.0.4です。

バグ取りの日々