Popup API

By Opera Software

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.