c00*_*0fd 9 html javascript google-chrome internationalization google-chrome-extension
我发现了一个非常简单的方法实现的翻译我的谷歌Chrome扩展的(或定位),但似乎只适用于.json,css和js文件.
但是如何html在弹出窗口或选项窗口中本地化我的内容？
ahm*_*md0 23
你要做的就是这个.
首先,在HTML中使用与Chrome在其他任何位置所需的语法相同的语法.所以你的基本popup.html将是:
<!DOCTYPE html>
<html>
<head>
<title>__MSG_app_title__</title>
</head>
<body>
<a href="http://example.com/" title="__MSG_prompt001__">__MSG_link001__</a>
<!-- Need to call our JS to do the localization -->
<script src="popup.js"></script>
</body>
</html>
然后提供通常的翻译_locales\en\messages.json:
{
"app_title": {
"message": "MyApp",
"description": "Name of the extension"
},
"link001": {
"message": "My link",
"description": "Link name for the page"
},
"prompt001": {
"message": "Click this link",
"description": "User prompt for the link"
}
}
最后,您popup.js将执行实际的本地化:
function localizeHtmlPage()
{
//Localize by replacing __MSG_***__ meta tags
var objects = document.getElementsByTagName('html');
for (var j = 0; j < objects.length; j++)
{
var obj = objects[j];
var valStrH = obj.innerHTML.toString();
var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
{
return v1 ? chrome.i18n.getMessage(v1) : "";
});
if(valNewH != valStrH)
{
obj.innerHTML = valNewH;
}
}
}
localizeHtmlPage();
pyk*_*iss 10
简单明了：
{
"exmaple_key": {
"message": "example_translation"
}
}
{
"exmaple_key": {
"message": "example_translation"
}
}
document.querySelectorAll('[data-locale]').forEach(elem => {
elem.innerText = chrome.i18n.getMessage(elem.dataset.locale)
})
建立自ahmd0的答案.使用数据属性允许硬编码回退.
<!DOCTYPE html>
<html>
<head>
<title data-localize="__MSG_app_title__">My Default Title</title>
</head>
<body>
<a href="http://example.com/" title="__MSG_prompt001__" data-localize="__MSG_link001__">Default link text</a>
<script src="localize.js"></script>
</body>
</html>
然后提供通常的翻译_locales\en\messages.json:
{
"app_title": {
"message": "MyApp",
"description": "Name of the extension"
},
"link001": {
"message": "My link",
"description": "Link name for the page"
},
"prompt001": {
"message": "Click this link",
"description": "User prompt for the link"
}
}
最后,您localize.js将执行实际的本地化:
function replace_i18n(obj, tag) {
var msg = tag.replace(/__MSG_(\w+)__/g, function(match, v1) {
return v1 ? chrome.i18n.getMessage(v1) : '';
});
if(msg != tag) obj.innerHTML = msg;
}
function localizeHtmlPage() {
// Localize using __MSG_***__ data tags
var data = document.querySelectorAll('[data-localize]');
for (var i in data) if (data.hasOwnProperty(i)) {
var obj = data[i];
var tag = obj.getAttribute('data-localize').toString();
replace_i18n(obj, tag);
}
// Localize everything else by replacing all __MSG_***__ tags
var page = document.getElementsByTagName('html');
for (var j = 0; j < page.length; j++) {
var obj = page[j];
var tag = obj.innerHTML.toString();
replace_i18n(obj, tag);
}
}
localizeHtmlPage();
硬编码的回退可以避免在JavaScript执行替换时i18n标记可见.硬编码似乎否定了国际化的想法,但在Chrome支持i18n直接在HTML中使用之前,我们需要使用JavaScript.
正如RobW在评论中指出的那样，创建了使用相同机制在HTML中添加i18n支持的功能请求，但此后由于性能和安全问题而被拒绝。因此，您不能使用相同的方法。
该问题提到了一种可能的解决方法：在每种语言中使用单独的HTML页面并在清单中进行切换：
"browser_action": {
"default_popup": "__MSG_browser_action_page__"
}
但这是不合适的方法，唯一的方法是通过JavaScript动态翻译页面。您提到了一种最简单的方法，即仅标记要转换为id的元素并在页面加载时替换它们。
您还可以与Chrome的方法同时使用更复杂的工具，例如webL10n。请注意，您可能仍应该最少实施Chrome的方法，以便Web Store知道该产品支持多种语言。
| 归档时间： |
|
| 查看次数： |
4909 次 |
| 最近记录： |