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.

  1. Nice visual explanation of multilingual Opera extension. I hope you’ll be writing more tidbit articles on developing extensions! 😀 Thank you,

  2. Can you add snapping to controls (divs, inputs etc etc etc) to get the measurement easily and accurately?
    Karmatics aardvark plugin shows the border around as if it is snapping, if you could add snapping as an option it will become a lot easier

  3. Could you tell me what program do you use for developing Opera’s extensions? Is is Aptana on your screenshots?

  4. Michał Borek

    I use Eclipse for JavaScript. Additionally you can also use http://marketplace.eclipse.org/content/opera-widgets-plug-eclipse . It is an plugin for Widgets development, but the extension is a widget, so you can develop it that way and just change the package extension from .wgt to .oex

  5. Thank you for your answer!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>