Button & Badge API
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
ino
Wednesday, February 15, 2012
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."
Chris Mills
Monday, February 20, 2012