Popup 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.

Popup.height

The height of the popup window.

Popup.href

A URL reference to the page to pop up; this page will pop up when the user clicks on an ExtensionUIItem, e.g. a button.

Popup.width

The width of the popup window.

opera.extension.onmessage

This event is fired when a message is received from the BackgroundProcess.

opera.extension.postMessage()

This method is used to post a message to the BackgroundProcess of the extension.

opera.extension.addEventListener()

Registers a listener for an event specific to the popup window.

opera.extension.removeEventListener()

Removes an existing listener from an event.

Overview

An extension's toolbar button can easily be programmed to open a popup window. This popup window displays the contents of an HTML file and is closed by the user clicking again on the toolbar button. There are a few attributes and methods specific to this popup, detailed below. Note: Although messaging can be used to communicate with the background process, you will probably find it easier to use the bgProcess object.

Example

Add a button to the toolbar. When the button is clicked, popup.html opens in a popup window and sends a message to the extension's background script. When the message is received, a badge appears within the toolbar button.

//
// The background process (e.g. '/background.js').
//

// Set options for the button
var UIItemProperties = {
  disabled: false,
  title: 'Opera Extension',
  icon: 'images/icon_18.png',
  popup: {
    href: 'popup.html',
    width: 500,
    height: 400
  },
  badge: {}
};

// Create the button and add it to the toolbar
var button = opera.contexts.toolbar.createItem(UIItemProperties);
opera.contexts.toolbar.addItem(button);

// Check for incoming messages
opera.extension.onmessage = function(event) {
  button.badge.textContent = '+';
};

//
// The popup script (e.g. '/popup.js').
//

window.addEventListener('DOMContentLoaded', function() {
  opera.extension.postMessage('Message from popup.');
  document.write('Message sent from popup');
}, false);

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