Делаем свой первый виджет для opera. / Хабр

Делаем свой первый виджет для opera. / Хабр Гаджет

Активация поддержки магазина google chrome

Во встроенном магазине Opera нет дополнений, которые разработаны для браузера Хром, например Viber и Video downloadHelper. Расширение Install Chrome Extensions позволяет скачивать аддоны из магазина Google и использовать их в обозревателе Опера, расширяя функционал.

Как использовать Install Chrome Extensions:

  1. Запустите Opera и перейдите в магазин Google Chrome.Магазин Хром Opera
  2. В окне поиска введите название расширения, которого нет в магазине Оперы, например Webgl.Поиск Opera
  3. Для запуска инсталляции кликните по кнопке «Установить».Установить Opera
  4. Браузер откроет окно, в котором нужно кликнуть по кнопке «Установить» еще раз.Установка Opera
  5. Подтвердите действие.Подтверждение установки Opera

Иконка дополнения появится на панели сверху.

Важно. Не все расширения от Chrome полностью совместимы с веб-браузером Opera. Если в процессе работы появляются сообщения об ошибке, то расширение лучше отключить или удалить.

Делаем свой первый виджет для opera.

В этой статье мы рассмотрим создание простого виджета для оперы.

Что нужно, чтобы начать:

Самый-самый первый виджет.

Сначала необходимо создать файл index.html. Это то, что люди будут видеть при открытии виджета.

 <!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html> </code>

Настройки виджета.

Далее мы посмотрим, как добавить настройки к нашему виджету. Все настройки прописываются в файле под именем config.xml и содержат информацию о постоянных свойствах виджета. Основные свойсвтва, которые должны быть описанны в этом файле:
Имя виджета.
Размеры виджета.
Информация об авторе.
Уникальный ID для виджета. ID состоит из трех частей: Имя сервера, имя виджета, и дата его последнего обновления в формате YYYY-MM (вы можете также использовать формат YYYY-MM-DD, если вы планируете обновлять виджет чаще чем раз в месяц).
Также опционально добавляется информация о том, с какими доменами работает виджет.

Создайте новый файл config.xml в той же директории, где вы создали до этого index.html. Вставьте туда этот код и сохраните.

<?xml version='1.0' encoding='UTF-8'?>
<widget>
  <widgetname>Hello World!</widgetname>
  <description>Demo widget from the Hello World tutorial.</description>
  <width>440</width>
  <height>200</height>
  <author>
    <name>John Doe</name>
    <email>john.doe@example.com</email>
    <link>http://acme-widget.example.com</link>
    <organization>Acme Examples, Inc.</organization>
  </author>
  <id>
    <host>example.com</host>
    <name>HelloWorld</name>
    <revised>2008-01</revised>
  </id>
</widget> 

Первый запуск вашего виджета.

Перетаскиваем config.xml в браузер, или открываем его в браузере. В результате мы получаем что-то типа вот этого:

первый виджет

Могу вас поздравить. Первый виджет готов.

Делаем лицо виджета.

В данной форме, фоновый цвет виджета – прозрачный, и для стилизации используется стиль по умолчанию. Не порядок. Неободимо придать нашему виджету свой собственный облик.
Перво-наперво вы должны добавить объявление стилей в свой index.html. В конце концов он должен у вас стать похожим на этот:

 <!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="style/helloworld.css">
  </head>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="content">
        <h1>Hello World!</h1>
      </div>
      <div id="footer">Powered by Opera</div>
    </div>
  </body>
</html> </code>

Теперь время создать файл css со стилями виджета. Создайте папку “style”, где вы будете хранить стили, а в ней, файл – “helloworld.css”. Скопируйте представленный код в этот файл.

 /** Basic styles **/

body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 16px;
}

h1 {
  margin: 0;
  font-size: 1.1em;
  padding: 7px 0 0 10px;
  font-weight: normal;
}

h2{
    font-weight: normal;
    font-size: 1.1em;
    margin: 0px;
}

/** Structure **/

#container {
  width: 429px;
}

#header {
  background-image: url(../images/back_top.png);
  padding: 4px 10px 0px 10px;
  height: 35px;
}

#content {
  background-image: url(../images/back_center.png);
  color: #333;
}

.view{
    padding: 10px 10px 10px 20px;
    height: 60px;
    max-height: 60px;
    max-width: 393px;
    overflow: auto;
    -apple-dashboard-region:dashboardregion(control rectangle 0px 0px 0px 0px);
}

#footer {
  background-image: url(../images/back_bottom.png);
  height: 23px;
  padding: 2px 0 0 20px;
  font-size: 0.6em;
  text-decoration: underline;
  color: #dd2222;
}
</code>

Вы могли заметить, что в этом виджете мы используем несколько фоновых изображений. Мы должны добавить их в папку виджета. Изображения вы можете найти в этом zip

Гаджет:  Топ 10 программ для сканирования документов

файле

, они находятся в папке images, скопируйте эту папку в корневую папку вашего виджета.

Все стили на своих местах, так что попробуйте запустить свой виджет еще раз, таким же образом, как и в прошлый раз. Он должен выглядить вот так:

к виджету применен стиль.

Замечания о стилях виджета:
Старайтесь делать виджеты не для красоты, а для пользователей.

Добавляем интерактивность.

У вас сейчас есть полностью рабочий виджет, но он ничего не делает. Сейчас мы добавим кнопку настройки и закрытия виджета.

Снова откройте index.html и замените его содержание на:

 <!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="style/helloworld.css">
    <script type="text/javascript" src="script/helloworld.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <div id="controlbuttons">
          <button id="flipbutton" class="controlbutton" type="button"></button>
          <button id="closebutton" class="controlbutton" type="button"></button>
        </div>
        <h1>Hello World!</h1>
      </div>
      <div id="content">
        <div id="front" class="view">
          <h2 id="hellotext">Welcome to the world of Opera Widgets!</h2>
        </div>
        <div id="config" class="view">
          <h2>Hello World! Configuration</h2>
          <p>
             <label for="frontlabel">Text to display</label>
             <input id="frontlabel" type="text" size="25">
             <button id="updatebutton" type="button">Update</button>
          </p>
        </div>
      </div>
      <div id="footer">Powered by Opera</div>
    </div>
  </body>
</html> </code>

Мы добавили:

Теперь от вас требуется обновить файл стилей и добавить яваскрипт.
Стиль кнопок закрытия и изменения состояния.

Добавьте следующий код в helloworld.css, ниже того кода, который там был до этого. Этот код управляет отображением управляющих кнопок.

 /* Hide the configuration view by default */ 
#config {
  display: none;
}

/** Button styles **/

#controlbuttons {
  float: right;
}

.controlbutton {
  opacity: 0.0;
  overflow: hidden;
  height: 30px;
  width: 30px;
  background-position: left top;
  border: 0;
}

#flipbutton {
  background: transparent url(../images/btn_config.png) scroll no-repeat 0 0;
}

#closebutton {
  background: transparent url(../images/btn_close.png) scroll no-repeat 0 0;
}

/** Button effects **/

#container:hover.controlButton {
  opacity: 0.3;
}

#container .controlButton:hover{
  opacity: 1.0;
}

#container .controlButton:active{
  opacity: 1.0;
  background-position: left bottom;
}</code>

Рекоммендации по использованию управляющих кнопок.

Гаджет:  Читать онлайн книгу «Гаджет» автора Сергей Лукьяненко

Настало время еще раз проверить работу нашего виджета. У вас должно отобразиться что-то типа этого:

добавили кнопки.

Добавления обработчика к кнопкам.

Следующим шагом будет добавления функциональности кнопки смены состояния, чтобы виджет показывал его другое состояние при нажатии в зависимости от состояния кнопкиr activated. Этот обработчик содержит немного просто JavaScript кода, и все, что вам надо – это поместить код в нужное место. Посмотрите в файл с ресурсами, из которого вы скопировали картинки, и скопируйте оттуда в корневую папку виджета helloworld.js.

Содержание файла:

 
// создаем область имен для функций виджета,
// чтобы избежать засорения глобальной области имен
var helloWorld = helloWorld || {};

// функция для смены состояния виджета между настройкой и работой
helloWorld.flip = function ( e )
{
    var display = document.getElementById('front').style.display;
    if ( display == 'block' || display == '' )
    {
        document.getElementById('front').style.display = "none";
        document.getElementById('config').style.display = "block";
    }
    else
    {
        document.getElementById('config').style.display = "none";
        document.getElementById('front').style.display = "block";
    }
}

// инициализация виджета
window.addEventListener( 'load' , function(ev)
{
    // add behavior to the flip button
    document.getElementById('flipbutton').addEventListener('click',function(ev){
        helloWorld.flip();
    }, false);

    // обработчик кнопки закрытия
    document.getElementById('closebutton').addEventListener('click',function(ev){
        window.close();
    }, false);

    // этой кнопки нет, но на всякий случай оставил ее.
    document.getElementById('wocbutton').addEventListener('click', function(ev){
      widget.openURL('http://widgets.opera.com');
    }, false);

    // обработчик для кнопки в настройках. Изменяет текст на виджете, и
    // возвращает виджет в состояние работы
    document.getElementById('updatebutton').addEventListener('click',function(ev){
        document.getElementById('hellotext').textContent = 
            document.getElementById('frontlabel').value;
        helloWorld.flip();
    },false);
  
    // присваивает начальное значение полю для ввода текста в настройках
    document.getElementById('frontlabel').setAttribute( 'value',
        document.getElementById('hellotext').textContent );
},false);  

