Firefox用WebExtensions拡張機能を国際化する

2018/04/102020/10/06

下記の記事で作成したFirefox拡張機能を国際化(翻訳)します。

Firefox用WebExtensions拡張機能を作成する

なぜ、国際化する？

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

※筆者の拡張機能のユーザは、日本語が約30%で残りは日本語以外からの使用です。

messages.json

i18n.getMessage() - Mozilla | MDN

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

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

_locales/en/messages.json{
  "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.json{
  "manifest_version": 2,
  "name": "CopyTabTitleUrl",
  "description": "__MSG_extensionDescription__",
..
  "default_locale": "en",
..
}

ソース

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

chrome.i18n.getMessage("messageContent")

common.js..
        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で国際化してタグ内の文字列を挿入する。

options/options.html<!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>

js/options.js..
  // 多言語化
  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 のv0.0.4です。

バグ取りの日々