Chromeプラグインの国際化技術

今日はProxy Switcharpのソースコードを調べています.国際化の技術を見ました.
いいと思います.Sync My Tabsプラグインに国際化サポートを追加しました.ここでシェアします.
実は前に私はChromeプラグインを作る時に疑問がありました.JavaScriptの中の文字を翻訳するのはChromeのi 18 n APIを使うのは簡単ですが、HTMLを翻訳するのは面倒です.結局動的にHTMLを生成するのは静的な便利さがないです.
今日見たこのテクニックはHTML要素にカスタム属性を追加してからこの属性によって翻訳します.
このコードを例として:

<a href="#tabs">     </a>
<input id="select-all-for-save" type="button" value="  " title="        "/>

ここには3つのテキストがあります.それぞれinnerHTML、value、titleです.3つのカスタム属性でマークします.

<a href="#tabs" data-i18n-content="save_tabs">     </a>
<input id="select-all-for-save" type="button" value="  " title="        " data-i18n-value="select_all" data-i18n-title="select_all_tabs"/>

で注意したいのは、XHTMLにとって、カスタム属性はDMDを変更する必要があることである.HTML 5にとっては、属性名がdataで始まるだけで良い.
そして_locars/en/messages.jsonで英語の翻訳を準備しています.

{
    "save_tabs": {"message": "Save Tabs"},
    "select_all": {"message": "Select All"},
    "select_all_tabs": {"message": "select all tabs"}
}

今翻訳が必要なテキストと翻訳は全部あります.検索と置換ができます.

$('[data-i18n-content]').each(function() {
	var message = chrome.i18n.getMessage(this.getAttribute('data-i18n-content'));
	$(this).html(message);
});
$('[data-i18n-value]').each(function() {
	var message = chrome.i18n.getMessage(this.getAttribute('data-i18n-value'));
	$(this).val(message);
});
$('[data-i18n-title]').each(function() {
	var message = chrome.i18n.getMessage(this.getAttribute('data-i18n-title'));
	$(this).prop('title', message);
});

のうち、‘data-i 18 n-content’は、すべてのdata-i 18 n-content属性を持つDOM要素を取得することを意味し、this.get Attributeは、そのdata-i 18 n-content属性を取得することである.芬tabs元素にとって、この値は「savegautabs」です.
続いてchrome.i 18 n.getMessage('savemutabs')を使ってメッセージ.jsonから「Save Tabs」という翻訳を取得して、自分のテキストや属性を置き換えればいいです.
この例では、中国語はすでにHTMLのソースコードに書いてあります.locars/zh/messages.jsonで翻訳しましたので、{}にします.
翻訳されたスクリプトを再修正して、値が得られない時に無視します.

$('[data-i18n-content]').each(function() {
	var message = chrome.i18n.getMessage(this.getAttribute('data-i18n-content'));
	if (message) {
		$(this).html(message);
	}
});

次に、その実用的なJavaScriptテンプレートはもっと簡単だと思います.
そこでmustache.jsを探しましたが、翻訳辞書を伝えなければなりません.ソースコードを編集して、context[name]をcontext(name)に換えて、翻訳関数を使うことができます.この関数はもちろんchrome.i 18 n.getMessageです.
今のこの長いコードは一行のコードで表してもいいです.

$('body').html(Mustache.to_html($('body').html(), chrome.i18n.getMessage));

ここで注意したいのは、body要素にJavaScriptコードがあってはいけません.さもなければ、繰り返し実行されます.簡単な解決方法は一つのdivで翻訳が必要な部分を包んで、この部分だけを交替します.
HTMLはこのように簡略化される:

<a href="#tabs">{{save_tabs}}</a>
<input id="select-all-for-save" type="button" value="{{select_all}}" title="{{select_all_tabs}}"/>