Browser toolbar

This documentation relates to Opera's now deprecated .oex Extension API framework for Opera versions <= 12.15 and also provided by our OEX2NEX shim library.

For the latest Opera Extensions API documentation for Opera versions > 12.15 please consult the latest Opera Extensions API documentation online.

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: A read-only representation of the icon for a button.
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++;
}