Monthly Archives: December 2010

How to create multilingual Opera Extension

Opera supports multilingual extensions and creating such one is quite easy. Let’s start with config.xml file

<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets" id="extensions:to-read-sites" version="2.1-3">
	<name>To-Read sites</name>
	<description xml:lang="en">Temporary list of sites you want to 	visit later.</description>
	<description xml:lang="pl">Poręczna lista stron, które chcesz odwiedzić później.</description>
	<description xml:lang="ru">Список сайтов, которые вы хотите посетить позже.</description>
	<icon src="icon.png"/>
	<icon src="icon_16.png" width="16" height="16"/>
	<author href="http://www.greenpath.pl">Michał Borek</author>
	<access origin="*" subdomains="true"/>
</widget>

To translate config.xml values you need to add xml:lang attribute into particular nodes. You can apply this attribute into nodes as follows:

  • name
  • description
  • license

You can also define text flow direction by defining dir attribute, the same way as the one above:

  • ltr – left to right
  • rtl – right to left
  • lro – left to right override
  • rlo – right to left override

Another thing we must deal with is translating extension itself. Fortunately Opera provides locales folder for all files connected to translations.

Extension folder structure of extension.

All files that need to be translated should be put in specific subfolder in locales folder (pl for Polish, ru for Russian and en for English in our case). When you create a file in one of locales’ subfolder it will be automatically for specific language. Example:

<link rel="stylesheet" href="styles/style-translation.css"/>

Opera will try to find such file in one of locales’ folder and if there is no such file, the default one will be loaded (from root folder). For English it would be:  locales/en/styles/style-translation.css. To translate buttons’ labels you can use CSS content attribute as follows:

#addButton {
	content: "Add current";
}

To change another values (like anchor titles, error messages and so on) you can create translations files. I used popup.js to achieve this goal:

var tr = {
	addButtonLabel: "Add current page to list",
	deleteButtonLabel: "Delete site from the list",
	lockButtonLabel: "Lock site"
};

All you need is to use tr.* values instead of literal strings in your extension. I hope this article will simplify your Opera Extension development process. If you have any suggestions or questions, feel free to post a comment.

To-Read sites – minor update

I’ve just updated To-Read sites Opera extension removing an annoying bug (site is not being deleted from list) and making visual improvements:

  • I changed badge color, because it was annoying for some of you.
  • Sites list haven’t been centered (it looked odd) – it looks fine now.

To-Read sites 2.1-2

New version will be available on http://addons.opera.com shortly.

Many of this extension users asked me about syncing – it’s in plans. But I really have no time to do it now, but I hope I will finish that soon, please be patient :-).