Pull to refresh

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

Reading time 4 min
Views 12K
Original author: David Storey
Вступление

Эта статья проведёт вас через базовые шаги для создания вашего первого расширения для Opera. Вы создадите кнопку на панели, при нажатии на которую будет открываться всплывающее окно с сообщением «Hello World!». Расширения для Opera пишутся с помощью общих открытых веб-стандартов, поэтому всё, что вам нужно чтобы начать, это Opera 11 и ваш текстовый редактор или IDE.

Конфигурирование расширения.

Для начала, необходимо создать конфигурационный файл расширения, который содержит метаданные, описывающие расширение. Там содержится информация о названии расширения, его авторе и иконке для менеджера расширений. Расширения для Opera использую формат W3C Widgets, который может быть знаком вам по Opera Widgets.

Создадим скелет конфигурационного файла:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <widget xmlns="http://www.w3.org/ns/widgets">
  3.   <name>Hello extensions!</name>
  4.   <description>A simple hello world example</description>
  5.    <author href="yourURL" email="yourEMail">Enter your name here</author>
  6.    <icon src="hello.png"/>
  7. </widget>
* This source code was highlighted with Source Code Highlighter.


Сохраним его под названием config.xml.

Создание иконки расширения

Наверняка, вы заметили описание иконки в конфигурационном файле. Указанная иконка используется в менеджере расширений и на сайте расширений для Opera. Мы рекомендуем создавать иконки размером 64х64 пикселей.

Скачайте файл hello.png иконки и сохраните его в папку расширения.

Добавление кнопки на панель Opera

После того, как вы сконфигурировали расширение, вы можете начинать писать его код. Создадим кнопку, которая будет добавлена на панель. Это может быть сделано с помощью следующего кода:

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <script>
  5.     window.addEventListener("load", function(){
  6.     var theButton;
  7.     var ToolbarUIItemProperties = {
  8.      title: "Hello World",
  9.      icon: "hello-button.png",
  10.      popup: {
  11.       href: "popup.html",
  12.       width: 110,
  13.       height: 30
  14.      }
  15.     }
  16.     theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
  17.     opera.contexts.toolbar.addItem(theButton);
  18.    }, false);
  19.   </script>
  20.  </head>
  21.  <body>
  22.  </body>
  23. </html>
* This source code was highlighted with Source Code Highlighter.


Сохраните этот файл с именем index.html в папке расширения.

Любое расширение для Opera требует файл index.html. Это html-шаблон, содержащий скрипт, который создаёт UI-элементы. Тело этого документа не используется.

Скрипт создаст элемент панели (кнопку) с несколькими свойствами. Элемент создаётся с иконкой размером 18х18 пикселей. Всплывающее окно, связанное с кнопкой, также создаётся с заданными размером и указанием на файл с его интерфейсом.

Скачайте файл hello-button.png и сохраните его в папку расширения.

Создание всплывающего окна

Вы уже создали кнопку и указали размер всплывающего окна, так что теперь вам нужно только создать его контент. Это просто HTML-документ с указанными размерами. Вы можете использовать HTML, CSS, JavaScript или любые другие веб-технологии, которые вы обычно используете на веб-страницах. Это hello world пример, поэтому создадим вот такую страницу:

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.    <title>Hello World!</title>
  5.    <style>
  6.      h1 {
  7.        font: 14px helvetica, arial, sans-serif;
  8.        text-align: center;
  9.       }
  10.    </style>
  11.  </head>
  12.  <body>
  13.    <h1>Hello World!</h1>
  14.  </body>
  15. </html>
* This source code was highlighted with Source Code Highlighter.


Сохраните этот файл с названием popup.html в папке расширения.

Упаковка и установка расширения

Вы почти закончили создание расширения. Всё, что вам осталось это упаковать все файлы в zip-архив. После этого переименуйте полученный файл в HelloExtension.oex (не забудьте изменить расширение с .zip на .oex) и всё готово.

Вы можете скачать готовое расширение HelloExtension.

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

Поэкспериментируйте с различными свойствами кнопки и содержимого всплывающего окна, пока не освоитесь с процессом.
Tags:
Hubs:
+52
Comments 29
Comments Comments 29

Articles