Tags

, , , , , , , , ,

The concept of Opera browser extensions is the same as with Firefox. They are small applications that can be installed and added to the browser. I decided to have a try at creating a couple of my own for Opera, and found it surprisingly easy. These are available from my page at SourceForge.net, and hopefully will be found on the Opera Widgets site shortly.

The only requirements for creating an extension are basic web development skills, a text/web editor, and a program for creating .zip archives.
Extensions are based on HTML, JavaScript and CSS. However, there are a few major differences between web pages and Opera extensions. Unlike web pages, they can run just like any desktop application, using Opera as the platform. The Opera API has a number of functions that JavaScript can make use of. An extension can also store user and application data in persistent storage. Having said that, a browser extension built with static HTML pages would be no good, and decent one will consist mostly of JavaScript.
Excellent tutorials and guides for developers are available from the Dev.Opera,/a> site, and there is also an SDK containing examples, code libraries and documentation.

Application Directory and Files
The first step is to create an application directory that contains:
index.html – the basic interface for the application
Images directory – all the images for the application
Scripts directory – Mostly JavaScript files
config.xml

Creating the First Extension
Although index.html can be a basic and static HTML page, most Opera extensions use this as the skeleton for the interface, graphics, JavaScript and other stuff that make up the application.
The first extension I created, called OneClick, has just a set of icons that are clicked to change the content in a window. It consists merely of hyperlinked images that point to an iframe. With a bit of graphics design and editing, I was able to give it the appearance of a more professional application.

My Second Extension – Microformats Creator
The Microformats site has a number of pages containing JavaScript that turns user input into Microformat code. I merged these into a single browser extension that worked in the same way as OneClick, except in this case the extension directory contains modified copies of the Microformats pages, and the iframe loads the relevant one.

Configuration File
In the application directory there must be an XML file called config.xml. This contains data about the extension that is read by the Opera browser and the widgets server, in order to identify the extension, the author, trusted domains and the window size of the application.

Packaging, Installing and Publishing
Before anyone can install the extension, it must be packaged as a single .wgt file. This is done by converting the applications directory into a .zip archive, then changing the file extension from .zip to .wgt.
There are two ways of installing the extension. The first is to drag-and-drop the file into the main browser window. The second is to open a link to the file, which Opera will recognise as an installable browser extension. The extension will appear in the browser’s Widget menu, and its icon should be displayed in the desktop as well.
The .wgt file can be uploaded to the Opera Widgets site where it will be reviewed before being made public. Alternatively the file can be published on any server, including SourceForge.net.

Further Sources
http://dev.opera.com/sdk
http://widgets.opera.com

Advertisements