Chrome插件的国际化技巧

标签: chrome 插件 国际化 | 发表时间:2011-10-21 06:51 | 作者:keakon iBeyond
出处:http://www.keakon.net/
今天在查看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}}"/>

相关 [chrome 插件 国际化] 推荐:

Chrome插件的国际化技巧

- iBeyond - keakon的涂鸦馆
今天在查看Proxy SwitchySharp的源码时,看到了一个国际化的技巧. 觉得很不错,于是给Sync My Tabs插件增加了国际化支持,并在此分享. 其实之前我在做Chrome插件时都有个疑点,翻译JavaScript里的文字用Chrome的i18n API很容易,但是要翻译HTML就麻烦了,毕竟动态生成HTML没有静态的方便.

Chrome优秀插件推荐 — SEO必备

- yun - 就SEO
和Chrome已经是老朋友了,一直很喜欢他简洁的风格. 虽然现在插件越来越多,Chrome依然快速简洁,并且功能却愈加强大. 下面给大家介绍我做SEO时最常用的几个插件. 可以看网站PR, Alexa, WOT, IP地址以及所在的地理位置,简单但十分好用. 可以查看外链情况,页面的Meta,书签收录,域名信息,nofollow等等,很全很强大的插件.

10个提高效率的Chrome插件

- 建江 - ITeye资讯频道
  导读:Chrome浏览器是一直都热闹异常的浏览器大家庭中新成员. 虽然Google Chrome浏览器相比之下还很年轻,但优异的性能、简洁的界面以及较高的可用性使其一鸣惊人.   Chrome浏览器的另一个实用的地方是,用户可以添加插件来处理日常的网络任务. 其中许多Chrome插件可以提高用户的工作效率,并能使用户工作更轻松快捷.

SocialBa! – 社交网络同步插件[Chrome]

- - 小众软件
如今登陆社交网站、发点心情、吐点槽,已经成为很多人每天必做的事情,好比吃饭,一天不吃饿得慌. 是一款 Chrome 插件,可以帮助以上人群同步几乎所有主流社交网站的心情和吐槽,包括新浪微博、腾讯微博、人人网、Google+、Facebook、Twitter、VKontakte、开心网、QQ空间、Linkedin、Plurk.

五款让你更有效率的Google Chrome插件

- Jacqueline - 褪墨
如果你很喜欢使用Google Chrome浏览器,下面弥缝列出了五个可以让你的工作更有效率插件,希望有款能够适合你. 如果你是褪墨老读者,应该知道以前推荐过的Remember the Milk这款在线时间管理工具. ChromeMilk正是一款可以让你通过Google Chrome迅速查看,添加和管理Remember the Milk上任务的插件.

为豆瓣爱好者开发的 Chrome 插件:豆瓣一点

- bridge - 谷奥——探寻谷歌的奥秘
豆瓣一点这枚Chrome扩展适用于将豆瓣的电影和书籍评价作为是否入手重要依据的朋友,作者说他自己在VeryCD上看到新的电影和美剧都要到豆瓣上看看再决定下载. 作者开发这个扩展也是为了方便自己上网时随时查询,故取名“豆瓣一点”,寓意“点一下就可以豆瓣一下了”. 豆瓣搜索:在网页中选中一段文字,在豆瓣中搜索.

为什么 Chrome 会同时运行多个 Flash 插件?

- lht - 谷奥——探寻谷歌的奥秘
Chrome已经集成了Flash插件,这样Chrome可以自动更新此插件以保证漏洞被及时修复. 而IE,Firefox,Opera等浏览器会使用系统的Flash插件,这样会更容易受到攻击. 如果你查看插件列表( chrome://plugins/ )会注意到同时运行了多个Flash插件. 开发者可以点击 启用/停用 针对不同的Flash版本进行调试,而同时运行多个Flash插件在也是允许的(Google官方解释原文),Chrome默认会优先使用内置的插件(而不是系统的Flash).

一个支持chrome、firefox的全屏插件

- - 博客园_首页
话不多说,直接上demo,你可以点击下面的图片看效果. alert('就你这浏览器,基本就告别全屏功能了');. 基于fullscreen功能,我们就可以做出很多效果,比如相册:. 当然也不能不说我的 HoorayOS中窗口全屏的使用:. 插件来源地址: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/.

Chrome插件开发简单实战教程

- - Chrome迷
Chrome凭借其简单,稳定,快速的优点迅速风靡全球,占领浏览器市场,直逼IE的市场份额,超越也只是时间问题. 初次打开Chrome浏览器,你会发现整个页面只有一个地址栏,一对箭头,刷新按钮和一把扳手,当然还有最重要的空白页面,这就是Chrome的整体构造,可以说是最简单的浏览器了,但是仔细深入你会Chrome的功能远不止这些,通过Chrome的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能,这时你就会发现Chrome的强大之处.

20款谷歌Chrome浏览器最佳插件

- - HTML5研究小组
据国外媒体报道,谷歌Chrome已经成为目前全球最流行的浏览器之一,最新版本Chrome 17具有良好的安全性能、书签和偏好同步功能,并继续强力支持HTML5. 自2009年底谷歌Chrome支持扩展插件无限定制之后,Chrome进入了更新的阶段,Chrome浏览器插件的数量在 短短的前14个月内从300个上升到11500个.