Extensions for Opera: Settings page

Original author: Chris Mills
  • Transfer


This article describes how to use the new feature extension for Opera, called the settings page. This is a page in the extension that contains the settings that the user can set. This page is called options.html and is located in the root of the extension.

It works very simply - when you install the extension, if Opera finds the options.html file in it, it makes the Preferences button for the extension active in the extension manager (Tools> Extensions> Manage Extensions).

You can place whatever you want on the settings page, but in general there should be form elements that allow the user to select various settings and save their changes to localStorage or widget.preferences for use in the extension. In this article, we will offer you just an extension containing a settings page template that you can safely use in your own extensions.

Introducing the template

Before moving on, download our test extension . The template contained in it actually does nothing and is used only to show the functionality of the settings page. Install the extension, then go to the extension manager and click the gear button. You will see that the “Preferences” option, as shown in Figure 1.


Figure 1: New extension functionality for Opera, available through the extension manager.

When you select the “Preferences” option, the settings page opens, which looks like the one shown in Figure 2.


Figure 2: Test extension settings page containing form elements that allow the user to define the extension settings.

How does the extensions page work?

If you unzip the test extension, you will find the options.html file in the root. The existence of this file tells Opera to make the “Preferences” item available. The responsibility for the correct functioning of this page lies with you.

Fortunately, you can use our template to save time. It contains a set of form elements that allow you to select various options for extension settings, plus a bit of smart JavaScript.

When the user opens the page, the script goes through all the elementswith the name attribute and set them the corresponding values ​​from widget.preferences. You can safely remove or add elements to the page, the script will continue to function correctly.

In addition, this script automatically sets the page title, its title, and the author’s name, using the values ​​from the window.widget object, which in turn takes them to config.xml.

By default, the settings are entered in the markup of the options.html file. When the user changes the value of any form element, it is instantly stored in the widget.preferences object. You don’t even have to submit a form!

The widget.preferences interface is the same as the localStorage object, except that it does not have the same size limit and its default values ​​can be specified in the "preference" section of config.xml file, as indicated in The preference section Element and its Attributes specification Widget Packaging and the Configuration . The moment our options.html script stores the value in the widget.preferences object, an event is raised in all active extension documents (especially in the background script). Capturing this event, the background script can immediately respond to changes in settings.

So, when the settings page is loaded, the script goes through the various elements of the form and sets them the values ​​from widget.preferences, if any, or sets default values.

To handle settings with multiple values, such as a group of checkboxes or multiple selects, we merge / separate multiple values ​​using the glue variable: this is simple \ n. If your extension requires a more sophisticated settings interface, then you should write your own version of the options.html file to work correctly.


This concludes our tour of the functionality of the extension settings page for Opera. Feel free to take our template and use it in your extensions.

Also popular now: