How to use Internationalization in Chrome Extension/App


Developing Chrome Extension or App is extremely easy and what can be developed depends on your imagination and creativity. However, once you have a wonderful application you would like to make it available to wider audience and you can do it by providing locale specific interface.

Google chrome provides very nice interface for achieving this and I will try to explain in brief.

In order to have your app/extension name available in user’s locale setting, add following in your manifest.json file:

"name": "__MSG_appName__",
"description": "__MSG_appDesc__",
"default_locale": "en"

Once this is done, create a folder named “_locales” in your project folder and create folder for each language you want to support inside _locales folder.

manifest.json

manifest.json

In order to add textual messages for different languages, create messages.json in each language folder and add content like this:

"appName": {
"message": "Weight Tracker",
"description": "Weight Tracking made easy"
},
"appDesc": {
"message": "Weight Tracking made easy",
"description":"The description of the application, displayed in the web store."
},
"greeting": {
"message": "Hello !",
"description":"hello message"
}

You can add more messages, comma separated as shown above, as per your application requirement.

As you can see, the key ‘appName’ has value specified as ‘message’ in messages.json, and it will get replaced in your manifest.json file on runtime.

In order to test if values are properly displayed and formatted correctly in your application, you will have to change the locale setting of your computer. On mac system, you can go to Preferences -> Language & Region -> Preferred Languages section you can select existing language or add a new language as per your need. Similar settings can be found on windows machine as well.

Language & Region Preferences

Language & Region Preferences

In order to add a new language you will have to translate english words/labels/messages, and Google Translate can be used for the same.

Note: Be aware that not all words will translate to appropriate ones using google translate. You will have to search elsewhere to get translation service or ask on appropriate forum.

Now in your extension or app’s JavaScript code, refer to a string named appName like this:

var msg_appname = chrome.i18n.getMessage("appName"),
msg_greeting = chrome.i18n.getMessage("greeting");

// use appname and greeting variables anywhere in code, for example to set text on html element like this:
document.getElementById("app").innerHTML = msg_appname; // where "app" is the id of html element
document.getElementById("greeting").innerHTML = msg_greeting;

 

That’s it for this post, do checkout following links for detailed explanations and specific details.

Links:

Advertisements
About

An all round Software Engineer with 8 years of software development experience looking to work on exciting projects with exciting clients. Full of energy, experience, hard work and enthusiasm, I need a new challenge and want to work in the heart of the web software industry.

Tagged with: , ,
Posted in Chrome

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Visit My Website
Posts
Categories

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 136 other followers

%d bloggers like this: