Chrome插件的国际化技巧

今天在查看Proxy SwitchySharp的源码时，看到了一个国际化的技巧。
觉得很不错，于是给Sync My Tabs插件增加了国际化支持，并在此分享。

其实之前我在做Chrome插件时都有个疑点，翻译JavaScript里的文字用Chrome的i18n 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来说，自定义属性需要修改DTD；而对于HTML 5来说，只要属性名以data开头即可。

然后在_locales/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-i18n-content]')是指获取所有带data-i18n-content属性的DOM元素，而this.getAttribute('data-i18n-content')则是获取它的data-i18n-content属性（也可以用$(this).data('i18nContent')）。对于#tabs元素来说，这个值就是"save_tabs"。
接着用chrome.i18n.getMessage('save_tabs')就能从messages.json获取到"Save Tabs"这个翻译，然后替换自身的文本或属性即可。

在这个例子中，中文已经在HTML源码里写上了，我不想再在_locales/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.i18n.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}}"/>