Question

official documentation建议检索国际化字符串，如下所示：

document.querySelector("#appname").innerHTML = chrome.i18n.getMessage("appname");

但是，内置页面的源代码（例如新标签页和标签内设置页面（示例here））使用不同的方法，不需要设置其他JavaScript命令：

<title i18n-content="appname"></title>

我试图在我自己的网络应用程序和扩展程序中使用它，但我似乎无法让它工作。

有人可以对此有所了解吗？是否可以在Web应用程序和扩展中使用它？

更新：我已将Mohamd Mansour的回复标记为已被接受，因为从技术上讲它是正确的。如果有人在寻找基于JavaScript的解决方案，我在下面发布了自己的答案。

Answer 1

你正在看两个完全不同的东西。我将简要解释一下。

对于第一个链接，它指的是Google Chrome扩展程序API。如果您制作Chrome扩展程序，则可以使用其内部化支持API来执行此操作。这仅适用于Google Chrome中的扩展功能。

对于第二个链接，它指的是Google Chrome浏览器中的DOMUI。这是专为谷歌Chrome设计的！当我们为Google Chrome创建选项页面（chrome：// options /）时，我们需要支持多种国际化，而在Google Chrome中，所有这些都是在C ++中完成的。由于DOMUI页面与Chrome浏览器UI和Core交互，我们从DOMUI（选项页面）和C ++（浏览器）发回消息。此实施专门针对Google Chrome内部。

<强>综述

您不能在普通的Web应用程序中使用上面提到的任何一种方法。它们不是为此而制造的。有很多库（如果你是谷歌搜索）有JavaScript内部化支持。想到的是Closure Library。
对于扩展程序，请使用上面提到的Chrome扩展程序文档。
对于要实现具有内部化支持的DOMUI的C ++应用程序，可以随意从Chromium复制一些代码并在自己的项目中使用它。

我希望能把事情搞清楚。

Answer 2

从技术上讲，Mohamed Mansour的回答是正确的，所以我已将其标记为已被接受。如果有人感兴趣，我通过将以下代码块嵌入到页面或作为单独的JavaScript文件引用它来找到一个功能性解决方案：

var i18n = function() {
  function i(b) {
    b = b.querySelectorAll(l);
    for (var d, f = 0; d = b[f]; f++)
      for (var e = 0; e < h.length; e++) {
        var c = h[e],
          a = d.getAttribute(c);
        a != null && j[c](d, a)
      }
  }
  var j = {
      "i18n-content": function(b, d) {
        b.textContent = chrome.i18n.getMessage(d)
      },
      "i18n-values": function(b, d) {
        for (var f = d.replace(/\s/g, "").split(/;/), e = 0; e < f.length; e++) {
          var c = f[e].match(/^([^:]+):(.+)$/);
          if (c) {
            var a = c[1];
            c = chrome.i18n.getMessage(c[2]);
            if (a.charAt(0) == ".") {
              a = a.slice(1).split(".");
              for (var g = b; g && a.length > 1;) g = g[a.shift()];
              if (g) {
                g[a] = c;
                a == "innerHTML" && i(b)
              }
            } else b.setAttribute(a, c)
          }
        }
      }
    },
    h = [],
    k;
  for (k in j) h.push(k);
  var l = "[" + h.join("],[") + "]";
  return {
    process: i
  }
}();

一旦文档加载了i18n.process(document);，就可以调用上面的内容。

它会将正确的本地化字符串应用于具有适当i18n-content属性的任何元素的InnerHTML。（例如：i18n-content="name"。）

Answer 3

如果你有方便的jQuery：

    // localize all labels
function localize() {
    'use strict';
    $('[i18n-content]').each(function(index, element){
        element.innerHTML = chrome.i18n.getMessage($(this).attr('i18n-content'));
    });
}

然后在ContentLoaded上进行本地化

document.addEventListener('DOMContentLoaded', localize);

Answer 4

在为i18n准备Chrome应用程序/扩展程序HTML页面时，似乎没有人解决实际的手动工作。

由于我无法谷歌任何有趣的东西，我写了这个小的Chrome Devtools片段：

我这里没有包含源代码，因为它只有one click。

这是预告片：

https://github.com/anaran/devtools-snippets#html_i18n_contentjs

我已将其成功用于我自己的Autosave Text Chrome扩展程序。

在Google Chrome中使用“i18n-content”进行国际化

4 个答案: