« Documentation Home

Popup

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.

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