'.get_bloginfo('name').'

Andrew Hall

0 comments

Easy Website Translations using Javascipt

Recently, I have been working on an Extension for Google Chrome.

After getting it (mostly) working, it came to the issue of how I could handle internationalising the pages so they would be available for users across the world.
I didn’t want to have to create a separate extension for each language, so after a quick Google search, I came up with the following link:

http://code.google.com/chrome/extensions/i18n.html

In manifest.json and CSS files, refer to a string named messagename like this:

__MSG_messagename__

In your extension’s JavaScript code, refer to a string named messagename like this:

chrome.i18n.getMessage("messagename")

At first, I thought that this would be easy with the methods listed; I could just use the _MSG_MSGNAME_ style in my HTML pages as placeholder text and Chrome would do all the heavy lifting.
Unfortunately, this syntax only works in the manifest and CSS files. If you want to support translations in raw HTML files or your main extension file, you have to use the getMessage() function and set the innerHTML of each element by hand!

This didn’t seem very elegant.

So I developed a solution that would work for all web pages, not just Chrome extensions – It turned out that I wrote a jQuery Plugin.
You simply add an attribute to each element of i18n-content with a key for your translations and this will be replaced by the string for the relevant language

Example HTML:

 

What the plugin then does is looks in your translation file for the key of CLIENT_NAME and then returns the relevant translated string for the locale of the browser you are using!

Example translation file (spanish):

{
    "CLIENT_NAME": {
        "message": "Nombre de cliente"
    },
    ...
}

This means that the <b> tags innerHTML will be set to “Nobre de cliente”.

You can just have a different messages.json file (Google Chrome’s own method as listed in the link above), for each language and the code will switch for your users automatically.

The plugin also supports prefixing the translated string because it only appends to the innerHTML of the element.

For more details and to download, see Internationalisation Plugin page on github

Leave a comment or tweet me