Ликиликс

  сайтостроение программирование

  

Как сделать расширение для оперы

Как сделать расширение для оперы и добавить его в каталог.

На днях понадобилось сделать своё расширение для Оперы и выложить его в общий каталог на странице https://addons.opera.com/ru/ чтобы оно было в поиске и пользователи могли его устанавливать, так вот давайте подробно разберём как это сделать.

Что нужно чтобы сделать своё расширение для оперы

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

1). Создайте папку под именем icons
2). В папку вложите две картинки icon-18.png и icon-64.png (128x128)
3). Создайте текстовый документ и сохраните его под именем и расширением config.xml

Конфигурация config.xml

Составляя файл config.xml нужно быть предельно аккуратным так как именно на него смотрят модераторы Каталога расширений для оперы, откройте его снова блокнотом и вставьте в него следующее.

<?xml version='1.1' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets" version="0.4">
<name xml:lang="ru" short="название расширения">название расширения</name>
<icon src="icons/icon-64.png"/>
<access origin="ссылка на сайт разработки вашего расширения" subdomains="true"/>
<author>DreamStore</author>

<description xml:lang="ru">название расширения</description>
</widget>

Тут нужно подправить 4 строчки

2-я строка - Нужно указать версию расширения просто замените 0.4 на 0.1
3-я строка - Напишите название вашего расширения которое будет отображаться в каталоге Оперы
5-я строка - Сдесь место для ссылки вашего сайта (если сайта нет укажите страницу в контакте) это будет указывать что именно вы правообладатель этого расширения
7-я строка - Напишите название вашего расширения которое будет отображаться в каталоге Оперы

Генерация открывающегося окна

Теперь создайте файл index.html и вставьте в него следующее

Содержимое index.html

<!doctype html>
<html lang="ru">
 <head>
   <script>
    window.addEventListener("load", function(){
    var theButton;
    var ToolbarUIItemProperties = {
     title: "название расширения",
     icon: "icons/icon-18.png",
     popup: {
      href: "
http://hrome.sms-go.ru/opera/index.html",
      width: 485,
      height: 321
     }
    }
    theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
    opera.contexts.toolbar.addItem(theButton);
   }, false);
  </script>
 </head>
 <body>
 </body>
</html>
index.html генерирует появляющееся окно при нажатии на иконку, вы наверное заметили что там стоит ссылка http://hrome.sms-go.ru/opera/index.html, это просто я предпочёл подгружать расширение со своего сервера, а не с локального компьютера пользователей. Для того чтобы грузить расширение с локального ПК для теста замените ссылку на home.html и создайте файл home.html с любым содержимым.
Итак вернёмся к index.html в этом файле подправьте 4 строчки

8-я строчка  Введите название вашего расширения
11-я строчка Для теста пока можете оставить как есть
12 и 13-я строчки Высота и ширина появляющегося окна

Теперь подходим к заключительному этапу, выделите все файлы и сожмите в формат ZIP когда произойдёт архивация в ручном режиме исправьте ZIP на OEX

При запуске OEX расширение добавится в ваш браузер

Как и обещал в начале статьи выкладываю исходный код расширения для браузера Opera скачать
Чтобы добавить расширение в общий каталог зайдите на страницу https://addons.opera.com/ru/, зарегистрируйтесь, в верхнем правом углу появится ссылка Мои загрузки. Модерация обычно проходит 3 - 5 дней.


 

Подпишитесь на новые статьи через twitter

 

 
Copyright © My Company 2009-2013      обратная связькарта сайта