Как сделать расширение для браузера опера
Making extensions for Opera is really easy. If you are already familiar with making Google Chrome extensions, then you will be right at home, as Opera uses the Chromium extensions architecture (with some minor differences). And even if you aren’t, Opera extensions are still easy — they are made using open web technologies, plus some specific APIs to tap into browser functionality.
In this article we’ll put together a simple example extension to show you how it works.
What’s in an Opera extension?
An Opera extension contains a manifest file which defines metadata like the name of the extension, its author, etc. It also lists the various API permissions we want the extension to have. It will also typically have a background page or background script, which is responsible for communicating with the browser UI. Apart from that, it could have a content script which deals with changes to web pages. You could also need some other HTML (and related CSS and JavaScript) files for button popups or an options page.
Apart from all the JS and HTML files, you’ll also need to put in some images for the extension icons.
All of this is wrapped in a ZIP file format with the .crx file extension. To know more about the architecture of extensions in Opera, please read the associated article, which describes it in detail.
Your first extension
Step 1: Defining the extension with an extension manifest
The first step we’ll take is to define the extension manifest. This is where we define the name of the extension, its description, author, version number, and other such details.
There is another important aspect to extension manifests — inside we define the necessary permissions in order for the extension to run properly. For our example, working with tabs is required, so this needs to be specified in the manifest.
Extension manifests are written in the JSON format; we’ll explain the specifics later, but for now just open up a text editor, type the following into a new file and save it as manifest.json in an empty directory, anywhere you like.
Step 2: Communicating with the browser: the background script
The background script is very important — this is where anything to do with manipulating the browser UI is contained. In our case, we’ll be working with tabs, so we will be using methods from the Tabs API in our script. You’ll read more about working with tabs later on, but for now, create a file named background.js in the same directory as before and enter the following code into it:
Step 3: Including icons and other assets
You’ll need an icon for the toolbar button, and represent the extension in other places. For icons, we would recommend you read our article on it, where we discuss the appropriate sizes and best practices for great looking icons in extensions.
You may also need other files such as images, fonts, videos etc. You can include them in the parent directory, or create a separate folder (for example, a folder named media ) or two, and place them there.
Step 4: Testing your extension
Okay, time to test out your extension. For the final extension, you’ll need to package and sign the extension from the Extension Settings page. But the good news is that you don’t need to do this every time you want to test things out — you can test your extension straight from the directory, like so:
- Go to the browser address bar and type opera:extensions (or use the Cmd/Ctrl Shift E shortcut)
- Check the “Developer Mode” button to enable it.
- Click on the “Load Unpacked Extension…” button.
- Select your extension’s directory
Thats it! Your extension should be loaded in “Developer Mode”. This mode gives you the ability to inspect various parts of the extension using the browser’s developer tools. You can also make changes to your extension’s code and quickly see the effects with the Reload button.
If all goes well, you should see an icon in the top right of the browser window next to the address bar. Clicking on it will open up a new tab, which will go to Dev.Opera — Opera’s developer tutorial site.
Step 5 — Packing it all up!
Once you are satisfied that your extension is finished, you need to package it into a CRX file, as follows:
- Go to the browser address bar and type opera:extensions.
- Make sure you have “Developer Mode” (located on the top right) checked.
- Click on the “Pack Extension” button, located on the top of the page.
- Select the directory of your extension
- Click “OK”.
Your CRX package will be generated in the parent directory of the one you had selected. Congratulations!
What now?
As you can see, making extensions for Opera is really easy. Through this tutorial, you’ve learned how to make a basic extension, load it in Developer Mode, test it out and finally package it.
From here you should take a look at the other tutorials we’ve written, covering different parts of extension functionality in more detail (like Buttons, Tabs, Messaging, etc.) If you need a pure reference guide, check out the API Docs section in the sidebar.
C чего начнём?
- Создадим новую директорию для файлов расширения
- В ней создадим файл config.xml
Название нашего расширения . Не стоит делать слишком длиннымКраткое описание . Хватит и пары строчек- . Иконки используются на странице расширений, на сайте-репозитории (если ваше расширение там примут), и в кнопке, которой в данном расширении не будет. Желательно вынести в отдельную директорию, дабы не создавать беспорядок
В качестве последнего штриха нужно создать index.html. Он нужен для функционирования «закадрового» скрипта, который будет запущен вместе со стартом браузера, и не будет привязан ни к одной из вкладок. Нам он не нужен, но без него Opera не даст нам «подебажить». Файл можно оставить пустым. Теперь при помощи drag-n-drop перетаскиваем наш config.xml в браузер. Если всё прошло хорошо, откроется страница со списком установленных расширений, и наше там будет сверху, в разделе «режим разработчика».
UserJS
- дожидаться окончания загрузки страницы и появления искомого блока (далее я буду называть его slider).
- разместить в нём наши кнопки-стрелки.
- разместить необходимый CSS-код для стрелок и выделения текущего комментария.
- оживить стрелки — они должны перемещать скролл страницы по новым комментариям.
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-ом, извиняйте, если что не так.
Как многие из вас помнят какое–то время назад Гугл во второй раз спрятал ссылку на Ридер, заменив ее ссылкой на Фотографии. В первый раз это вызвало волну недовольства пользователей и Гугл вернул все назад, сославшись на ошибку. Тогда, сразу же, появилось расширение для Хрома, возвращающее ссылку на Ридер. Я портировал это расширение для Оперы.
Когда второй раз Гугл перенес ссылку, волна возмущения уже была не такой сильной. Сначала мне даже показалось, что никто не обратил внимания. Сообщество было занято более важными новостями. Но появилось обсуждение на форуме поддержки Гугла и даже официальный ответ о том, что Гугл всегда стремится улучшить свои продукты и такое улучшение может приводить к действиям подобным случившемуся с ссылкой на Ридер. Я вспомнил про свое расширение, расчехлил запылившийся код и решил сделать расширение более приятным и более осмысленным. А именно — дать пользователю возможность задавать структуру ссылок самому. Расширение должно динамически выдергивать все ссылки со страницы, показывать их пользователю в виде двух колонок и позволить перетаскивать их мышкой. Оказалось, что для Хрома такого расширения тоже не было и дополнительно я задался идеей написать два расширения с общим кодом.
Архитектура расширений похожа в обоих браузерах. Условно можно разделить внутреннюю часть расширения на то, что работает в контексте просматриваемой страницы, и то, что работает в контексте браузера. Почему важно разделять эти понятия? Потому, что для скриптов, внедряемых на страницу, действует более жесткая политика безопасности. Например, мне не удалось подключить сторонний скрипт. В качестве такого стороннего скрипта у меня выступает библиотека jQuery. При этом скрипт, который работает в контексте браузера, без проблем подключает все, что угодно. Для большей конкретики назовем скрипты своими именами: фоновый процесс работает в контексте браузера, встроенный – в контексте страницы.
По уровню помощи разработчику Опера и Гугл разнятся несильно. Обе компании предоставляют подробную документацию, видео, примеры. Субъективно, мне читать документацию Гугла тяжелее. Они очень любят гипер–ссылки и чтение превращается в чехарду: прочел абзац, перешел по ссылке, прочел абзац, перешел либо по новой ссылке, либо назад. Отдельный квест от Гугла: попробуйте зайти на страницу документации и найти рекомендации для публикации расширения. Гугл все больше ориентируется на приложения, а не расширения. Справочная информация для о процессе к публикации находится на страницах разработки приложений.
В Опере сделали отличную штуку — шаблоны для создания иконок. Шаблоны можно использовать в Фотошопе или Инкскейпе. Я далек от дизайна и мне понадобилось какое–то время на освоение этого шаблона, но потом я оценил его по достоинству. С ним действительно проще создавать иконки нужного размера.
Opera | ||
---|---|---|
Локализация и описание расширения | Предлагает разработчику заполнить описание на всех языках локализации, показывая поля для ввода один за другим | Показывает только одно поле для ввода. Переключение на другой язык происходит с помощью комбо–бокса. Я не сразу нашел этот комбо-бокс и думал, что почему–то могу ввести описание только на языке, выбранном по умолчанию |
Скриншоты | Есть только одно требование к размерам — скриншоты должны быть меньше 800x600 пикселей | Предлагают сделать скриншоты фиксированного размера 1280x800 пикселей. Дополнительно предлагают сделать несколько рекламных изображений. Расширениям без рекламных изображений уделяется меньше внимания в поисковой выдаче |
Заметность расширения | Есть раздел — новые поступления. Через него люди хоть как–то могут узнать о новинках или обновлениях. Думаю, что мое расширение заметили именно благодаря этому разделу | Нет никакой информации о новых расширениях. Опубликованное расширение сразу же попадает в общий котел и через официальный каталог его очень сложно найти |
В Опере несколько раз люди писали, что ставят оценку 3 или 4 из-за того и из-за этого, а мышкой промахивались и реально ставили 2. Это, во–первых, вопрос о юзабилити. Возможно, такой рейтинг как на Хабре (плюс и минус) был бы понятнее. Во–вторых, вы не получаете рейтинг, который сделал бы ваше расширение заметнее для пользователей. В–третьих, если вы склонны сильно переживать из–за рейтинга, то переживаний у вас прибавится.
Меня очень удивил подход к статистике у поискового гиганта. Разработчику доступна цифра под названием «количество пользователей в неделю». Мне эта цифра мало о чем говорит. Прикрученная статистика Гугл-аналитики помогла понять, что моим расширением в Хроме все-таки пользуются. Опера же показывает легко понятную цифру — количество скачиваний. С этой цифрой мне не понадобится дополнительная статистика, чтобы понять востребованность расширения. Но в обоих браузерах я ничего не знаю о тех, кто возможно установил себе расширение, а потом удалил его. Так что, в целом, хотелось бы более информативной штатной статистики от обоих браузеров.
Я прикрутил две кнопки для пожертвований: от пейпала и яндекс.денег. К моменту публикации второй версии я получил ровно ноль пожертвований. Не могу сказать, что я сильно удивился. как известно, пожертвования могут собрать очень немногие проекты. Вторую версию расширения я хотел сделать условно платной: полный функционал появлялся бы через 10 дней после установки. Если кто-то хотел раньше, то нужно было бы заплатить какую-нибудь символическую сумму. Меня остановило несколько вещей (юридического лица у меня нет). Первое, это отсутствие адекватных платежных систем для нерезидентов США. Нашелся только Пэйпал, в котором у меня счет в евро. По статистике я видел, что основная масса пользователей Хром-версии расширения из Штатов. Я не был уверен, что они были бы готовы платить 1 евро за расширение и еще полтора за сопутствующие расходы. Кроме того, надо было организовать прием платежей и надежное(доступное) хранение/получение информации о них, а это значит, что нужна серверная часть расширения.
Второе, это этические соображения. Я не имею никакого отношения к Гуглу, так почему я должен паразитировать на нем, даже потратив свое собственное время?! Я получил опыт, а деньги лучше заработать на чем-нибудь, что будет полностью моим.
- Писать кросс-браузерные расширения очень даже возможно и на деле не так уж и сложно.
- Предполагается, что расширения являются бесплатными. Если вы, вдруг, захотите получить прибыль, то разработчики браузеров вам в этом не помогут. Для получения прибыли стоит смотреть в сторону приложений в Chrome Web Store.
- Для Хрома нужно подумать о рекламе где-то на стороне. Иначе никто не узнает про ваше замечательное расширение.
Ссылки: версия для Оперы, для Хрома, исходный код.
UPD: Wimsey уточняет, что в Опере автообновления есть. Текст подкорректирован.
Для начала, необходимо создать конфигурационный файл расширения, который содержит метаданные, описывающие расширение. Там содержится информация о названии расширения, его авторе и иконке для менеджера расширений. Расширения для Opera использую формат W3C Widgets, который может быть знаком вам по Opera Widgets.
Создадим скелет конфигурационного файла:
Сохраним его под названием config.xml.
Создание иконки расширения
Наверняка, вы заметили описание иконки в конфигурационном файле. Указанная иконка используется в менеджере расширений и на сайте расширений для Opera. Мы рекомендуем создавать иконки размером 64х64 пикселей.
Скачайте файл hello.jpg иконки и сохраните его в папку расширения.
Добавление кнопки на панель Opera
После того, как вы сконфигурировали расширение, вы можете начинать писать его код. Создадим кнопку, которая будет добавлена на панель. Это может быть сделано с помощью следующего кода:
- window.addEventListener( "load" , function ()
- var theButton;
- var ToolbarUIItemProperties =
- title: "Hello World" ,
- icon: "hello-button.jpg" ,
- popup:
- href: "popup.html" ,
- width: 110,
- height: 30
- >
- >
- theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
- opera.contexts.toolbar.addItem(theButton);
- >, false );
Сохраните этот файл с именем index.html в папке расширения.
Любое расширение для Opera требует файл index.html. Это html-шаблон, содержащий скрипт, который создаёт UI-элементы. Тело этого документа не используется.
Скрипт создаст элемент панели (кнопку) с несколькими свойствами. Элемент создаётся с иконкой размером 18х18 пикселей. Всплывающее окно, связанное с кнопкой, также создаётся с заданными размером и указанием на файл с его интерфейсом.
Скачайте файл hello-button.jpg и сохраните его в папку расширения.
Создание всплывающего окна
Вы уже создали кнопку и указали размер всплывающего окна, так что теперь вам нужно только создать его контент. Это просто HTML-документ с указанными размерами. Вы можете использовать HTML, CSS, JavaScript или любые другие веб-технологии, которые вы обычно используете на веб-страницах. Это hello world пример, поэтому создадим вот такую страницу:
- < title >Hello World! title >
- h1
- font: 14px helvetica, arial, sans-serif;
- text-align: center;
- >
- < h1 >Hello World! h1 >
Сохраните этот файл с названием popup.html в папке расширения.
Упаковка и установка расширения
Вы почти закончили создание расширения. Всё, что вам осталось это упаковать все файлы в zip-архив. После этого переименуйте полученный файл в HelloExtension.oex (не забудьте изменить расширение с .zip на .oex) и всё готово.
Вы можете скачать готовое расширение HelloExtension.
Теперь просто перетащите расширение в окно браузера и он спросит, хотите ли вы его установит. Вы увидите указанную вами иконку и метаданные. Переключитесь на любую вкладку и попробуйте кликнуть по новой кнопке на панели.
Поэкспериментируйте с различными свойствами кнопки и содержимого всплывающего окна, пока не освоитесь с процессом.
Можно переключиться между двумя темами оформления – в темных и светлых тонах. Эти темы изменяют внешний вид панели вкладок и объединенной адресной строки и строки поиска браузера.
По умолчанию в Opera используется тема в светлых тонах. Чтобы включить тему в темных тонах, перейдите в меню Easy Setup (Простая настройка), нажав кнопку в верхнем правом углу экрана на панели инструментов, или в меню Settings (Настройки) (Preferences (Настройки) на Mac) > Basic (Основные) > Appearance (Оформление) и установите флажок Enable dark theme (Включить тему в темных тонах).
Фоновые рисунки
Вы можете изменять вид начальной страницы и других страниц Opera с помощью фоновых рисунков. В Opera уже есть несколько фоновых рисунков, которые можно найти в разделе Wallpapers (Фоновые рисунки) в меню Settings (Настройки) (Preferences (Настройки) на Mac) > Basic (Основные) . Для быстрого доступа к фоновым рисункам можно нажать кнопку Easy Setup (Простая настройка) в верхнем правом углу экрана на начальной странице.
Фоновые рисунки, загруженные с сайта, можно найти в разделе Settings (Настройки) (Preferences (Настройки) на Mac) > Basic (Основные) > Wallpapers (Фоновые рисунки) или в меню Easy Setup (Простая настройка).
Создание собственных фоновых рисунков
Для создания темы оформления можно использовать любое изображение из Интернета. Удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по изображению и выберите Use Image as Wallpaper (Использовать изображение как фоновый рисунок).
Кроме того, собственную тему оформления можно создать, используя любое изображение, сохраненное на компьютере. Для этого выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Basic (Основные) на боковой панели.
- В разделе Wallpapers (Фоновые рисунки), нажмите значок +.
- Выберите Add your wallpaper (Добавить свой фоновый рисунок).
Это изображение будет добавлено в ваш список фоновых рисунков.
Расширения
Расширения – это инструменты и приложения, разработанные для добавления новых возможностей браузера Opera от защиты пользователей от веб-угроз до приложений прогноза погоды, интерактивных словарей и переводчиков, инструментов разработки и т. д.
Для управления расширениями выберите View (Вид) > Show Extensions (Показать расширения) на Mac и меню O > Extensions (Расширения) в Windows и Linux . Кроме того, можно нажать по значку плюс на боковой панели начальной страницы.
Включить боковую панель расширений
Доступны специализированные расширения боковой панели, доступ к которым осуществляется с использованием панели расширений. После включения эта боковая панель отображается на протяжении всего сеанса просмотра.
Чтобы включить ее в Windows или Linux, перейдите в меню O > Extensions (Расширения) и выберите Extensions bar (Панель расширений).
Ваши расширения боковой панели будут добавлены на боковую панель расширений. Если нужно добавить больше расширений, нажмите кнопку + на боковой панели.
Чтобы включить панель расширений на Mac, выберите View (Вид) > Hide Extensions Bar (Скрыть панель расширений). В Windows или Linux, перейдите в меню O > Extensions (Расширения) и отмените выбор Extensions sidebar (Боковая панель расширений).
Чтобы отключить панель расширений на Mac, выберите View (Вид) > Hide Extensions Bar (Скрыть панель расширений) . В Windows или Linux, перейдите в меню O > Extensions (Расширения) и отмените выбор Extensions bar (Панель расширений) или нажмите на панель расширений правой кнопкой мыши и выберите Hide extensions bar (Скрыть панель расширений) .
Настройки при запуске браузера
Настройки запуска позволяют сообщать браузеру, какая страница или набор страниц должны открываться при запуске браузера.
Чтобы выбрать параметры запуска в Opera:
- Зайдите в Настройки.
- В области «Основные» перейдите к разделу При запуске.
- Выберите настройки запуска.
Зап ускать с начальной страницы – Opera будет запускаться со стартовой страницы и без каких-либо открытых вкладок из предыдущего сеанса просмотра. Ваши закрепленные карты останутся закрепленными.
Восстановить вкладки предыдущего сеанса – Opera возобновит предыдущий сеанс просмотра при запуске. Все вкладки, оставленные открытыми после последнего использования браузера, будут открыты в новом сеансе просмотра.
Открыть определенную страницу или несколько страниц – после запуска Opera открывает страницу или набор выбранных вами страниц.
Чтобы добавить страницу, нажмите «Добавить новую страницу», введите адрес веб-сайта и нажмите «Добавить». Вы можете добавить несколько страниц или установить в качестве начальных, открытых в данный момент вкладок, нажав Использовать текущие страницы.
Боковая панель в Opera
Чтобы показать или скрыть боковую панель в Opera, перейдите в раздел «Простая настройка» в верхнем правом углу браузера Opera. Нажмите Показать боковую панель.
Читайте также: