支持 HTML 页面中的本地化（弹出/内容/选项）

Question

有没有一种简单的方法来制作弹出/内容/选项页面multilingual？

文档给我的印象是，唯一的办法就是使用JS将本地化的字符串添加到html中。 这会使事情变得非常麻烦和复杂（每个节点都需要一个 ID 或类等）
我试过在 HTML 中使用${tag}，但它只是显示标签本身（似乎只有 css 支持标签）。
所以现在我写了这个小sn-p，它检查页面的每个元素并将所有${tag}替换为来自chrome.i18n.getMessage(tag的字符串):

!function()
{
  let i18nRegExp = /\$\{([^}]+)\}/g,
      cache = {},
      i18n = function(a,b)
      {
        return cache[b] || (cache[b] = chrome.i18n.getMessage(b) || a);
      };

  !function loop(node)
  {
    if (node.attributes)
      for(let i = 0; i < node.attributes.length; i++)
        node.attributes[i].value = node.attributes[i].value.replace(i18nRegExp, i18n);

    if (!node.childNodes.length)
      node.textContent = node.textContent.replace(i18nRegExp, i18n);
    else
      for(let i = 0; i < node.childNodes.length; i++)
        loop(node.childNodes[i]);
  }(document.body.parentNode);
}();

有更好的方法吗？

Answer 1

treestyletab 扩展的开发者创建了一个简单的库，用于本地化 HTML，名为 webextensions-lib-l10n。

Answer 2

我创建了一个简单的HTML-Internationalization（只有 4 行），多年来我一直在我的所有附加组件（以及其他一些附加组件）中使用它。

它使用 DOM 方法，比普通 RegEx（涉及 DOM 到文本并返回到 DOM 转换）或 xpath（涉及搜索文本节点然后使用 RegEx 替换）更快且使用更少的资源。

根据评论更新

请注意，HTML 本地化主要用于静态值。动态值由脚本设置。
title 也不是 <input> 元素的有效属性。
虽然这不是一个普通的案例，但这里是我会做的一个例子，尽管如此......

// Example given
// <input title="english" pattern="a-z" placeholder="yay" value="yes"> 

// HTML
<input data-i18n="lang|title" pattern="a-z" placeholder="yay" value="yes"> 

// in script
document.querySelectorAll('input').forEach(item => {
  item.placeholder = chrome.i18n.getMessage(item.placeholder);
  item.value = chrome.i18n.getMessage(item.value);
}):