Extensions for Opera: Settings Page

Introduction

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



It works very simply - when you install an extension, if Opera finds the options.html file in it, it makes the Preferences button for this 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 to use them in the extension. In this article, we will offer you just an extension containing a template of the settings page, which you can safely use in your own extensions.

Introducing the template

Before going further, download our test extension . The template contained in it, in fact, 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 Opera extensions functionality, available through the Extensions Manager.



When you select the “Preferences” option, a settings page will open that looks like the one shown in Figure 2.







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

How does the extension page work?

If you unpack the test extension, you will find the options.html file in the root. The existence of this file tells Opera about the need to make the “Preferences” item available. The responsibility for the correct functioning of this page rests 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 the extension settings, plus some clever JavaScript.



When the user opens the page, the script goes through all <select> and <input> elements with the name attribute and sets them to the appropriate values ​​from widget.preferences. You can safely delete 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 name of the author, using values ​​from the window.widget object, which in turn takes them to config.xml.



By default, the values ​​of the settings are written in the markup of the options.html file. When a 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 defined in the “preference” section of the config.xml file, as specified in The preference section Element and Attributes of the Widget Packaging and Configuration specification. At the moment when the script of our options.html saves the value to the widget.preferences object, an event is raised in all active extension documents (especially in the background script). By intercepting this event, the background script can immediately respond to changing settings.

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

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

Results

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