Button & Badge API

By Opera Software

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

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.

Comments

  • photo

    ino

    Wednesday, February 15, 2012

    Hi, just a note.
    There is wrong definition of Button.onclick on this page.
    "A read-only representation of the icon for a button." should be something like: "Represents the function executed when the button is clicked."
  • photo

    Chris Mills

    Monday, February 20, 2012

    @ino - thanks for spotting that error - I have corrected it!
No new comments accepted.