下記の記事で作成したFirefox拡張機能を国際化(翻訳)します。
Firefox用WebExtensions拡張機能を作成する下記の記事で作成したuserChrome.js用ユーザスクリプトを拡張機能で作成します。 Firefox userChrome.js用ユーザスクリプトを作成する Firefoxを使いやすくする。タブのタイトルとURLをコピーしたかったけど出来なかったので自作してみた。...
https://www.bugbugnow.net/2018/02/firefoxwebextensionscopytabtitleurl.html
なぜ、国際化する?
- 多くの人に使ってもらうため
- 国や言語が異なっていても拡張機能として使用したい機能に差はあまりないため
- 簡単に出来るならば、やっておいて損はなさそうだから
※筆者の拡張機能のユーザは、日本語が約30%で残りは日本語以外からの使用です。
messages.json
上記を参考にして、_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の言語変更は、以下をページを参考にしてください。
記事読んでもよくわからない場合、xpiファイルを直接覗いたほうがいいと思います。
下記のアドオンを使用すると簡易にアドオンを閲覧できるのでおすすめです。
記事作成時に作成したアドオンは、CopyTabTitleUrl のv0.0.4
です。
コメント: 0