Opera extensions: tabs

By Zi Bin Cheah

Introduction

Opera extensions are powerful: you can manipulate the Opera desktop browser's buttons, default CSS and many other features using web standards such as HTML, JavaScript and CSS. In this article we'll look at manipulating tabs.

If you would like to know how to build an Opera extension from the ground up, the Saying hello world to Opera extensions! article is a good start.

Contents

Creating Tabs

Let's start by looking at how to create a tab. First, we'll use the addEventListener method to listen to the state of the DOM/document loading. In the code snippet below, we use the event listener to listen to the document. Once the browser window finishes loading, we'll fire up the function.

We are also checking to make sure the opera.extension.tabs object exists before we call this object's function to manipulate the tabs.

window.addEventListener( "load", function(){
  if( opera.extension.tabs.create ) //check if function exists
  {
    opera.extension.tabs.create();  // create tabs
  }
  else {
  	//do nothing
    }
}, false);

Creating Tabs with URL

The opera.extension.tabs.create method takes in an optional TabProperties object argument whereby TabProperties itself constitutes a windows-focused boolean value and/or a URL string. By providing the URL string, we are able to create a tab that opens and then has www.opera.com loaded into it.

window.addEventListener( "load", function(){
  if( opera.extension.tabs.create )
  {
   opera.extension.tabs.create({url:"http://www.opera.com/"});
  } else {
    //do nothing
  }
}, false);

Focusing Tabs

Using the same idea of using an event listener and checking if the opera.extension.tabs object exists, we can go on to manipulate tabs in different ways. First of all, let's look at how to create a tab with a focused URL:

opera.extension.tabs.create({focused:true})

Next, we'll create a focused tab with a prefilled URL:

opera.extension.tabs.create({url:"http://www.opera.com/",focused:true})

Closing Tabs

It's equally simple to close tabs. Let's try something: we'll create a tab and then close it after one second.

window.addEventListener( "load", function(){
  if( opera.extension.tabs )
  {
    var tab = opera.extension.tabs.create({url:"http://www.opera.com/",focused:true});
    window.setTimeout( function(){
      opera.extension.tabs.close( tab );
    }, 1000);
  } else {
  // Couldn't find an opera.extension.tabs object, to fetch and then update the tab
  }
}, false);

What's next?

So there you have it — a few ways to create, manipulate and close tabs. You can refer to the Opera extension API documentation or a complete reference of the tabs object and its methods. Next you might consider playing with the Windows object in an Opera extension.

API reference

object opera.extension.tabs

Zi Bin Cheah

Web Evangelist in the Developer Relations Team at Opera Software ASA.

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.