排序语言的下拉列表为本地化Chrome扩展

Sorting a dropdown list of languages for localised Chrome extension

本文关键字：本地化 Chrome 扩展 下拉列表 语言 排序      更新时间：2023-09-26

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

_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>

和我有javascript在options.js更改名称。

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>选项是为英语排序的，语言选项在翻译后是无序的。我认为它可以通过从存储在_locales/es/messages.json文件中的排序列表以编程方式生成<select>选项来解决，但不知道这是否是最好的方法。有解决这个问题的标准方法吗?

我知道这不是很漂亮，但它似乎工作。将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);  
});
相关文章：