Tag Archives: OMeasure!

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.

OMeasure! 2.0 – available soon

I’ve just uploaded new version of OMeasure! plugin.

New version brings possibility to resize measuring area and few visual improvements.

I’ve changed HTML5 Canvas drawing used in v.1.0 to DOM based one and it’s easier to make detailed result.

OMeasure! 2.0 in action

New version should be available shortly via Opera Addons page.

OMeasure! – my new Opera Extension

Starting from this post I’m switching to English.

Yesterday Opera published my second extension – OMeasure!

OMeasure! is a simple tool for web developers which simplifies measuring of elements of web sites.

You can download OMeasure! here:

https://addons.labs.opera.com/addons/extensions/details/omeasure/1.0-2/

Known bugs:

Doesn’t work on https sites.