Javascript 关于Chromium Extensions的i18n实现的澄清

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

这是

i18n.js

文件中代码的一部分

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

当我更改浏览器语言时，语言也会更改

---

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

您的方法是正确的，但请允许我向您推荐一种比使用

getElementById

或类似功能手动选择每个元素更可靠、更易于维护的方法（特别是当您的页面发生更改时）

您可以向需要本地化的元素添加

数据区域设置msg

属性，如下所示：

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

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

---

如此简单，无需手动选择元素

不会有问题的。谢谢你的建议！我已经在扩展中实现了这一点，它工作得非常好。JavaScript端的代码更少。顺便问一下，你能解释一下

el.dataset.localMsg

是如何工作的吗？@captain_watanabe属性以

data-

开头，非常特殊，可以通过JavaScript使用元素的

.dataset

属性轻松访问。因此，如果您有类似于

datafoobarbaz=“123”

的东西，您可以使用

el.dataset.fooBarBaz

从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));