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:
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.
In order to add textual messages for different languages, create messages.json in each language folder and add content like this:
"message": "Weight Tracker",
"description": "Weight Tracking made easy"
"message": "Weight Tracking made easy",
"description":"The description of the application, displayed in the web store."
"message": "Hello !",
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.
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.
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.
- Chrome Extension Development: Getting Started
- Chrome Extension Development: Internationalization
- Chrome Extension: Manifest File Format
- Google Translate