Extensions for Opera: 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.

Buttons on the browser bar

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

Button Creation

The button creation code must be added to the script element of the index.html file. In this example, we execute the code when the load event fires.
The first step is to determine the properties of the button. This can be done using the ToolbarUIItemProperties object. For instance:

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 if 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 displays when the user hovers the cursor over the button.

theButton.title = "Это подсказка";

icon

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

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

onclick

This function is called when the user clicks on 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 place it on the Opera panel. We do this using the addItem method:

opera.contexts.toolbar.addItem(theButton);

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

Removing a button from the browser panel

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

opera.contexts.toolbar.removeItem(theButton);

Create a popup

Now you have a button, you want it to be able to do something. By clicking on the button, a pop-up window may be displayed. A popup is a window with the specified width and height. You can load into it pages that are online or delivered with your extension.

To create a popup, 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

Use the href property to specify the contents of the popup. You can point to any page on the network using its absolute URL:

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

You can also load the page that comes with the extension by specifying its relative address:

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

This page can be a regular HTML page, no changes need to be made. Please note: if you change the href property when the pop-up window is open, it will close.

Popup Size

Popup sizes are 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 the popup button example . If you tried the example from the article “ Your First Extension for Opera ”, then it will seem very familiar to you.

Badge creation

A badge is an overlay on top of a button icon with text content. Most often, they are used to display 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)"
          }
 }

The 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 value is none. You can make the badge visible like this:

theButton.badge.display = "block";

textContent

The badge text can be set via the textContent property. The badge has a limited space for displaying 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 take values ​​in hexadecimal, RGBA, and color names.

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

You can try the example of a badge button and explore various ways to create and manage user interface elements for Opera extensions.

You can refer to the extension APIs for Opera to get complete information about various objects and methods.

API Links

object ToolbarContext
object ToolbarUIItem
object ToolbarUIItemProperties
object Popup
object Badge