Having written both an IE extension and a Chrome extension, I must say that writing the Chrome extension was a far, far better experience. Let’s just say that I really don’t want to ever write an IE extension again.
For the IE extension, you have conflicting forum posts and MSDN articles from years ago that only partially apply to the current version of IE, and there isn’t any real documentation or developer’s guide to speak of. You can write the IE extension in C#, but there is no guidance on how to do so, and the prevailing advice is to write the extension in C++.
Now that I’ve finished my rant, let’s leave IE behind and focus on Chrome.
Today, we’ll be looking at adding internationalization (i18n) support to a Chrome Extension. We’ll also look at a pattern that uses the
data-* attribute in HTML5 to provide clean markup that gets internationalized.
But before we show how this is done, let’s first look at the i18n support for Chrome Extensions.
Why is internationalization abbreviated as i18n? Because it’s a really big word, and there are 18 letters between the ‘i’ at the beginning of the word and the ‘n’ at the end of the word, and it’s easier to type i18n. Similarly, localization can be abbreviated as L10n - note the capital L to disambiguate it from i18n.
I18n in Chrome involves 2 steps: defining and translating strings of text, and inserting something into your extension that will render the text for the user’s current language. The text is defined in a series of json files, one per language. Let’s suppose we want to create a Save button in our extension with the ‘Save’ text internationalized. The english json file would contain this:
And the Spanish json file:
var translatedText = chrome.i18n.getMessage("saveButtonText");
In this example,
translatedText will have a value of
"Archivar", depending on the locale settings of the browser.
First, we’ll add a
data-resource attribute to the HTML elements that we want to internationalize. Let’s see what this looks like on the markup for our Save button.
<button id="save" data-resource="saveButtonText">Save</button>
data-resource attribute. This is an attribute I made up, and, as far as I know, has no particular semantic meaning other than what we assign to it.
And the resulting button for a browser set to Spanish: