Как написать расширение для opera

Пишем простое Opera-расширение

Эта статья посвящена написанию простого расширения для браузера Opera. Наше расширение будет примитивным, т.к. весь его функционал будет заключаться в user-JS для habrahabr.ru. Лента комментариев оснащена блоком, который отображает количество новых комментариев в топику и кнопку, позволяющую эту ленту обновить. Давайте добавим туда стрелки для навигации по новым комментариям.

C чего начнём?

Создадим новую директорию для файлов расширения
В ней создадим файл config.xml

Содержимое XML:

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

Название нашего расширения . Не стоит делать слишком длинным
Краткое описание . Хватит и пары строчек
. Иконки используются на странице расширений, на сайте-репозитории (если ваше расширение там примут), и в кнопке, которой в данном расширении не будет. Желательно вынести в отдельную директорию, дабы не создавать беспорядок

Доступных опций намного больше. Но для начала хватит и этих. Думаю, вы обратили внимание, что в config.xml можно указать сразу несколько языковых версий для названия и описания.

В качестве последнего штриха нужно создать index.html. Он нужен для функционирования «закадрового» скрипта, который будет запущен вместе со стартом браузера, и не будет привязан ни к одной из вкладок. Нам он не нужен, но без него Opera не даст нам «подебажить». Файл можно оставить пустым. Теперь при помощи drag-n-drop перетаскиваем наш config.xml в браузер. Если всё прошло хорошо, откроется страница со списком установленных расширений, и наше там будет сверху, в разделе «режим разработчика».

UserJS

В начале следует определиться с тем, что же должно делать будущее расширение:

дожидаться окончания загрузки страницы и появления искомого блока (далее я буду называть его slider).
разместить в нём наши кнопки-стрелки.
разместить необходимый CSS-код для стрелок и выделения текущего комментария.
оживить стрелки — они должны перемещать скролл страницы по новым комментариям.

Для всего этого достаточно 1-го файла, который будет исполняться для каждой habrahabr-страницы. Т.е. нам идеально подходит UserJS. Но если Chrome умеет преобразовывать UserJS в расширения сам, а Firefox-у для этого нужен Greasemonkey, то в случае Opera мы можем его оформить в виде расширения или установить вручную (F12 — Настройки для сайта — Скрипты).

Создадим директорию includes, Opera будет искать «внедрённые» скрипты именно там. В ней создадим файл habr_comment_switcher.js (тут название можно выбрать любое). В начало файла поместим:

Это не просто js-комментарии, это специальная разметка для UserJS, которая в нашем случае объясняет опере, что сий внедряемый файл должен запускаться только на habrahabr.ru.

JavaScript

Помимо этого файла мы могли бы внедрить ещё и какую-либо библиотеку вроде jQuery или Prototype. Но я строго не рекомендую так поступать. Такого рода библиотеки весьма весомые, а т.к. они будут загружаться не только для каждой вкладки, а ещё и для каждого iframe, которых на странице бывает много, 5-10 таких расширений могут вызвать тормоза. Учитывая что наши задачи весьма скромны, мы не сильно много теряем.

UPD 2. Спасибо, kns. Если же на странице уже используется 1 из популярных библиотек, то мы можем воспользоваться ею. Подробнее об этом можно прочесть здесь. В случае Opera это будет выглядеть примерно так:

Начнём писать код. Для начала, для удобства, поместим всё в анон.функцию. Т.к. наше javascript-окружение изолировано от javascript-окружения сайта, этого делать не обязательно, но на мой взгляд, подобное уже давно стало правилом хорошего тона:

Не знаю как вы, но я привык работать в пределах конкретного объекта, а посему определим его:

Теперь необходимо оформить условия его создания:

Проверка на адрес страницы вызвана не логическими доводами, а паранойей. Дело в том, что я пару раз натыкался в сети на сведения о том, что Opera иногда не справляется с правилами для UserJS. Наш объект будет запущен после того, как всё DOM-древо страницы будет построено + 1.5 сек. Почему 1.5 сек.? Дело в том, что slider появляется не сразу, поэтому мы его подождём. Сие можно реализовать более изящно, но пока сойдёт и это.

Работа расширения

Сейчас Opera не самый высоко-технологичный браузер, но всё же его возможности намного опередили IE6,7,8. Следовательно мы можем воспользоваться такими вещами, которые не стали бы применять в обычном web-программировании. Немного упростим себе работу:

Методы querySelector и querySelectorAll позволяют находить DOM-объекты по CSS-селекторам. Такой подход вам наверняка знаком по опыту использования jQuery. В нашем случае функция $ будет искать один элемент, удовлетворяющий запросу, а $$ список.

Что там у нас по списку? Да не важно, давайте внедрим на страницу нужный нам CSS:

Здесь мы создаём новый DOM-объект и в качестве содержимого задаём необходимый CSS-код. Т.к. страница уже готова нам доступен document.head, куда мы и поместим наш тег. Теперь о функции _createElem:

Организовать работу с настройками можно как угодно, например так:

Перейдём к основной логике. Нам нужно найти slider и добавить к нему две кнопки:

Стрелки можно задать текстом. Теперь нам нужно эти кнопки оживить:

И наконец, долгожданная листалка:

Её логика проста. Ищем все новые комментарии по CSS-селектору, заданному в this.s.info_panel ( «.comment_item > .info.is_new» ). Он находит нам все блоки-заголовки новых комментариев. Затем, в зависимости от того, на какую кнопку мы нажали, перемещаем скролл страницы к нужному комментарию, используя scrollIntoView. Чтобы сие событие было более наглядным, добавляем к нему класс, для которого выше определили CSS с тёмной рамкой (outline).

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

Отдельно я хотел бы остановится на функциях работы с классом DOM-объекта. Нет нужны вручную парсить строчку item.className, т.к. доступны следующие методы:

Немного о «дебаге»

Начнём с того, что у нас есть такой инструмент как Dragonfly(стрекоза), который вызывается через ctrl+shift+i (либо правая кнопка мыши — «проинспектировать объект»). В нём на вкладке «Скрипты» мы можем отыскать в выпадающем списке наш habr_comment_switcher.js. Теперь нам доступны точки останова и «трейсинг» (F8, F10, F11). Также нам доступна консоль, но чтобы она работала в том же js-окружении, что и наш скрипт, нам нужно предварительно посмотреть его номер в выпад.списке скриптов.

Посмотреть ошибки можно путём нажатия кнопки «открыть консоль ошибок» на странице установленных расширений. Объект console для расширений не работает. Чтобы обновить расширение, нам нужно закрыть стрекозу, на странице расширений нажать «обновить», открыть стрекозу на нужной вкладке и нажать в браузере «обновить». В целом, впечатления от работы с расширением в стрекозе самые ужасные. Особенно после опыта разработки расширения для Chrome.

Финальный штрих

Вроде всё работает, так что самое время упаковать расширение. Для этого сожмём содержимое папки расширения в zip-архив, и сменим расширение файла на oex. Всё, расширение готово. Можно пользоваться. Если Opera ругается на то, что расширение повреждено, проверьте — возможно вы сжали не содержимое папки, а её саму. Так же проверьте наличие файлов config.xml и index.html.

Эпилог

УРА! Наше расширение готово, в стадии альфа-версии. Его можно улучшить, добавить поддержку Chrome и Greasemonkey (хотя я не уверен, что не взлетит так), добавить страницу настроек (к примеру, чтобы задавать цвета или изменять CSS-селекторы).

Посмотреть уже готовое расширение можно здесь. Первый раз пользуюсь git-ом, извиняйте, если что не так.

Источник статьи: http://habr.com/ru/post/142086/

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

Всем привет! Начиная с 11 версии в браузере Opera появилась очень нужная фишка — расширения, позволяющие увеличить функциональность самого браузера, не открывая сторонних приложений, как это делали виджеты. В этом уроке я расскажу, как создать простейшее расширение для Opera.

Введение

Расширения Opera основаны на спецификации W3C widget . Разработчики могут создавать расширения Opera, используя имеющиеся навыки для создания сайтов и веб-приложений (HTML, JavaScript, CSS). Кроме того, Opera выпустила API для упрощения создания расширений.

Существует несколько типов расширений Opera:

Кнопка на панели инструментов: основной тип расширений, который добавляет кнопку расширения на панель инструментов Opera.
Кнопка + Выпадающее окошко: кнопка на панели инструментов, при нажатии на которую всплывает окошко. Именно такое расширение мы будем писать сегодня.
Кнопка + надпись: часто используется для отображения количества элементов, как, например, количество непрочитанных писем или сообщений.
Работа с окнами и вкладками: Opera предоставляет разработчикам возможность работать с окнами и вкладками.
Фоновые расширения: при активации работают в фоне и выполняют определенные функции на веб-страницах.

Шаг 0: Приступая к работе

Сегодня мы создадим небольшое расширение, которое добавит кнопку True-Coder на панель инструментов Opera. По нажатию на кнопку будет всплывать окошко, содержащее категории моего блога и поиск по нему.

