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


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

Введение

Расширения Opera основаны на спецификации W3C widget. Разработчики могут создавать расширения 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="freeron@ya.ru">Вадим Санько</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 рекомендует использовать иконку 64×64 пикселей. Эта иконка будет использоваться в менеджере расширений и на сайте расширений Opera.

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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 — путь к иконке, используемой на кнопке. Если размер указанной иконки не 18×18 пикселей, то она будет масштабирована до этого размера.
  • 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!

Исходники

Оригинал / Вольный перевод: true-coder

  • Den

    http://otvety.google.ru/otvety/thread?tid=32f9cad9bc65f1c5
    Автор, помогите пожалуйста.

    Цитирую:

    Всем привет! Собственно захотелось русифицировать расширение. После русификации, запаковки в архив, изменения расширения на .oex, при установке пишет: «Не работоспособное расширение». Еще пробовал открывать готовое расширение .oex и изменять всего-лишь одно слово, например resizeme на resize или изменить — Один и тот-же результат. В чем проблема? Буду очень благодарен помощи 🙂