Информация к новости
  • Просмотров: 1455
  • Автор: sulicompany
  • Дата: 16-12-2012, 00:17
 (голосов: 0)
16-12-2012, 00:17

Пишем расширение для Opera

Категория: Программирование » HTML


 

 

 


Всем привет! Начиная с 11 версии в браузереOperaпоявилась очень нужная фишка —расширения, позволяющие увеличить функциональность самого браузера, не открывая сторонних приложений, как это делали виджеты. В этом уроке я расскажу,как создать простейшее расширение для Opera.

Введение

Расширения Operaоснованы на спецификации

. Разработчики могут создаватьрасширения Opera, используя имеющиеся навыки для создания сайтов и веб-приложений (HTML, javascript, CSS). Кроме того, Opera выпустилаAPI для упрощения создания расширений.

 

Существует несколько типов расширений Opera:

  • Кнопка на панели инструментов: основной тип расширений, который добавляет кнопку расширения на панель инструментов Opera.
  • Кнопка + Выпадающее окошко: кнопка на панели инструментов, при нажатии на которую всплывает окошко. Именно такое расширение мы будем писать сегодня.
  • Кнопка + надпись: часто используется для отображения количества элементов, как, например, количество непрочитанных писем или сообщений.
  • Работа с окнами и вкладками: Opera предоставляет разработчикам возможность работать с окнами и вкладками.
  • Фоновые расширения: при активации работают в фоне и выполняют определенные функции на веб-страницах.

Шаг 0: Приступая к работе

Сегодня мы создадим небольшое расширение, которое добавит кнопку True-Coder на панель инструментов Opera. По нажатию на кнопку будет всплывать окошко, содержащее категории моего блога и поиск по нему.

Шаг 1: Создание конфигурационного файла расширения

Для начала создадим конфигурационный файл, содержащийметаданные, описывающие расширение. Здесь можно задать название расширения, описание, автора и иконку.

Создаем XML-файл с именемconfig.xmlи добавляем в него следующий код:

 

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets"><name>True-Coder</name>
<description>Быстрый доступ к true-coder.ru</description>
<author href="http://true-coder.ru" email="[email protected]">Вадим Санько</author><icon src="icons/Icon-64.png"/></widget>

 

Тег widget является корневым тегом файлаconfig.xml. Он содержит 4 дочерних тега (name, description, author и icon).

  • Тегnameсодержит имя расширения (True-Coder).
  • Тегdescriptionсодержит описание расширения.
  • Тегомauthorмы вводим имя автора расширения (ваше имя). Этот тег также может принимать 2 параметра: href (ссылка на страницу автора) и email (почта автора).
  • Параметром src тегаiconуказываем путь к иконке расширения. Opera рекомендует использовать иконку 64x64 пикселей. Эта иконка будет использоваться в менеджере расширений и на сайте расширений Opera.

Шаг 2: Создаем файл index.html

Файлindex.html— это вторая обязательная часть расширения Opera (первая обязательная часть — файлconfig.xml). Этот файл представляет собой обычный html-шаблон, создающий элементы интерфейса расширения. НО единственная особенность — тег body остается пустым. Как же так? - спросите вы. Сейчас расскажу:)

Давайте создадим файлindex.htmlи поместим в него следующий код:

 

1
2
3
4
5
6
7
8
9
1
<!DOCTYPE html><html lang="ru"><head><script>  
       window.addEventListener("load",function(){var theButton;var ToolbarUIItemProperties ={  
            title:"True-Coder",  
            icon:"icon-18.png",  
            popup:{href:"popup.html", width:300, height:410}}  
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);  
        opera.contexts.toolbar.addItem(theButton);},false);</script></head><body></body></html>

 

Данный скрипт создасткнопку на панели инструментов и выпадающее окошко, которое будет появляться по нажатию на эту кнопку.

В переменнойToolbarUIItemPropertiesмы задаемсвойства кнопки. Можно задать следующие 6 свойств:

  • disabled — определяет, отображать кнопку или нет. По умолчанию равно true (т.е. не отображать), поэтому мы пишем false (15-я строка).
  • title — подсказка, всплывающая по наведению на кнопку.
  • icon — путь к иконке, используемой на кнопке. Если размер указанной иконки не 18x18 пикселей, то она будет масштабирована до этого размера.
  • popup — задает файл, из которого будем брать само содержимое окна (popup.html), а также размеры всплывающего окна.
  • onclick — функция, которая будет выполняться при нажатии на кнопку. Мы не будем использовать это свойство для данного расширения.
  • OnRemove. Функция, которая будет выполняться при удалении кнопки расширения. Это свойство мы также не будем использовать.

После того как мы определили свойства кнопки в переменнойToolbarUIItemProperties, мы создаем саму кнопку и применим к ней заданные свойства с помощью методаcreateItem:

theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

И, наконец, добавляем кнопку на панель инструментов Opera с помощью методаaddItem:

opera.contexts.toolbar.addItem(theButton);

Итак, с файломindex.htmlразобрались, идем дальше.

Шаг 3: Создаем всплывающее окно

Теперь создадим само содержимое нашего расширения, которое будет появляться во всплывающем окошке. Это обычный html-файл, имя которого мы прописали в параметреpopupв предыдущем шаге. В нем можно использовать HTML, CSS, javascript или любые другие технологии создания веб-страниц.

Создадим файл с именемpopup.htmlи добавим в body следующий код:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input id="Text1" type="text" style="width: 170px" />
<input id="Button1" type="button" value="Найти" onclick="SearchonTrueCoder()" /><br />
<br /><ul><li><a href="http://true-coder.ru/" target="_blank">Главная</a></li><li>
<a href="http://true-coder.ru/category/html" target="_blank">HTML</a></li><li>
<a href="http://true-coder.ru/category/javascript" target="_blank">javascript</a></li><li>
<a href="http://true-coder.ru/category/php" target="_blank">PHP</a></li><li>
<a href="http://true-coder.ru/category/seo" target="_blank">SEO и продвижение</a></li><li>
<a href="http://true-coder.ru/category/wordpress" target="_blank">WordPress</a></li><li>
<a href="http://true-coder.ru/category/design" target="_blank">Дизайн</a></li><li>
<a href="http://true-coder.ru/category/other" target="_blank">Общая рубрика</a></li><li>
<a href="http://true-coder.ru/category/site-programming" target="_blank">Сайт с нуля</a></li><li>
<a href="http://true-coder.ru/category/services" target="_blank">Сервисы</a></li><li>
<a href="http://true-coder.ru/category/photoshop-tutorials" target="_blank">Уроки Фотошоп</a></li><li>
<a href="http://true-coder.ru/category/freebie" target="_blank">Халява</a></li></ul>

 

Для задания стиля элементов всплывающего окна добавим следующую таблицу стилей вhead:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>  
  ul {list-style-type:none;margin:0;padding:0;}  
 
  li a {display:block;padding:5px;color:#cf0000;text-decoration:none;}
 
  li a:hover {color:#000;background-color: lightgrey;
  border-radius:3px;}
</style>

 

Далее вheadдобавляем javascript функцию для обработки нажатия кнопкиButton1:

 

1
2
3
4
5
6
<script>function SearchonTrueCoder(){var search = escape(document.getElementById("Text1").value);
window.open("http://true-coder.ru/?s="+ search);}</script>

 

Итоге, файлpopup.htmlвыглядит следующим образом:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>  
<html lang="ru">  
<head>  
 <title>True-Coder</title>  
 <style>
  ul {  
  list-style-type:none;  
  margin:0;  
  padding:0;  
  }  
 
  li a {
  display: block;
  padding: 5px;
  color: #cf0000;  
  text-decoration: none;
  }
 
  li a:hover {
  color: #000;
  background-color: lightgrey;
  border-radius: 3px;
  }
  </style>  
 
  <script>  
  function SearchonTrueCoder() {
  var search = escape(document.getElementById("Text1").value);
  window.open("http://true-coder.ru/?s=" + search);
  }
  </script>  
 
</head>  
<body>  
 
    <input id="Text1" type="text" style="width: 170px" />  
    <input id="Button1" type="button" value="Найти" onclick="SearchonTrueCoder()" />  
    <br /><br />  
 
    <ul>  
       <li><a href="http://true-coder.ru/" target="_blank">Главная</a> </li>  
       <li><a href="http://true-coder.ru/category/html" target="_blank">HTML</a></li>  
       <li><a href="http://true-coder.ru/category/javascript" target="_blank">javascript</a></li>  
       <li><a href="http://true-coder.ru/category/php" target="_blank">PHP</a> </li>  
       <li><a href="http://true-coder.ru/category/seo" target="_blank">SEO и продвижение</a> </li>  
       <li><a href="http://true-coder.ru/category/wordpress" target="_blank">WordPress</a>  </li>  
       <li><a href="http://true-coder.ru/category/design" target="_blank">Дизайн</a> </li>  
       <li><a href="http://true-coder.ru/category/other" target="_blank">Общая рубрика</a></li>  
       <li><a href="http://true-coder.ru/category/site-programming" target="_blank">Сайт с нуля</a></li>  
       <li><a href="http://true-coder.ru/category/services" target="_blank">Сервисы</a></li>  
       <li><a href="http://true-coder.ru/category/photoshop-tutorials" target="_blank">Уроки Фотошоп</a> </li>  
       <li><a href="http://true-coder.ru/category/freebie" target="_blank">Халява</a></li>  
    </ul>  
 
</body>  
</html>

 

Шаг 4: Упаковка и установка расширения

Угу, расширение готово!:)Все, что осталось сделать — это собрать все файлы и упаковать в zip-архив.

После этого пужно переименовать формат архива с.zipна.oex.

Вот, что у нас получилось:

В открытый доступ расширение загружается

.

 

Чтобы установить расширение себе сразу после создания, достаточно просто перетащить его в Оперу и подтвердить установку.

Заключение

Функциональность расширений Opera может варьироваться от простейших до чрезвычайно сложных. Надеюсь,

после прочтения данной статьи, вы получили базовые навыки создания расширений для Opera.

Happy Coding!