How to Customize Opera Widgets

A Simple Clock Widget for Your Desktop

By on December 28th, 2007 17:59 GMT
Opera widgets are web applications that run directly on your desktop without displaying the browser controls because Opera web browser can install and show them automatically. They can be constructed using regular client side programming languages such as JavaScript and Flash. As a consequence, minimal knowledge regarding common used web-related programming languages are necessary if you want to create a new widget or to modify an existing one.

The main parts of an Opera widget are a file named index.html and a config.xml file. The index.html file can control external files, such as Flash animations or external Javascripts or could contain a Javascript in it, for example. Practically a widget could be assimilated to a regular client side web application which performs certain actions on a Windows or Linux desktop, as if it was called from a web browser.

The config.xml file is made in compliance with the Extensible Markup Language (XML) specifications. It contains the widget "configuration" options such as dimensions, icon, security, id and more. Every Opera widget is a zip archive containing beside index.html and config.xml other necessary files such as images, external javascript or CSS files.

For example, if you want to modify an existing Opera widget, you just have to download it and unzip all files in a convenient location, even if the file has not specified the archive type. Then, you must identify the elements that should be changed and their corresponding code in index.html, Javascript, Java or other existing file in the archive. For testing purposes (after you modify the widget) you must drag and drop the config.xml file directly in an Opera browser window and the widget will run automatically.

The next code forms an Opera widget that will display the current time on your desktop. It contains a Javascript included in the index.html file:


Look At The Current Time On Desktop!!!!!!
The current time is :

var Time = new Date()
var h = Time.getHours()
var m = Time.getMinutes()
var s = Time.getSeconds()
if (m < 10)
m = "0" + m
if (s < 10)
s= "0" + s
document.write(h + ":" + m + ":" + s)

The corresponding config.xml file must contain the next code:


This is a clock widget (simple clock)