Данная статья является переводом части обучающего цикла с официального сайта Opera.
Оригинал: https://dev.opera.com/extensions/basics/
Введение
В создании расширений для Opera нет ничего сложного, особенно для тех, кто уже имеет опыт в создании расширений для Chromium, так как архитектура расширений для обоих браузеров идентична (с небольшими отличиями). В этой статье я расскажу, как создать простейшее расширение для Opera.
Что представляет собой расширение для Opera?
Расширение для Opera содержит файл manifest, который содержит различные мета-данные: название расширения, его автора и пр. Также в этом файле перечисляются разрешения API, к которым расширению необходим доступ. Обычно в манифесте указывается фоновый скрипт, взаимодействующий с интерфейсом браузера. Кроме того, может быть указан скрипт содержимого, который взаимодействует с содержимым страниц. Ещё расширения зачастую содержат HTML/CSS/JS-файлы для дополнительных страниц расширения или его всплывающего окна.
Всё это пакуется в ZIP-архив со специальным заголовком и расширением .nex. Подробнее об архитектуре расширений для Opera рассказано в этой статье .
Hello, world
Теперь, когда мы познакомились с основами архитектуры, давайте создадим простое расширение. Это расширение добавит кнопку на панель браузера, при клике на которую будет создаваться вкладка с сайтом.
Шаг 1: Определение расширения
Перед началом создайте пустой каталог, где будут лежать все файлы расширения.
Перво-наперво создадим манифест. В нём мы определим название расширения, его описание, автора, версию и прочие детали. Также, как было написано выше, здесь мы определим разрешения. Так как это расширение взаимодействует с вкладками, то это нужно указать в permissions.
Файл манифеста содержит данные в JSON-формате; это довольно распространённый формат среди веб-разработчиков ввиду его лаконичности и гибкости. Скопируйте текст ниже и сохраните в новом файле manifest.json.
{
"manifest_version": 2,
"name": "Opera Extensions — Getting Started",
"description": "Sample extension for the “Making your first extension” article",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": ["tabs"],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Go to Dev.Opera!"
}
}
Шаг 2: Взаимодействие с браузером: фоновый скрипт
Фоновый скрипт играет важную роль, так как он взаимодействует с интерфейсом браузера. В нашем случае расширение работает с вкладками, поэтому мы будем использовать методы из Tabs API. Об этом можно почитать позже, а сейчас достаточно создать файл background.js в каталоге расширения и вставить туда этот код:
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tab) {
chrome.tabs.create({
"url": "http://dev.opera.com"
});
});
});
Шаг 3: Подключение иконок и прочих ресурсов
Практически любому расширению нужна иконка, которая будет отображаться в панели браузера. Рекомендуется прочесть данную статью , где обсуждаются лучшие практики по созданию качественных иконок для расширений. Для старта можно взять первую попавшуюся картинку, переименовать её в icon.png и положить в каталог с расширением.
Помимо иконки расширение может содержать изображения, шрифты и пр. Их можно положить в подкаталог, например, assets.
Шаг 4: Тестирование расширения
Теперь, если вы всё сделали правильно, можно протестировать наше расширение. Обычно законченное расширение нужно упаковать и подписать на странице управления расширениями (opera://extensions/). Но во время разработки ничего упаковывать не нужно, а расширение будет запускаться прямиком из каталога с файлами:
- Перейдите по адресу opera:extensions (или Ctrl + Shift + E).
- Перейдите в режим разработчика.
- Нажмите на кнопку «Загрузить распакованное расширение».
- Выберите каталог с расширением.
Всего-то! Расширение должно загружаться в режиме разработчика. Этот режим позволяет инспектировать различные части расширения, используя инструменты разработчика браузера. Для того, чтобы проверить изменения в расширении, достаточно нажать кнопку «Перезагрузить».
Если всё сделано верно, вы увидите иконку на панели браузера, справа вверху. Если кликнуть по иконке, откроется вкладка с сайтом Dev.Opera .
Шаг 5: Упаковка
Когда вы довольны результатом и расширение готово, нужно запаковать расширение в NEX-файл:
- Перейдите по адресу opera:extensions (или Ctrl + Shift + E).
- Перейдите в режим разработчика.
- Кликните на кнопке сверху «Упаковать расширение».
- Укажите каталог, где расположено расширение.
- Кликните по кнопке «OK».
Будет создан NEX-пакет в родительском каталоге.
Что теперь?
Как вы видите, в создании расширений для Opera действительно нет ничего сложного. В следующих уроках будут рассмотрены другие возможности, доступные разработчикам.
Кстати, вот пример полезного расширения, к которому я приложил руку: github.com/bartholomej/modx-manager-switch .
Спасибо за внимание.