Сегодня речь пойдет о том как создать свое первое расширение для браузера Opera.
Для создания расширения нам понадобится несколько файлов:
— config.xml
— index.html
— popup.html
— icon.png
— папка includes с файлом injectedScript.js
Теперь собственно по порядку. Откроем файл config.xml и запишем в него следующие данные:
<?xml version="1.0" ?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.org/helloworld">
<span xml:lang="ru">
<name>My test!</name>
<description>My first Opera extension.</description>
<author href="http://foolsoft.ru" email="my@email.ru">2011 (c) foolsoft
<icon src="icon.png"/>
</span>
</widget>
Этот файл задает параметры нашего расширения: название, описание, автор, иконка, языки и прочее.
Сохраним наш файл и перейдем к редактированию файла index.html.
<!doctype html>
<html lang="ru">
<head>
<script>
window.addEventListener("load", function(){
var theButton;
var ToolbarUIItemProperties = {
title: "Fuck yeah!",
icon: "icon.png",
popup: {
href: "popup.html",
width: 350,
height: 150
}
}
theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
opera.contexts.toolbar.addItem(theButton);
}, false);
</script>
</head>
<body>
</body>
</html>
Здесь, по сути, мы добавляем видимую часть нашего расширения, а именно, кнопку с изобржением icon.png. Так же данный код задает действие (открыть файл popup.html), которое будет срабатывать по нажатию на кнопку.
Идем далее… Откроем файл popup.html. Как не сложно догадаться — это то, что будет отображаться у нас при нажании на кнопку расширения в браузере. Например:
<!doctype html>
<html lang="ru">
<head>
<title>Test
<style>
body { background: white; border: 2px solid black; padding: 10px;}
</style>
</head>
<body>
<b>It's my first extension!</b>
</body>
</html>
С этим все. Как правило расширения создаются для интеграции в какие либо сайты, поэтому создадим скрипт, который будет выполняться при работе нашего браузера, а точнее при открытии страниц. Откроем файл injectedScript.js в папке includes и добавим.
alert("Мы тут: " + window.location.href);
Вот и все. Наше первое расширение готово. Для тестирования мы можем перенести файл config.xml в наш браузер и начать тестировать. Как расширение будет полностью готово необходимо добавить все файлы в архив zip. После этого расширение архива zip поменять на oex.
Более подробная информация тут.
