Активация поддержки магазина google chrome
Во встроенном магазине Opera нет дополнений, которые разработаны для браузера Хром, например Viber и Video downloadHelper. Расширение Install Chrome Extensions позволяет скачивать аддоны из магазина Google и использовать их в обозревателе Опера, расширяя функционал.
Как использовать Install Chrome Extensions:
- Запустите Opera и перейдите в магазин Google Chrome.
- В окне поиска введите название расширения, которого нет в магазине Оперы, например Webgl.
- Для запуска инсталляции кликните по кнопке «Установить».
- Браузер откроет окно, в котором нужно кликнуть по кнопке «Установить» еще раз.
- Подтвердите действие.
Иконка дополнения появится на панели сверху.
Важно. Не все расширения от 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
файле
, они находятся в папке 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 доступен сразу после установки браузера и не требует регистрации аккаунта. Для перехода потребуется подключение к интернету.
Для перехода в магазин:
- Нажмите на иконку Опера для отображения опций.
- Кликните по строчке «Расширения».
- В окне отображены все установленные расширения для браузера.
- Для перехода в магазин нажмите на ссылку «Добавить расширения».
- Веб-браузер перейдет в магазин моментально.
Важно. Дополнения разделены по группам, которые отображаются на главном окне магазина. Для поиска по названию используйте окошко «Поиск дополнений».
Как установить дополнение
Чтобы установить расширение не нужно создавать аккаунт на официальном сайте Оперы. Для загрузки потребуется найти дополнение и кликнуть по клавише «Включить в Opera».
Для поиска дополнений:
- Перейдите в магазин Opera addons.
- Установите курсор в поисковое окно и введите название расширения, например Steam inventory helper.
- Браузер автоматически выполнит поиск и отобразит все подходящие варианты.
Важно. При поиске по названию браузер автоматически предлагает варианты. Например, при вводе Ears audio toolkit поисковая система отобразит все дополнения, связанные с настройкой звука и доступу к музыке.
Как установить дополнение:
- Найдите расширение в списке или с помощью поиска.
- Кликните по иконке левой кнопкой мыши.
- Нажмите на кнопку «Добавить в Opera».
- Подтвердите действие с помощью кнопки «Ок».
Важно. Время установки зависит от мощности компьютера и скорости интернета. Например, расширение Tampermonkey занимает не более двух мегабайт на жестком диске и инсталлируется за несколько секунд.
Обзор виджетов для opera — лайфхакер
Opera в России является вторым по популярности браузером
согласно
данным «Яндекса». Возможности программы нельзя расширить установкой расширений, как это сделано в Mozilla Firefox, но зато можно попробовать виджеты. В отличие от аддонов Firefox, они не изменяют сам браузер, поэтому новых фич не появится. С другой стороны, обновление Opera не приводит к тому, что какой-то из виджетов перестал работать, что случается иногда с «Мозиллой».
Для «Оперы» написано множество виджетов, но по большей части они бесполезны. Как правило, это либо часы, либо мини-игры. Мы постарались найти наиболее интересные образцы.
Помощники для прослушивания музыки и просмотра, трансляции видео
Расширить функционал приложения можно с помощью аддона Radio player, который оснащен большим набором радиостанций и проигрывает музыку в фоновом режиме.
Удаление и отключение расширений
Как отключить дополнение:
- Нажмите CTRL SHIFT E для быстрого перехода в окно управления расширениями.
- Кликните по кнопке «Отключить».
- Аддон или виджет отключится без дополнительного подтверждения.
Как удалить дополнение:
- Перейдите в окно управления расширениями.
- Кликните по кнопке «Подробнее» в блоке аддона, который нужно удалить.
- Пролистайте страницу до конца вниз и нажмите на строку удаления.
- Подтвердите действие.
Важно. Для продолжения работы не требуется перезапуск браузера. Удаление занимает несколько секунд.
Выводы
Дополнения для Opera позволяют расширить функционал браузера, подключить блокировку рекламы, VPN, радиовещание, виджеты. Для загрузки из встроенного магазина не нужно проходить регистрацию на официальном сайте. Поддержка магазина Google активируется после установки Install Chrome Extensions.
