Opera Sidebar Action API

Contents

Terminology

There are some additional elements in the browser that we need to understand in the context of sidebar extensions. These are the sidebar, which consists of a buttons list on the left hand side (which contains the icons for sidebar extensions). Clicking on each icon will open up its corresponding panel on the right hand side of the sidebar.

Manifest

These would be the changes in the manifest:

{
	"manifest_version": 2,
	"name": "My extension",
	"version": "1",
	"sidebar_action": {
		// Required
		"default_icon": "images/default_icon.png",
		// Optional; shown in tooltip
		"default_title" : "My Extension Title",
		// Required
		"default_panel": "panel.html"
	}
}

You can also specify a series of sizes and icon paths as keys and values, instead of a single icon value described above. If you want to specify icons for a series of sizes, then instead of mentioning one default icon, you can specify an object listing out the paths to the icons and their corresponding sizes in the default_icon field like so:

"sidebar_action": {
	"default_icon": {
		"19": "images/19.png",
		"38": "images/38.png"
	}
}

Icon

You can set the icon in two ways: using a static image or using the HTML5 <canvas> element. Using static images is easier for simple applications, but you can create more dynamic UIs — such as smooth animation — using the canvas element. Static images can be in any format Blink can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.

To set the icon, use the default_icon field of sidebar_action in the manifest, or call the sidebarAction.setIcon method (especially, if you want to switch it and set alternative icon instead).

Tooltip

To set the tooltip, use the default_title field of sidebar_action in the manifest, or call the sidebarAction.setTitle method. You can specify locale-specific strings for the default_title field; see Internationalization for details.

Badge

Sidebar actions can optionally display a badge — a bit of text that is layered over the icon. Badges make it easy to update the sidebar action to display a small amount of information about the state of the extension. Because the badge has limited space, it should have 4 characters or less. Set the text and color of the badge using sidebarAction.setBadgeText and sidebarAction.setBadgeBackgroundColor, respectively.

Panel

If a sidebar action has a panel, it will appear when the user clicks the icon. The panel can contain any HTML content that you like, and it’s automatically sized to fit the available width and height. It is recommended that developers make their panel pages fluid and responsive in order to look good in various widths.

To add a panel to your sidebar action, create an HTML file with the panel’s contents. Specify the HTML file in the default_panel field of sidebar_action in the manifest, or call the sidebarAction.setPanel method.

Summary

Types

• ColorArray
• ImageDataType

Methods

• setTitle — opr.sidebarAction.setTitle( object details)
• getTitle — opr.sidebarAction.getTitle(object details, function callback)
• setIcon — opr.sidebarAction.setIcon(object details, function callback)
• setPanel — opr.sidebarAction.setPanel(object details)
• getPanel — opr.sidebarAction.getPanel(object details, function callback)
• setBadgeText — opr.sidebarAction.setBadgeText(object details) *
• getBadgeText — opr.sidebarAction.getBadgeText(object details, function callback) *
• setBadgeBackgroundColor — opr.sidebarAction.setBadgeBackgroundColor(object details) *
• getBadgeBackgroundColor — opr.sidebarAction.getBadgeBackgroundColor(object details, function callback) *
• Not supported on Mac yet.

Events

• onFocus
• onBlur
• Not supported on Mac yet.

Types

ColorArray

Array of integer.

ImageDataType

Pixel data for an image. Must be an ImageData object (for example, from a <canvas> element).

Methods

setTitle

opr.sidebarAction.setTitle(
	object details
)

Sets the title of the sidebar action. This shows up in the tooltip.

getTitle

opr.sidebarAction.getTitle(
	object details,
	function callback
)

Gets the title of the sidebar action.

setIcon

opr.sidebarAction.setIcon(
	object details,
	function callback
)

Sets the icon for the sidebar action. The icon can be specified either as the path to an image file or as the pixel data from a canvas element, or as dictionary of either one of those. Either the path or the imageData property must be specified.

setPanel

opr.sidebarAction.setPanel(
	object details
)

Sets the HTML document to be opened as a panel when the user clicks on the sidebar action’s icon.

getPanel

opr.sidebarAction.getPanel(
	object details,
	function callback
)

Gets the HTML document set as the panel for this sidebar action.

setBadgeText

opr.sidebarAction.setBadgeText(
	object details
)

Sets the badge text for the sidebar action. The badge is displayed on top of the icon.

Not supported on Mac yet.

getBadgeText

opr.sidebarAction.getBadgeText(
	object details,
	function callback
)

Gets the badge text of the sidebar action. If no tab is specified, the non-tab-specific badge text is returned.

Not supported on Mac yet.

setBadgeBackgroundColor

opr.sidebarAction.setBadgeBackgroundColor(
	object details
)

Sets the background color for the badge.

Not supported on Mac yet.

getBadgeBackgroundColor

opr.sidebarAction.getBadgeBackgroundColor(
	object details,
	function callback
)

Gets the background color of the sidebar action.

Not supported on Mac yet.

Events

onFocus

opr.sidebarAction.onFocus.addListener(
	function callback
)

When the panel becomes in focus (user clicks inside the panel).

Not supported on Mac yet.

onBlur

opr.sidebarAction.onBlur.addListener(
	function callback
)

When panel loses focus when the user clicks on the webpage (or any other area outside the panel), thereby the panel loses focus.

Not supported on Mac yet.