Button & Badge API

By Opera Software

opera.contexts.toolbar.createItem()

Creates a button that can be added to the browser toolbar.

opera.contexts.toolbar.addItem()

Adds a button to the toolbar in the browser. To create a button see the createItem() method.

opera.contexts.toolbar.removeItem()

Removes a given button from the toolbar in the browser.

opera.contexts.toolbar.length

The number of buttons that exist in the toolbar for this extension (0 or 1).

Button.badge

A read-only property representing the badge for a button.

Button.disabled

A read-only property indicating whether a button is disabled. Set to false by default (meaning the item is enabled).

Button.icon

A read-only representation of the icon for a button.

Button.onclick

Represents the function executed when the button is clicked.

Button.popup

A read-only property representing the popup file path for a button.

Button.title

The title of a button which is exposed to the user (e.g., as a tooltip when hovering over the item with a mouse).

Button.addEventListener()

Listen for events dispatched on a button.

Button.removeEventListener()

Removes a listener from receiving an event.

Badge.backgroundColor

The background color for a badge.

Badge.color

The text color of a badge.

Badge.display

Determines whether a badge should be displayed.

Badge.textContent

The text that will be shown in a badge.

Overview

The browser toolbar API is part of the background process API. This part deals with the browser toolbar context, which allows the creation and manipulation of buttons, badges, and popup windows.

Example

Below is a simple example that adds a button to the browser toolbar. It will show a popup window when clicked (showing the local file 'popup.html') and update the badge to reflect how many times the button has been clicked.

//
// The background process (e.g. index.html)
//

var properties = {
  disabled: false,
  title: "My Extension",
  icon: "icon.18x18.png",
  popup: {
    href: 'popup.html', 
    width: 100, 
    height: 100 
  },
  badge: {
    display: 'block',
    backgroundColor: '#5566ff',
    color: '#ffffff',
    textContent: '0'
  }
};	

// Create and add the button to the toolbar
var button = opera.contexts.toolbar.createItem(properties);
opera.contexts.toolbar.addItem(button);

// Update the button badge on button click
var i = 1; 
button.addEventListener('click', handleClick, false);

function handleClick() {
  // If clicked more than five times, show '5+' in the badge
  var badgeText = (i > 5) ? '5+' : i;

  // Update badge text
  button.badge.textContent = badgeText;

  // Update the button title
  button.title = "You've clicked the button " + i + " time(s)"; 

i++;
}

This article is licensed under a Creative Commons Attribution 3.0 Unported license.