Creating extensions for Speed ​​Dial

Introduction

In 2007 we introduced the world to the Speed ​​Dial. Today you can find implementations of this popular concept in almost all major browsers. But how would we not be proud of this, what kind of parents would we be if we did not help our child grow and learn new abilities? In the release of Opera 11.10, we improved the appearance and the UX of our Speed ​​Dial and added the ability for developers to control how their site will look in Speed ​​Dial cells. In Opera 11.50, we take another step forward with the Speed ​​Dial extensions .

Just as you can extend your browser with Opera extensions , you can customize and expand the Speed ​​Dial features to make it even more convenient. Instead of being limited to displaying icons or screenshots of pages, the Speed ​​Dial can now display live content, and this article will show you how to do it.

Note: To try out this example, you need Opera 11.50 and an example of an extension for Speed ​​Dial: download our watch for Speed ​​Dial .

The basics

To maintain compatibility with normal extensions for Opera, extensions for Speed ​​Dial use the same format and structure, but with some additions. In other words, the following small additions to the code in the config.xml file can turn an existing extension for Opera into an extension for Speed ​​Dial:
')

• A <feature> element with a name attribute and a value opera: speeddial , which turns the extension into an extension for the Speed ​​Dial.
• The viewmodes attribute of the <widget> tag with a minimized value: shows the background page in the Speed ​​Dial cell.

Please note, at the moment the extension can not simultaneously use the Speed ​​Dial and the browser toolbar. In other words, an extension with a button on the browser panel cannot simultaneously be an extension for the Speed ​​Dial in the current implementation.

Describe the extension for the Speed ​​Dial in the config.xml file

Let's apply the theory in practice and create a test extension step by step. To view the following code snippets, you can download our extension for the Speed ​​Dial watch and take a look at the source code inside the package. Figure 1 shows what the extension will look like in the end.


Figure 1 : The “clock” extension set in the Speed ​​Dial of the Opera browser.

While the normal Speed ​​Dial cells display a screenshot of the web page, the extension for the Speed ​​Dial displays the start (or background) page of the extension - this is the default index.html file. To enable this, we first need to add the viewmodes attribute with the minimized value to the <widget> tag of the config.xml file:

<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" viewmodes="minimized"> 

This attribute will tell the browser to display the background extension page in a minimized view. The cell size of the Speed ​​Dial at 100% zoom is 256x160 pixels. In addition, we need to add a feature element with an attribute required and a param element:

 <feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature> 

The required attribute of the feature element indicates the need for a speed dial to run the extension. For example, there may be other browsers that are compatible with extensions for Opera, but do not support the Speed ​​Dial. If your extension should work in these conditions, use the value false . If your extension does not work without the Speed ​​Dial, select the value true .

The param element is required and points to the page that should open when you click on the icon in the Speed ​​Dial.

Here is the complete code of the config.xml file for the extension:

 <?xml version="1.0" encoding="utf-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" defaultlocale="en" viewmodes="minimized"> <name short="Simple Clock">Clock Speed Dial Extension</name> <description>This is an example Speed Dial extension showing a simple clock.</description> <author href="http://people.opera.com/danield/">Daniel Davis</author> <icon src="images/icon_64.png"/> <!-- Icon source: http://www.openclipart.org/detail/17552 --> <feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature> </widget> 

Add content to the extension

The next step for us is to create something interesting to show in the Speed ​​Dial window. This is a background extension page, so we have to create an index.html file in the same directory as the config.xml file. For example, we will create a simple digital clock in JavaScript, which displays the time to within a second. To begin with, let's create a basic index.html file with an empty output element:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Clock Speed Dial Extension</title> </head> <body> <output></output> <script src="scripts/background.js"></script> </body> </html> 

Then create the scripts directory with the background.js file, which we refer to in index.html . JS file looks like this:

 window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false); 

The plug-in css ( style.css ) is also simple, but contains a tricky trick:

 * { margin: 0; padding: 0; } html { height: 100%; } /* Use display:table and display:table-cell so that we can use vertical-align:middle */ body { background: #444; color: #fff; display: table; height: 100%; width: 100%; } output { display: table-cell; font-family: monospace; font-size: 10em; text-align: center; text-shadow: 0 0.1em 0.1em #000; vertical-align: middle; } /* Styles here are only applied in a "minimized" state */ @media screen and (view-mode: minimized) { output { font-size: 1.8em; } } 

As you can see, a CSS3 query is used at the end of the file that checks the view-mode: minimized condition for compliance with the view-mode Media Feature specification. In other words, the styles in this section will be applied only if the page is displayed in a minimized state, as in the Speed ​​Dial cell. This is a convenient way to override styles in certain situations without having to use multiple designs.

Completing the extension

As usual, in order to pack our works as an extension, you need to zip all the files in the root directory (but not the directory itself) and change the archive extension from zip to oex . If you have not done so already, then download the clock_SD_extension.oex extension and try.

SpeedDialContext API

After installation, an extension can dynamically control its Speed ​​Dial cell via the SpeedDialContext API. This is a very simple API with two writeable properties: title and url . They are available in a background script through an opera.contexts.speeddial object, like this:

 if (opera.contexts.speeddial) { var sd = opera.contexts.speeddial; sd.title = "My title"; sd.url = "mypage.html"; } 

We can use this feature to improve our expansion, for example, to display a friendly message depending on the time of day. The only file that needs to be edited is background.js :

 window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs, tmp_hours, timeofday; var messages = { "morning": "Good morning!", "afternoon": "Good afternoon!", "evening": "Good evening!", "night": "Shouldn't you be in bed?" }; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); // Make the Speed Dial title display time-related message if (hours !== tmp_hours) { if (hours > 15) { timeofday = 'evening'; } else if (hours > 11) { timeofday = 'afternoon'; } else if (hours > 3) { timeofday = 'morning'; } else { timeofday = 'night'; } if (opera.contexts.speeddial) { opera.contexts.speeddial.title = messages[timeofday]; } tmp_hours = hours; } }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false); 

This is the same file from the first example, but with several additions. Namely:

• the messages object contains messages for different times of the day;
• a duplicate check that executes code when time changes;
• a string that displays the corresponding message from the messages object in the Speed ​​Dial header.

The extension can be downloaded here: friendly_clock_SD_extension.oex . After installation, it will look like this:


Figure 2 : The friendly “clock” extension set in the Speed ​​Dial of the Opera browser.

Conclusion

As you can see, the developers got an additional way to improve their extensions. The examples are simple, but show the potential of extensions for the Speed ​​Dial, if you combine them with smart ideas and web development skills. We hope to see more interesting extensions than just beautiful links to sites, so we are waiting for your creative uses of this API in the Opera extensions repository !

Links

Opera Extensions API: Speed ​​Dial Guide