对本地化Chrome扩展程序的语言下拉列表进行排序

时间:2014-03-22 16:49:11

标签: javascript google-chrome-extension localization

在我的扩展程序中,我有一个用户可以选择的语言列表(这些是翻译工具的目标语言)。在尝试向此扩展添加本地化时,我在消息文件中创建了条目(这个用于西班牙语):

_locales/es/messages.json

"extLang_af": {
    "message": "Africaans",
    "description": "Localised name for Afrikaans"
    },
"extLang_sq": {
    "message": "Alban\u00E9s",
    "description": "Localised name for Albanian"
    },
"extLang_ar": {
    "message": "\u00C1rabe",
    "description": "Localised name for Arabic"
    },
    ...

options.html文件中,我有以下内容:

<select id="target">
 <option id="af">Afrikaans</option>
 <option id="sq">Albanian</option>
 <option id="ar">Arabic</option>
 ...
</select>
<script src="options.js"></script>

我在options.js中使用javascript来更改名称。

var langs = ['af', 'sq', 'ar', ...]
langs.forEach(function(lang) {
    var msg_name = "extLang_" + lang;
    var localised_lang = chrome.i18n.getMessage(msg_name);
    document.getElementById(lang).text=localised_lang;
});

我的问题是因为原始的<select>选项是按英语排序的,所以语言选项在翻译后会出现故障。我认为可以通过以编程方式从存储在<select>文件中的排序列表生成_locales/es/messages.json选项来解决,但不知道这是否是最佳方法。是否有解决此问题的标准方法?

1 个答案:

答案 0 :(得分:0)

我确定这不是很漂亮,但似乎有效。将options.js中的javascript替换为:

var langs = ['af', 'sq', 'ar', ...]
var langsToSort = [];
langs.forEach(function(lang) {
    var msg_name = "extLang_" + lang;
    var localisedLang = chrome.i18n.getMessage(msg_name);
    langsToSort.push([localisedLang, lang]);
});
var sortedLangs = langsToSort.sort(function(a,b) {
    return a[0].localeCompare(b[0]);
});
// Get rid of current contents of the select dropdown
document.getElementById("target").innerHTML = "";
// Set the dropdown elements
sortedLangs.forEach(function(lang) {
    var x = document.getElementById("target");
    var optn = document.createElement("OPTION");
    optn.text = lang[0];  
    optn.value = lang[1];  
    x.add(optn);  
});