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

Данная статья является переводом части обучающего цикла с официального сайта 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/). Но во время разработки ничего упаковывать не нужно, а расширение будет запускаться прямиком из каталога с файлами:

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

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

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

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

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

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

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

Что теперь?

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

Кстати, вот пример полезного расширения, к которому я приложил руку: github.com/bartholomej/modx-manager-switch .

Спасибо за внимание.