Internationalization using "i18n-content" in Google Chrome

Question

The official documentation recommends retrieving strings for internationalization like so:

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

However, the source code for the built-in pages such as the new tab page and the in-tab settings page (an example here) use a different method which doesn't require setting up additional JavaScript commands:

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

I've tried to use this in my own web applications and extensions, but I can't seem to get it to work.

Can anybody shed some light on this? Is it possible to use this in web applications and extensions?

UPDATE: I've marked Mohamd Mansour's response as accepted, because technically it is correct. If anyone were looking for JavaScript-based solution, I've posted my own answer below.

Answer 1

You are looking at two completely different stuff. I will briefly explain.

For the first link, it is referring to Google Chrome Extensions API. If your making a Chrome extension, then you can use its internalization support API to do that. That is "only" for Extensions in Google Chrome.

For the second link, it is referring to the DOMUI within Google Chrome the browser. That is specifically made for Google Chrome! When we create Options page for Google Chrome (chrome://options/), we need to support multiple internationalizations, and in Google Chrome, all that is done in C++. Since the DOMUI pages interact with Chrome Browser UI and Core, we send messages back from the DOMUI (options page), and C++ (Browser). This implementation is specifically for Google Chrome internal.

Summarize

1. You cannot use either approach you mentioned above in a normal Web Application. They are not made for that. There are many libraries out there (if you Google search) for JavaScript internalization support. One that comes to mind is the Closure Library.
2. For extensions, use the documentation you mentioned above for Chrome Extensions.
3. For C++ applications that you want to implement a DOMUI with internalization support, feel free to copy some code from Chromium and use it in your own projects.

I hope that cleared things up.

Answer 2

If you have jQuery handy:

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

Then localize on ContentLoaded

document.addEventListener('DOMContentLoaded', localize);

Answer 3

Technically, Mohamed Mansour's response is correct, so I've marked it as accepted. If anyone is interested, I have, however, found a functional solution by embedding the following block of code to the page or referencing to it as a separate JavaScript file:

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
  }
}();

The above can be called once the document has loaded with i18n.process(document);.

It will apply the correct localized string to the InnerHTML of any element with an appropriate i18n-content attribute. (Eg: i18n-content="name".)

Answer 4

Looks like nobody addressed the actual manual work involved when preparing a Chrome App/Extension HTML page for i18n.

Since I haven't been able to google anything interesting, I wrote this little Chrome Devtools Snippet:

I'm not including the source code here, since it is only one click away.

Here's the teaser:

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

I used it successfully for my own Autosave Text Chrome Extension.