Вступление
В 2007 году мы представили миру Speed Dial. Сегодня вы можете найти реализации этого популярного концепта почти во всех ведущих браузерах. Но как бы мы этим не гордились, какими бы родителями мы были, если бы не помогали нашему детищу расти и изучать новые способности? В релизе Opera 11.10 мы улучшили внешний вид и UX нашего Speed Dial и добавили возможность разработчикам контролировать то, как будет выглядеть их сайт в ячейках Speed Dial. В Opera 11.50 мы делаем ещё один шаг вперёд вместе с расширениями для Speed Dial.
Точно так же как вы можете расширить возможности своего браузера с помощью расширений для Opera, вы можете настраивать и расширять возможности Speed Dial, чтобы сделать его ещё более удобным. Вместо того, чтобы быть ограниченным отображением иконок или скриншотов страниц, Speed Dial теперь может отображать «живой» контент, и эта статья покажет вам, как это сделать.
Замечание: Чтобы опробовать этот пример, вам необходима Opera 11.50 и пример расширения для Speed Dial: скачать наши часы для Speed Dial.
Основы
Для сохранения совместимости с обычными расширениями для Opera расширения для Speed Dial используют тот же формат и структуру, но с некоторыми дополнениями. Другими словами, следующие мелкие добавления в код файла config.xml могут превратить существующее расширение для Opera в расширение для Speed Dial:
- Элемент <feature> с атрибутом name и значением opera:speeddial, который превращает расширение в расширение для Speed Dial.
- Атрибут viewmodes тэга <widget> со значением minimized: показывает фоновую страницу в ячейке Speed Dial.
Обратите внимание, на данный момент расширение не может одновременно использовать Speed Dial и панель инструментов браузера. Другими словами, расширение с кнопкой на панели браузера не может одновременно быть расширением для Speed Dial в текущей реализации.
Описываем расширение для Speed Dial в файле config.xml
Давайте применим теорию на практике и пошагово создадим тестовое расширение. Чтобы просмотреть следующие фрагменты кода вы можете скачать наше расширение для Speed Dial — часы и взглянуть на исходный код внутри пакета. Рисунок 1 показывает, как будет выглядеть расширение в итоге.
Рисунок 1: Расширение «часы» установленное в Speed Dial браузера Opera.
В то время как обычные ячейки Speed Dial отображают скриншот веб-страницы, расширение для Speed Dial отображает стартовую (или фоновую) страницу расширения — это файл index.html по умолчанию. Чтобы задействовать это, мы, в первую очередь, должны добавить в тэг <widget> файла config.xml атрибут viewmodes со значением minimized:
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" viewmodes="minimized">Этот атрибут скажет браузеру отображать фоновую страницу расширения в минимизированном виде. Размер ячейки Speed Dial при 100% зуме — 256х160 пикселей. В дополнение, мы должны добавить элемент feature с атрибутом required и элементом param:
<feature name="opera:speeddial" required="false">
<param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>Атрибут required элемента feature указывает на необходимость Speed Dial для запуска расширения. Для примера, могут быть другие браузеры, которые совместимы с расширениями для Opera, но не поддерживают Speed Dial. Если ваше расширение должно работать в таких условиях, используйте значение false. Если же ваше расширение не работает без Speed Dial — выбирайте значение true.
Элемент param обязателен и указывает на страницу, которая должна открыться при клике на иконку в Speed Dial.
Вот полный код файла config.xml для расширения:
<?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>Добавляем контент в расширение
Следующим шагом для нас будет создание чего-нибудь интересного для показа в окне Speed Dial. Это фоновая страница расширения, поэтому мы должны создать файл index.html в той же директории, что и файл config.xml. Для примера, мы сделаем простые цифровые часы на JavaScript, которые отображают время с точностью до секунды. Для начала создадим базовый файл index.html с пустым элементом output:
<!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>Затем создадим директорию scripts с файлом background.js, на который мы ссылаемся в index.html. 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;
// 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);Подключаемая css (style.css) также проста, но содержит хитрый трюк:
* {
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;
}
}Как вы можете видеть, используется CSS3-запрос в конце файла, который проверяет условие view-mode: minimized на соответствие спецификации view-mode Media Feature. Другими словами, стили в этой секции будут применены только если страница отображается в минимизированном состоянии, как в ячейке Speed Dial. Это удобный способ переопределения стилей в некоторых ситуациях без необходимости использовать несколько дизайнов.
Завершаем расширение
Как обычно, чтобы упаковать наши труды как расширение, нужно зазиповать все файлы в корневой директории (но не саму директорию) и сменить архиву расширение с zip на oex. Если вы ещё не сделали этого, то скачайте расширение clock_SD_extension.oex и попробуйте.
SpeedDialContext API
После установки расширение может динамически контролировать свою ячейку Speed Dial через SpeedDialContext API. Это очень простое API с двумя записываемыми свойствами: title и url. Они доступны в фоновом скрипте через объект opera.contexts.speeddial, например так:
if (opera.contexts.speeddial) {
var sd = opera.contexts.speeddial;
sd.title = "My title";
sd.url = "mypage.html";
}Мы можем использовать эту возможность для улучшения нашего расширения, например для отображения дружеского сообщения в зависимости от времени суток. Единственный файл, который необходимо отредактировать, это 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);Это тот же самый файл из первого примера, но с несколькими дополнениями. А именно:
- объект messages содержит сообщения для различного времени суток;
- повторяющаяся проверка, выполняющая код когда время меняется;
- строка, которая отображает соответствующее сообщение из объекта messages в заголовке Speed Dial.
Расширение может быть скачано здесь: friendly_clock_SD_extension.oex. После установки оно будет выглядеть так:
Рисунок 2: Дружеское расширение «часы», установленное в Speed Dial браузера Opera.
Заключение
Как вы видите, разработчики получили дополнительный способ улучшить свои расширения. Приведённые примеры просты, но показывают потенциал расширений для Speed Dial, если объединить их с умными идеями и навыками веб-разработки. Мы надеемся увидеть более интересные расширения, чем просто красивые ссылки на сайты, так что мы ждём ваших креативных использований этого API в репозитории расширений для Opera!
Ссылки
API расширений для Opera: Руководство по Speed Dial