Шаг 1: Создание конфигурационного файла расширения

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

Создаем XML-файл с именем config.xml и добавляем в него следующий код:

True-Coder Быстрый доступ к true-coder.ru Вадим Санько

Тег widget является корневым тегом файла config.xml. Он содержит 4 дочерних тега (name, description, author и icon).

Тег name содержит имя расширения (True-Coder).
Тег description содержит описание расширения.
Тегом author мы вводим имя автора расширения (ваше имя). Этот тег также может принимать 2 параметра: href (ссылка на страницу автора) и email (почта автора).
Параметром src тега icon указываем путь к иконке расширения. Opera рекомендует использовать иконку 64×64 пикселей. Эта иконка будет использоваться в менеджере расширений и на сайте расширений Opera.

Источник статьи: http://true-coder.ru/browsers/pishem-pervoe-rasshirenie-dlya-opera.html

Разработка расширений для Opera, Введение

Данная статья является переводом части обучающего цикла с официального сайта Opera.

Введение

В создании расширений для Opera нет ничего сложного, особенно для тех, кто уже имеет опыт в создании расширений для Chromium, так как архитектура расширений для обоих браузеров идентична (с небольшими отличиями). В этой статье я расскажу, как создать простейшее расширение для Opera.

Что представляет собой расширение для Opera?

Расширение для Opera содержит файл manifest, который содержит различные мета-данные: название расширения, его автора и пр. Также в этом файле перечисляются разрешения API, к которым расширению необходим доступ. Обычно в манифесте указывается фоновый скрипт, взаимодействующий с интерфейсом браузера. Кроме того, может быть указан скрипт содержимого, который взаимодействует с содержимым страниц. Ещё расширения зачастую содержат HTML/CSS/JS-файлы для дополнительных страниц расширения или его всплывающего окна.

Всё это пакуется в ZIP-архив со специальным заголовком и расширением .nex. Подробнее об архитектуре расширений для Opera рассказано в этой статье .

Hello, world

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

Шаг 1: Определение расширения

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

Перво-наперво создадим манифест. В нём мы определим название расширения, его описание, автора, версию и прочие детали. Также, как было написано выше, здесь мы определим разрешения. Так как это расширение взаимодействует с вкладками, то это нужно указать в permissions.

Файл манифеста содержит данные в JSON-формате; это довольно распространённый формат среди веб-разработчиков ввиду его лаконичности и гибкости. Скопируйте текст ниже и сохраните в новом файле manifest.json.

Шаг 2: Взаимодействие с браузером: фоновый скрипт

Фоновый скрипт играет важную роль, так как он взаимодействует с интерфейсом браузера. В нашем случае расширение работает с вкладками, поэтому мы будем использовать методы из Tabs API. Об этом можно почитать позже, а сейчас достаточно создать файл background.js в каталоге расширения и вставить туда этот код:

Шаг 3: Подключение иконок и прочих ресурсов

Практически любому расширению нужна иконка, которая будет отображаться в панели браузера. Рекомендуется прочесть данную статью , где обсуждаются лучшие практики по созданию качественных иконок для расширений. Для старта можно взять первую попавшуюся картинку, переименовать её в icon.png и положить в каталог с расширением.

Помимо иконки расширение может содержать изображения, шрифты и пр. Их можно положить в подкаталог, например, assets.

Шаг 4: Тестирование расширения

Теперь, если вы всё сделали правильно, можно протестировать наше расширение. Обычно законченное расширение нужно упаковать и подписать на странице управления расширениями (opera://extensions/). Но во время разработки ничего упаковывать не нужно, а расширение будет запускаться прямиком из каталога с файлами:

Перейдите по адресу opera:extensions (или Ctrl + Shift + E ).
Перейдите в режим разработчика.
Нажмите на кнопку «Загрузить распакованное расширение».
Выберите каталог с расширением.

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

Если всё сделано верно, вы увидите иконку на панели браузера, справа вверху. Если кликнуть по иконке, откроется вкладка с сайтом Dev.Opera .

Шаг 5: Упаковка

Когда вы довольны результатом и расширение готово, нужно запаковать расширение в NEX-файл:

Перейдите по адресу opera:extensions (или Ctrl + Shift + E ).
Перейдите в режим разработчика.
Кликните на кнопке сверху «Упаковать расширение».
Укажите каталог, где расположено расширение.
Кликните по кнопке «OK».

Будет создан NEX-пакет в родительском каталоге.

Что теперь?

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

Источник статьи: http://quasi-art.ru/library/it/opera-extension-development-0