Offscreen Tabs (experimental)

Introduction

The chrome.experimental.offscreenTabs.* API module allows for interacting with multiple web pages on the screen at the same time. Example applications might look like the Safari’s “Top Sites” or Chrome’s “Most Visited” page augmented with real-time display updates and user interaction. In combination with WebGL and its texture API capabilities the offscreen tabs module could be used to create true 3D browser environments on the web!

Display

The real-time display could be achieved by updating standard HTML <img> or <canvas> elements while capturing snapshots of offscreen tabs with the toDataUrl method.

Interaction

For interaction, we propose the sendMouse and sendKeyboard methods. These methods could pass standard JavaScript mouse and keyboard events along with the offscreen tab ID specifying the offscreen tab these events should be applied to. In the case of mouse events appropriate x and y coordinates should be passed as well. Why? Because when an application or extension is responsible for rendering an offscreen tab's contents, only that application knows exactly where a click against the tab's canvas is supposed to be dispatched. Once Chrome picks up the JavaScript events new synthesized events will be sent to the appropriate offscreen tab. Most of the fields of the synthesized events will be the same as the ones of the incoming JavaScript events. One exception, for example, are the x and y coordinates for mouse events as explained above.

Window Size

Since the offscreen tabs will not be displayed by the browser in separate tabs the developer has to explicitly specify width and height of each offscreen tab's window.

Manifest

The module requires the specification of an offscreenTabs permission type. This permission would enable the API to see all web sites' user data. The developer will have to declare the offscreenTabs permission in the extension manifest. For example: { "name": "My extension", ... "permissions": [ "offscreenTabs" ], ... }

Example Extensions

Above you can see a video of a Chrome extension we have developed with the Offscreen Tab API and WebGL. Here are some additional screenshots:

Design Review Slides

Slides from API design review

Spec (outdated)

Note: the information below is outdated. The current API is in the process of being checked in here.

Types

OffscreenTab

id (int) The ID of the offscreen tab. Tab IDs are unique within a browser session. url (string) The URL the offscreen tab is displaying. width (int) Width of the window. height (int) Height of the window.

Methods

create

create (object createProperties, function callback) Creates a new offscreen tab. Parameters createProperties (object) url (string) The URL the offscreen tab should be displaying. width (optional int) Width of the visible window. Defaults to width of the current window. ***height (*optional int) Height of the visible window. Defaults to height of the current window. ***callback (*optional function) The callback parameter should specify a function that looks like this: function (OffscreenTab offscreenTab) {...}; Details of the offscreen tab.

get

get (int offscreenTabId, function callback) Gets details about the specified offscreen tabs. Parameters offscreenTabId (int)** ID of the offscreen tab. callback (function) The callback parameter should specify a function that looks like this: function (OffscreenTab offscreenTab) {...}; Details of the offscreen tab.

getAll

getAll (function callback) Gets an array of all offscreen tabs. Parameters callback (function) The callback parameter should specify a function that looks like this: function (array of OffscreenTab offscreenTabs) {...};

remove

remove (int offscreenTabId, function callback) Removes an offscreen tab. Parameters offscreenTabId (int) ID of the offscreen tab. ***callback (*optional function) The callback parameter should specify a function that looks like this: function () {...};

sendMouseEvent

sendMouseEvent (int offscreenTabId, int x, int y, MouseEvent mouseEvent, function callback) Dispatches a mouse event in the offscreen tab. Parameters offscreenTabId (int) ID of the offscreen tab. mouseEvent (MouseEvent) A JavaScript MouseEvent object. Supported event types: mousedown, mouseup, click, mousemove, mousewheel. ***x (*optional int) X position of where the mouse event should be dispatched on the offscreen web page. Not required in the case of a mousewheel event. ***y (*optional int) Y position of where the mouse event should be dispatched on the offscreen web page. Not required in the case of a mousewheel event. ***callback (*optional function) The callback parameter should specify a function that looks like this: function (OffscreenTab offscreenTab) {...}; Details of the offscreen tab.

sendKeyboardEvent

sendKeyboardEvent (int offscreenTabId, KeyboardEvent event, function callback) Dispatches a keyboard event in the offscreen tab. Parameters offscreenTabId (int) ID of the offscreen tab. keyboardEvent (KeyboardEvent) A JavaScript KeyboardEvent object. Supported event types: keydown, keyup, keypress. Only keypress produces a visible result on screen. ***callback (*optional function) The callback parameter should specify a function that looks like this: function (OffscreenTab offscreenTab) {...}; Details of the offscreen tab.

toDataUrl

toDataUrl (int offscreenTabId, object options, function callback) Captures the visible area of an offscreen tab. Parameters offscreenTabId (int) The ID of the offscreen tab. ***options (*optional object) Set parameters of image capture, such as the format of the resulting image. ***format (*optional enumerated string [“jpeg”, “png”]) The format of the resulting image. Default is jpeg. ***quality (*optional int) When format is 'jpeg', controls the quality of the resulting image. This value is ignored for PNG images. As quality is decreased, the resulting image will have more visual artifacts, and the number of bytes needed to store it will decrease. ***callback (*function) The callback parameter should specify a function that looks like this: function (string dataUrl) {...}; dataUrl (string) A data URL which encodes an image of the visible area of the captured offscreen tab. May be assigned to the 'src' property of an HTML Image element for display.

update

update (int offscreenTabId, object updateProperties, function callback) Modifies the properties of an offscreen tab. Properties that are not specified in updateProperties are not modified. Parameters offscreenTabId (int) The ID of the offscreen tab. updateProperties (object) ***url (*optional string) The URL the offscreen tab is displaying. ***width (*optional int) Width of the window. ***height (*optional int) Height of the window. ***callback (*optional function) The callback parameter should specify a function that looks like this: function (OffscreenTab offscreenTab) {...}; Details of the offscreen tab.

Events

onUpdated

onUpdated.addListener (function (int offscreenTabId, object chnageInfo, OffscreenTab offscreenTab) {...}) Fires when an offscreen tab is updated. Parameters offscreenTabId (int) ID of the updated offscreen tab changeInfo (object) Lists the changes to the state of the offscreen tab that was updated. ***url (*optional string) The offscreen tab’s URL if it has changed. offscreenTab (OffscreenTab) Details of the offscreen tab