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.

Creates a button that can be added to the browser toolbar.
Adds a button to the toolbar in the browser. To create a button see the createItem() method.
Removes a given button from the toolbar in the browser.
The number of buttons that exist in the toolbar for this extension (0 or 1).
A read-only property representing the badge for a button.
A read-only property indicating whether a button is disabled. Set to false by default (meaning the item is enabled).
A read-only representation of the icon for a button.
Represents the function executed when the button is clicked.
A read-only property representing the popup file path for a button.
The title of a button which is exposed to the user (e.g., as a tooltip when hovering over the item with a mouse).
Listen for events dispatched on a button.
Removes a listener from receiving an event.
The background color for a badge.
The text color of a badge.
Determines whether a badge should be displayed.
The text that will be shown in a badge.


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.


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);

// 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)";


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


  • photo


    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.