Opera Extensions: Buttons, Badges and Pop-ups

Introduction

This article describes the basic steps for creating and managing buttons on the browser panel and their various components.

Browser Panel Buttons

The extension allows you to put one button on the Opera browser panel, to the right of the search field. The button can include an 18x18 pixel icon, a hint (shown when hovering), a status badge and a pop-up window.

Creating buttons

The code for creating the button should be added to the script element of the index.html file. In this example, we execute the code at the time of the load event.
The first step is to define the properties of the button. This can be done using the ToolbarUIItemProperties object. For example:

var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png" } 

After you set the button properties in ToolbarUIItemProperties, you need to create the button itself using the createItem method:
')

 var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties); 

In total, using the ToolbarUIItemProperties object you can define 5 properties:

disabled

Determines whether the button is active. The default value is true (inactive), takes a boolean value. You can make the button inactive as follows:

 theButton.disabled = true; 

title

The title property sets a tooltip that shows when the user hovers over a button.

 theButton.title = " "; 

icon

The icon property sets the icon that is used by the button. If you specify a picture with a size different from 18x18 pixels, it will be automatically scaled.

 theButton.icon = "icons/beautiful-toobar-icon.png"; 

onclick

This function is called when the user clicks the button and the click event is raised.

 theButton.onclick = function(){ /*  - */ }; 

onremove

This function is called when the button is removed from the ToolbarContext and the remove event is raised.

 theButton.onremove = function(){ /*  - */ }; 

Adding a button to the browser bar

After creating the button, we need to put it on the Opera panel. We do this using the addItem method:

 opera.contexts.toolbar.addItem(theButton); 

Try running an example . It does nothing special, since you have not yet defined any actions for the button.

Remove button from browser panel

The button can be removed from the browser panel using the removeItem method:

 opera.contexts.toolbar.removeItem(theButton); 

Creating a popup window

Now you have a button, you want her to know something. When you click on a button, a pop-up window may be displayed. A popup window is a window with the specified width and height. You can load pages that are on the web or that come with your extension.

To create a popup window, you need to define the properties of the Popup object using the ToolbarUIItemProperties object:

 var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png", popup: { href: "popup.html", width: 300, height: 300 } } 

Popup Content

To specify the contents of a popup window, use the href property. You can point to any page on the web using its absolute URL:

 theButton.popup.href = http://www.opera.com/"; 

You can also load the page that comes with the extension, indicating its relative address:

 theButton.popup.href = "popup.html"; 

This page can be a regular HTML page, no changes are necessary. Note: if you change the href property, when the pop-up window is open, it will close.

Popup Sizes

The size of the popup window is specified in pixels using the width and height properties:

width

 theButton.popup.width = 300; 

height

 theButton.popup.height = 300; 

A popup window will be created at the same time as the button when the createItem method is called.

Try an example of a button with a pop-up window . If you have tried an example from the article “ Your first extension for Opera ”, then it will seem very familiar to you.

Creating a badge

A badge is an overlay on top of a button icon with text content. Most often they are used to show the amount of something, such as unread letters or messages. To create a badge, you need to define the properties of the Badge object through the ToolbarUIItemProperties object:

 var ToolbarUIItemProperties = { disabled: false, title: " ", icon: "icons/button.png", badge: { display: "block", textContent: "12", color: "white", backgroundColor: "rgba(211, 0, 4, 1)" } } 

A badge has 4 properties that can be configured:

display

The display property shows and hides the badge. Valid values ​​are block and none. The default is none. You can make a badge visible like this:

 theButton.badge.display = "block"; 

textContent

The badge text can be set via the textContent property. The badge has a limited place to display text, so try to be concise.

 theButton.badge.textContent = "12"; 

color and backgroundColor

The color and backgroundColor properties set the text color and background color of the badge. They accept values ​​in hexadecimal, RGBA and color names.

 theButton.badge.color = "white"; theButton.badge.backgroundColor: = "rgba(211, 0, 4, 1)"; 

You can try an example of a button with a badge and explore the various ways of creating and managing the elements of the user interface extensions for Opera.

You can refer to the Opera Extensions API for complete information on various objects and methods.

API links

ToolbarContext object
ToolbarUIItem object
ToolbarUIItemProperties object
Popup object
Badge object