Alpha-версия Opera 11 и HOWTO Ваше первое расширение для Opera

600

Сегодня прям какой-то браузерный день! Не успел я рассказать о выходе 7 версии Google Chrome, как увидел сообщение о выходе Opera 11… Правда пока только Alpha-версии, но зато уже с поддержкой расширений (!). Таким образом и Opera становится расширяемым браузером. А это значит, что создание сайтов станет легче за счет появления девелоперских расширений для Opera. Да и тестировать сайты в этом популярном браузере наверное станет легче.

А для тех, кто предпочитает писать код самостоятельно, SonicGD с Хабра перевел любопытное HOWTO «Ваше первое расширение для Opera». Рекомендую ознакомится.

Вступление

Эта статья проведёт вас через базовые шаги для создания вашего первого расширения для 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 exampledescription>
  • <author href=»yourURL» email=»yourEMail»>Enter your name hereauthor>
  • <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.

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

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