javascript - 关于 Chromium 扩展的 i18n 实现的澄清

Question

几个月来，我一直在尝试寻找在 Chromium 扩展中实现本地化的方法。其中大部分最终破坏了选项所在的 HTML 部分。最近，我可能发现了一种可以在不破坏 HTML 和 JS 上任何内容的情况下工作的方法，但我想澄清一下这种方法是否良好。

这是 i18n.js 文件中代码的一部分。

document.getElementById("button_save").innerHTML = chrome.i18n.getMessage("button_save");

当我更改浏览器语言时，语言也会发生变化。

这种设置 i18n 的方法会有任何问题吗？谢谢。

Answer 1

您的方法是正确的，但请允许我向您建议一种比使用 getElementById 或类似函数手动选择每个元素更可靠和可维护的方法(特别是在您的页面发生更改时)。

您可以向需要本地化的元素添加 data-locale-msg 属性，如下所示:

<input type="button" data-locale-msg="button_save"/>

<div data-locale-msg="something">
    <!-- ... -->
</div>

然后，在您的 i18n.js 脚本中，您需要做的就是:

// Get all the elements with data-locale-msg="..."
let els = document.querySelectorAll('[data-locale-msg]');

// Fill the elements with the right localized messages:
els.forEach(el => el.innerHTML = chrome.i18n.getMessage(el.dataset.localeMsg));

就这么简单，无需手动选择元素!