Your first extension for Opera

Introduction

This article will guide you through the basic steps to create your first extension for Opera. You will create a button on the panel that, when clicked, a pop-up window with the message “Hello World!” Will open. Extensions for Opera are written using common open web standards, so all you need to get started is Opera 11 and your text editor or IDE.

Configuring the extension.

First, you need to create an extension configuration file that contains metadata describing the extension. It contains information about the name of the extension, its author and the icon for the extension manager. Extensions for Opera use the W3C Widgets format, which can be familiar to you from Opera Widgets.
')
Create a skeleton configuration file:

<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .

1. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
2. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
3. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
4. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
5. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
6. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .
7. <? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .

<? xml version ="1.0" encoding ="utf-8" ? > < widget xmlns ="http://www.w3.org/ns/widgets" > < name > Hello extensions! </ name > < description > A simple hello world example </ description > < author href ="yourURL" email ="yourEMail" > Enter your name here </ author > < icon src ="hello.png" /> </ widget > * This source code was highlighted with Source Code Highlighter .

Save it under the name config.xml.

Creating an extension icon

Surely, you have noticed the description of the icon in the configuration file. This icon is used in the extensions manager and on the Opera extensions site. We recommend creating icons of 64x64 pixels.

Download the file hello.png icons and save it to the extension folder.

Adding a button to the Opera panel

After you have configured the extension, you can start writing its code. Create a button that will be added to the panel. This can be done with the following code:

1. <! doctype html >
2. < html lang = "en" >
3. < head >
4. < script >
5. window.addEventListener ( "load" , function () {
6. var theButton;
7. var ToolbarUIItemProperties = {
8. title: "Hello World" ,
9. icon: "hello-button.png" ,
10. popup: {
11. href: "popup.html" ,
12. width: 110,
13. height: 30
14. }
15. }
16. theButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);
17. opera.contexts.toolbar.addItem (theButton);
18. }, false );
19. </ script >
20. </ head >
21. < body >
22. </ body >
23. </ html >

* This source code was highlighted with Source Code Highlighter .

Save this file as index.html in the extension folder.

Any extension for Opera requires the index.html file. This is a html template containing a script that creates UI elements. The body of this document is not used.

The script will create a panel element (button) with several properties. The element is created with an icon size of 18x18 pixels. The pop-up window associated with the button is also created with the specified size and an indication of the file with its interface.

Download the file hello-button.png and save it to the extension folder.

Creating a popup window

You have already created a button and specified the size of the popup window, so now you only need to create its content. This is just an HTML document with the specified dimensions. You can use HTML, CSS, JavaScript or any other web technologies that you normally use on web pages. This is a hello world example, so let's create this page:

1. <! doctype html >
2. < html lang = "en" >
3. < head >
4. < title > Hello World! </ title >
5. < style >
6. h1 {
7. font: 14px helvetica, arial, sans-serif;
8. text-align: center;
9. }
10. </ style >
11. </ head >
12. < body >
13. < h1 > Hello World! </ h1 >
14. </ body >
15. </ html >

* This source code was highlighted with Source Code Highlighter .

Save this file with the name popup.html in the extension folder.

Packaging and installation of the extension

You are almost done creating the extension. All you have left is to pack all the files in a zip-archive. After that, rename the file to HelloExtension.oex (do not forget to change the extension from .zip to .oex) and everything is ready.

You can download a ready-made HelloExtension extension.

Now just drag the extension into the browser window and it will ask if you want to install it. You will see the icon and metadata you specified. Switch to any tab and try clicking on the new button on the panel.

Experiment with the various properties of the button and the contents of the pop-up until you are comfortable with the process.