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.


This method creates a Button from a given property object. Note: The item can only be used within the ToolbarContext that it is created in.


  • properties: The ButtonProperties to use when creating the Button.

The available properties include:


Button createItem (<ButtonProperties> properties)


The below button would include a badge (saying '42') and display a popup window when clicked.

Note that buttons must be defined in the background process (e.g. in index.html) in order to work.

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

var i = 0; // count the number of times the button get clicked

// The button properties
var properties = {
  disabled: false,
  title: "My Extension",
  icon: "icon.18x18.png",
  onclick: function() {
    i++; // counting how often the button is clicked
  popup: {
    href: 'popup.html',
    width: 100,
    height: 100
  badge: {
    display: 'block',
    backgroundColor: '#5566ff',
    color: '#ffffff',
    textContent: '42'

// Create the button
var button = opera.contexts.toolbar.createItem(properties);

You can also define the properties on the fly when creating the button:

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

// Create a button
var button = opera.contexts.toolbar.createItem({
  title: 'Weather Extension',
  icon: 'yr.png'

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


  • photo

    Romas K.

    Saturday, December 22, 2012

    Is there a way to create TWO buttons for the same extension?
  • photo

    Mike Taylor

    Thursday, January 17, 2013

    No, any given extension can only have one UI button.
No new comments accepted.