SonicGD Oct 21 2010 at 14:32

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

4 min

12K

Translation

Вступление

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

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

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

Создадим скелет конфигурационного файла:

<?xml version="1.0" encoding="utf-8"?> <widget xmlns="http://www.w3.org/ns/widgets"> <name>Hello extensions!</name> <description>A simple hello world example</description> <author href="yourURL" email="yourEMail">Enter your name here</author> <icon src="hello.png"/> </widget> * This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

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

<!doctype html> <html lang="en"> <head> <script> window.addEventListener("load", function(){ var theButton; var ToolbarUIItemProperties = { title: "Hello World", icon: "hello-button.png", popup: { href: "popup.html", width: 110, height: 30 } } theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties); opera.contexts.toolbar.addItem(theButton); }, false); </script> </head> <body> </body> </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 пример, поэтому создадим вот такую страницу:

<!doctype html> <html lang="en"> <head> <title>Hello World!</title> <style> h1 { font: 14px helvetica, arial, sans-serif; text-align: center; } </style> </head> <body> <h1>Hello World!</h1> </body> </html> * This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

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

Tags:

Hubs:

Opera