Internationalization using "i18n-content" in Google Chrome

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.

If you have jQuery handy:

    // localize all labelsfunction 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);

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".)