Getting started with Opera extensions

By Andreas Bovens

DEPRECATED: This article is deprecated. We recommend using our quick documentation overview instead.

Intro

Opera 11 comes with a standards-based framework for running extensions that add extra functionality to the browser. This extensions framework is built on existing standards, with W3C Widgets and JavaScript as the basis. This means that if you can write a web application or widget you already have the skills you need to write extensions. They also make use of HTML5 technology such as cross-document messaging, and of course, you can use CSS as well.

To get you started, we've prepared API reference guides, as well as a number of articles and tutorials. There is a quick documentation overview if you want to have a structured, TOC-like outline of what is available. This article covers the same documentation pointers, but in a more contextualized fashion.

If you have any questions, feel free to ask them on our Opera extensions development forum.

Getting started

If you want to have a peek inside an Opera extension and start playing around with some code, we recommend starting with our introductory What's in an Opera extension? article, and then continue with the Hello World one, in which you learn how to make a simple extension.

Also be sure to have a look at the developer workflow article, so you can make optimal use of the developer features we've included for your convenience.

API guides

Apart from the standard web technologies Opera extensions are built on, there are also a number of unique APIs that come into play. These APIs allow programmers to talk to the browser and control browser functionality such as tabs and windows. We have made our extensions APIs as straightforward as possible, so that developers can pick them up quickly and easily.

Opera extension APIs exist in the opera.extensions namespace. opera.extensions is a global object which most API modules are built upon. For example, if you want to initialize the tabs object, you will write opera.extensions.tabs.

As a starting point, we recommend having a look at the Opera Extensions API guides page. You can then further dig down and inspect the guides to Messaging, the Browser Toolbar, config.xml elements and attributes, Injected Scripts, Popups, Speed Dial, Windows and Tabs and the URL Filter API.

API and packaging tutorials

We have also created a few tutorials to go with the API guides mentioned above. They cover config.xml, User Interface, Tabs, Windows, Messaging, the Options page and the URL Filter API.

• The ins and outs of config.xml: In this article we build up a complete configuration document, showing step by step what all the different elements and attributes do.
• Buttons, badges and popups: This article introduces the ToolbarContext, ToolbarUIItem, ToolbarUIItemProperties, Popup and Badge objects: you will learn more about creating UI for toolbars, including tooltips, icons and more.
• Tabs: This article introduces the tabs object and explains how you can manipulate tabs.
• Windows: This article introduces the windows object and explains how to manipulate windows.
• Messaging: This article introduces opera.extensions' postMessage method and the onconnect and onmessage handlers. You will learn how to send messages between scripts and popups.
• Options page: This article explains how you can create a nicely integrated preferences page for your extension, and includes a template which you can use in your own extension.
• Site blocking with Opera’s URL Filter API: Opera's URL Filter API allows you to easily implement features in extensions that restrict access to certain domains, on a temporary or permanent basis. This article explains the concept, syntax basics and how to build a simple extension using this API.
• Accessing an Opera extension's background process: This article explains how to make optimal use of the bgProcess object, allowing you to avoid messaging in many cases.

Extension building tutorials and templates

Once you're somewhat familiar with the basic structure and different APIs, it's time to have a look at some hands-on tutorials and templates.

• Hands-on tutorial: building an Opera extension: this tutorial shows how to add extra functionality to a page with JavaScript.
• Opera extensions prototypes for modifying CSS: this article introduces three Opera extension templates, which you can use to build your own Opera extension that modifies a page's CSS.
• Opera extension code examples: this article introduces a number of code snippets for basic extension functionality.
• Converting UserJS to Opera extensions: this article teaches you how to convert an existing Opera UserJS into an Opera extension.
• Creating Opera Speed Dial extensions: this article covers all the things you need to know for creating Speed Dial extensions.
• Creating multilingual extensions: this article explains how you can make optimal use of the extension packaging format's built-in mechanisms for providing multilingual versions of an extensions.

UI guidelines and distribution

• Publishing guidelines: This guide explains how to make sure your extension is of high quality and shines, so as to get it published on the Opera extensions catalog.
• Distributing Opera extensions and auto-updates: This article talks about methods of distributing your Opera extensions, covering the Opera extensions catalog, MIME type settings if you distribute on your own, and the auto-update mechanism.

Andreas Bovens

Andreas is based in Oslo, where he works for Opera Software as Extensions Product Manager + Developer Relations.

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