Cookie-sharing in Opera extensions

By Daniel Davis

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

Opera 11.50 for desktop introduces the ability for extensions to share cookies with the browser. As tempting as it is to dive into puns about milk and biscuits, we're going to look at how this new feature can help you make extensions that are easier for people to use. And this feature also just happens to be easy for developers to use as well.

What are cookies?

Even non-technical users have heard of cookies thanks to various scary stories in the press. They're the things that sit inside your computer, watch what you're doing and then report back to some evil overlord who will try to sell you stuff you don't need, right? Well, possibly, but the cookies we're sharing in this article are the helpful kind. They do things like keep track of whether you're logged in to a particular website so that every time you view a new page, you don't have to re-enter your username and password. In practice, they can't actually do anything by themselves—they are just a set of strings that can only be seen by the website that set them. It's the website rather than the cookie that then processes the information they refer to.

Incidentally, you can check which websites have set cookies for you in Opera by going to Preferences → Advanced → Cookies → Manage cookies. From there you can edit or delete them individually.

But I don't want to share cookies—they're mine!

Cookie-sharing can sound like a threat to our privacy but in this case it doesn't mean sharing information with third party websites—it means sharing things like user preferences between a web page and an extension. What we're going to do here is allow an extension to use cookies for websites that a user has already granted permission to.

Note that these shared cookies should not be confused with Local Shared Objects (LSO), otherwise known as Flash cookies.

A deliciously simple example

It doesn't get much easier than this—although we could use XMLHttpRequest, we're simply going to have a popup window that contains an iframe, which in turn contains a mobile version of a website, in this case, Reddit. The entire code is below but if you prefer, you can download the example cookie-sharing extension here.

Note that some websites, such as mobile Facebook, don't allow embedding as iframes for security reasons. If this happens, it is reported as a network issue in Opera's error console.

We need to do two things to be able to share cookies; grant the extension access to a particular domain and enable the cookie-sharing feature. Both of these are done in the extension's config.xml file by adding the following two lines.

<feature name="opera:share-cookies" required="false"/>
<access origin="http://reddit.com" subdomains="true"/>

The <feature> element's required attribute indicates whether the extension will not work if cookies are not shared. The access element specifies a domain and the possible sub-domains that the extension can access—i.e. the domains that contain the cookies your extension needs. You may need to add more than one access element if, for example, you also need access to an https domain. It's important to specify the domain and not use a wildcard here in order to prevent third-party cookies, which the user may not want, from being shared. For the sake of completeness, here's the whole config.xml file for our example extension, which I'll call Reddit Quick:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://people.opera.com/danield/redditquick" defaultlocale="en">
  <name>Reddit Quick</name>
  <description xml:lang="en">Check the latest Reddit stories quickly without leaving your current page.</description>
  <author href="http://people.opera.com/danield/">Daniel Davis</author>
  <icon src="images/icon_64.png"/>
  <icon src="images/icon_18.png"/>
  <feature name="opera:share-cookies" required="false"/>
  <access origin="http://reddit.com" subdomains="true"/>
</widget>

Next is the all-important index.html file. In this case, the JavaScript within this file will add a button to Opera's toolbar. For the button, we can specify an icon for it to use, a title that appears as a tooltip and a file that it can open. The file will open in a popup window so we should also set how large the popup will be. A height of up to 480 pixels seems to be a safe value for smaller screens such as those on netbooks. Here's the index.html file in full:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reddit Quick (background)</title>
</head>
<body>
<script>
(function() {
  // Define some properties for the button
  var buttonprops = {
    icon: 'images/icon_18.png',
    title: 'Reddit Quick',
    popup: {
      href: 'popup.html',
      width: 400,
      height: 480
    }
  };

  // Create the button
  var button = opera.contexts.toolbar.createItem(buttonprops);

  // Add the button to the browser's toolbar
  opera.contexts.toolbar.addItem(button);
})();
</script>
</body>
</html>

The final piece of the puzzle is the popup itself. As mentioned earlier this simply contains an iframe so no JavaScript is needed, although I am going to use a bit of CSS to ensure we use the available space as productively as possible.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reddit Quick (popup)</title>
<style>
body {
  margin:0;
  overflow:hidden;
  padding:0;
}
iframe {
  border:none;
}
</style>
</head>
<body>
<iframe src="http://www.reddit.com/.compact" width="100%" height="474"></iframe>
</body>
</html>

And there we have it! The result is a popup that shows a mobile version of Reddit. Although that alone is nothing new, the extension does add value for the users. If the user is already logged in to Reddit they now don't have to log in again to the new instance within the popup. Of course, the same cookie-sharing convenience is also possible with Speed Dial extensions using XMLHttpRequest, so you could create an extension that shows users the current number of unread stories or messages for a particular website from the comfort of their Opera Speed Dial. An example of this is the Reddit on Speed Dial extension. There are various possibilities for this easy-to-use feature so we look forward to seeing what you create over at the Opera extensions repository.

This article is licensed under a Creative Commons Attribution 3.0 Unported license.