В этом коде мы помещаем функции виджета в его объект или область имен. Таким образом, функция не будет переопределенна, если она уже существует. Мы советуем вам использовать глобальную область видимости как можно реже. Вторая половина кода – это функция которая запускается, при запуске виджета, и устанавливает обработчики для объектов.

Еще раз запускаем виджет, и получаем результат, как на картинке:

финальный результат.

Упаковка виджета.

Виджеты упаковываются в обычный .zip файл, расширение которого меняется на .wgt. Все файлы, используемые вашим виджетом, должны храниться внутри этого архива.

Распространение вашего виджета

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

В этой статье мы рассмотрели создание простейшего виджета. И убедились в том, что это совсем не сложно. А также создали наш первый виджет.
П.С. Я немного сократил оригинал, а то слишком много воды переводить.

Как перейти в магазин opera

Магазин расширений Opera доступен сразу после установки браузера и не требует регистрации аккаунта. Для перехода потребуется подключение к интернету.

Для перехода в магазин:

  1. Нажмите на иконку Опера для отображения опций.Опции Opera
  2. Кликните по строчке «Расширения».Расширения Opera
  3. В окне отображены все установленные расширения для браузера.Все расширения Opera
  4. Для перехода в магазин нажмите на ссылку «Добавить расширения».Добавить Opera
  5. Веб-браузер перейдет в магазин моментально.Магазин с расширениями Opera
Гаджет:  Диваны и кресла MOON - каталог цен, где купить в интернет-магазинах: продажа, характеристики, описания, сравнение | E-Katalog

Важно. Дополнения разделены по группам, которые отображаются на главном окне магазина. Для поиска по названию используйте окошко «Поиск дополнений».

Как установить дополнение

Чтобы установить расширение не нужно создавать аккаунт на официальном сайте Оперы. Для загрузки потребуется найти дополнение и кликнуть по клавише «Включить в Opera».

Для поиска дополнений:

  1. Перейдите в магазин Opera addons.
  2. Установите курсор в поисковое окно и введите название расширения, например Steam inventory helper.Поиск расширений Opera
  3. Браузер автоматически выполнит поиск и отобразит все подходящие варианты.

Важно. При поиске по названию браузер автоматически предлагает варианты. Например, при вводе Ears audio toolkit поисковая система отобразит все дополнения, связанные с настройкой звука и доступу к музыке.

Как установить дополнение:

  1. Найдите расширение в списке или с помощью поиска.
  2. Кликните по иконке левой кнопкой мыши.Дополнение Opera
  3. Нажмите на кнопку «Добавить в Opera».Добавить в Opera
  4. Подтвердите действие с помощью кнопки «Ок».Подтверждение Opera

Важно. Время установки зависит от мощности компьютера и скорости интернета. Например, расширение Tampermonkey занимает не более двух мегабайт на жестком диске и инсталлируется за несколько секунд.

Обзор виджетов для opera — лайфхакер

Opera в России является вторым по популярности браузером

согласно

данным «Яндекса». Возможности программы нельзя расширить установкой расширений, как это сделано в Mozilla Firefox, но зато можно попробовать виджеты. В отличие от аддонов Firefox, они не изменяют сам браузер, поэтому новых фич не появится. С другой стороны, обновление Opera не приводит к тому, что какой-то из виджетов перестал работать, что случается иногда с «Мозиллой».

Для «Оперы» написано множество виджетов, но по большей части они бесполезны. Как правило, это либо часы, либо мини-игры. Мы постарались найти наиболее интересные образцы.

Помощники для прослушивания музыки и просмотра, трансляции видео

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

Удаление и отключение расширений

Как отключить дополнение:

  1. Нажмите CTRL SHIFT E для быстрого перехода в окно управления расширениями.
  2. Кликните по кнопке «Отключить».Отключить Opera
  3. Аддон или виджет отключится без дополнительного подтверждения.

Как удалить дополнение:

  1. Перейдите в окно управления расширениями.
  2. Кликните по кнопке «Подробнее» в блоке аддона, который нужно удалить.Подробнее Opera
  3. Пролистайте страницу до конца вниз и нажмите на строку удаления.Удаление Opera
  4. Подтвердите действие.Удалить Opera

Важно. Для продолжения работы не требуется перезапуск браузера. Удаление занимает несколько секунд.

Выводы

Дополнения для Opera позволяют расширить функционал браузера, подключить блокировку рекламы, VPN, радиовещание, виджеты. Для загрузки из встроенного магазина не нужно проходить регистрацию на официальном сайте. Поддержка магазина Google активируется после установки Install Chrome Extensions.

Оцените статью
GadgetManiac
Добавить комментарий