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

Время на прочтение
7 мин

Количество просмотров 21K

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

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://faiwer.ru" version="0.9a" defaultlocale="en">
	<name xml:lang="en">HabrCommentSwitcher</name>
	<description xml:lang="en">Habrahabr. New comment switcher</description>
	<description xml:lang="ru">Habrahabr. Переключение новых комментариев</description>
  	<author href="faiwer.ru" email="faiwer@gmail.com">Faiwer</author>
  	<icon src="icons/64x64.png"/>
  	<icon src="icons/48x48.png"/>
  	<icon src="icons/32x32.png"/>
</widget>

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

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

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

// ==UserScript==
// @include http://habrahabr.ru/*
// ==/UserScript==

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

JavaScript

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

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

var $ = window.jQuery;

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

+function( w )
{
}( window );

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

	var Engine = function(){ this._init(); }
	Engine.prototype =
	{
		_init: function()
		{
		}
	}

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

	if( w.location.href.indexOf( 'habrahabr.ru' ) > 0 )
	{
		var engine = false;
		d.addEventListener( 'DOMContentLoaded', function()
		{
			setTimeout( function(){ engine = new Engine(); }, 1500 );
		}, false );
	}

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

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

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

    var d = w.document,
        $ = d.querySelector.bind( d ),
        $$ = d.querySelectorAll.bind( d )

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

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

_cssInject: function()
{
	var style = this._createElem( this.elem.style_inject ),
		text = '';
	for( var i = 0, n = this.css.length; i < n; ++ i )
	{
		text += this.css[ i ];
	}
	style.innerHTML = text;
	d.head.appendChild( style );
}

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

		_createElem: function( data )
		{
			var item = d.createElement( data.tagName );

			if( data.attr )
			{
				for( var rule in data.attr )
				{
					item.setAttribute( rule, data.attr[ rule ] );
				}
			}

			return item;
		},

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

_initConst: function()
{
	this._extend( this,
	{
		css: [
			'.__hcsc_button { border-top: 1px solid white; line-height: 22px; height: 22px; ' +
			'cursor: pointer; }',
			'.__hcsc_button:hover { color: white; }',
			'.info.__hcsc_active { outline: 2px solid #222; }',
		],
		elem:
		{
			style_inject: {
				tagName: 'style',
				attr: { id: '__habr_comment_switcher_css' }
			}
		}
	} );
},

_extend: function( object, extend )
{
	for( var name in extend ) if( extend.hasOwnProperty( name ) )
	{
		object[ name ] = extend[ name ];
	}
},

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

_prepareSlider: function()
{
	var slider = $( this.s.slider );
	if( !slider )
	{
		return;
	}

	this.up_button = this._createElem( this.elem.button );
	this.up_button.innerHTML = '▲';
	slider.appendChild( this.up_button );

	this.down_button = this._createElem( this.elem.button );
	this.down_button.innerHTML = '▼';
	slider.appendChild( this.down_button );		
},

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

_observe: function()
{
	this.up_button.addEventListener( 'click', this._slideClick.bind( this, -1 ), false );
	this.down_button.addEventListener( 'click', this._slideClick.bind( this, +1 ), false );
},

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

_checkItems: function()
{
	var items = $$( this.s.info_panel );

	if( !this.items || !this.items.length || !items.length || ( this.items[ 0 ] !== items[ 0 ] ) )
	{
		this.position = -1;
		this.items = items;
	}

	return this.items;
},

_slideClick: function( diff )
{
	if( this.current )
	{
		this.current.classList.remove( this.c.active );
	}

	if( !this._checkItems().length )
	{
		return;
	}

	this.position += diff;
	if( this.position < 0 )
	{
		this.position = this.items.length - 1;
	}
	else if( this.position >= this.items.length )
	{
		this.position = 0;
	}

	this.current = this.items[ this.position ];
	this.current.scrollIntoView( true );
	this.current.classList.add( this.c.active );
}

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

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

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

this.current.classList.add( 'my_class' );
this.current.classList.remove( 'my_class' );

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

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

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

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

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

Эпилог

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

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

Источник

Introduction

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

Now that we’re familiar with the basics of how it all works, let’s try putting an extension together. We’ll make a simple extension that will add a button to the browser toolbar — when clicked, the button will open up a new tab and load dev.opera.com. This is a pretty trivial example, but it’ll get you used to the basics.

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.

{
	"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!"
	}
}

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:

chrome.browserAction.onClicked.addListener(function() {
	chrome.tabs.query({
		currentWindow: true,
		active: true
	}, function(tab) {
		chrome.tabs.create({
			"url": "http://dev.opera.com"
		});
	});
});

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:

  1. Go to the browser address bar and type opera:extensions (or use the Cmd/Ctrl Shift E shortcut)
  2. Check the “Developer Mode” button to enable it.
  3. Click on the “Load Unpacked Extension…” button.
  4. 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:

  1. Go to the browser address bar and type opera:extensions.
  2. Make sure you have “Developer Mode” (located on the top right) checked.
  3. Click on the “Pack Extension” button, located on the top of the page.
  4. Select the directory of your extension
  5. 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.

Источник

Opera 11 , следующая версия признанного критиками веб-браузера, включает в себя интересную, очень востребованную функцию: расширения . Расширения позволяют пользователям создавать собственный веб-браузер, добавляя функции и возможности непосредственно в сам браузер, а не в виде отдельного виджета Opera или приложения Opera Unite.

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

Вступление

Расширения Opera основаны на спецификации виджетов W3C .

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

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

Вот краткий пример расширения mini Wikipedia:

Неттутс + удлинитель

Вы можете создать множество различных типов расширений Opera:

  • Opera toolbar button : базовое расширение, которое добавляет кнопку на панель инструментов Opera.
  • Button + Popup : кнопка на панели инструментов Opera, которая при нажатии отображает всплывающее окно со сторонним URL-адресом. Мы создадим эту форму расширения сегодня.
  • Button + Badge : часто используется для отображения количества элементов, таких как непрочитанные письма или сообщения.
  • Manipulate Tabs and Windows : Opera предоставляет разработчикам возможность управлять вкладками и окнами.
  • A bookmarklet extension : при нажатии запускает функцию букмарклета из фонового процесса и выполняет ее на текущей вкладке.

Шаг 0: Начало работы

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

Для начала все, что нам нужно, это копия Opera 11 и текстовый редактор или IDE на ваш выбор. Вы можете скачать Opera 11 здесь .

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

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

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

1

2

3

4

5

6

7

8

<?xml version=”1.0″ encoding=”utf-8″ ?>

<widget xmlns=”http://www.w3.org/ns/widgets”>

    <name>Nettuts+</name>

    <description>Nettuts+ Fast Search</description>

    <author href=”http://net.tutsplus.com/author/fikri-rakala/” email=”address@yahoo.co.id”>Fikri Rakala</author>

    <icon src=”icons/Icon-64.png”/>

</widget>

Элемент <widget> является корневым элементом config.xml . Он содержит четыре дочерних элемента (имя, описание, автор и значок).

  • Элемент <name> содержит имя расширения ( Nettuts+ )
  • Элемент <description> содержит описание расширения
  • В элементе <author> мы вводим имя автора расширения (ваше имя)
  • Элемент <author> может содержать два атрибута: href и email

В элементе <icon> мы указываем расположение значка расширения. Менеджер расширений и сайт расширений Opera будут использовать этот значок. Opera рекомендует использовать значок размером 64 × 64 пикселей.

Шаг 2: Создание файла index.html

Для расширений Opera требуется стартовый файл, обычно называемый index.html . Файл index.html является одной из двух обязательных частей пакета расширения (другая – config.xml ). Этот файл представляет собой простой HTML-шаблон со сценарием, который создает элементы пользовательского интерфейса. Тело этого документа не используется.

Давайте создадим файл index.html а затем добавим следующий скрипт в заголовок документа:

01

02

03

04

05

06

07

08

09

10

11

12

<script>

    window.addEventListener(“load”, function() {

    var theButton;

    var ToolbarUIItemProperties = {

            title: “Nettuts+”,

            icon: “icons/Nettuts-icon.png”,

            popup: {href: “popup.html”, width: 300, height: 200}

    }

    theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

    opera.contexts.toolbar.addItem(theButton);

    }, false);

</script>

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

В объекте ToolbarUIItemProperties мы определяем свойства кнопки. Есть пять свойств, которые мы можем передать ToolbarUIItemProperties . Пять свойств следующие:

  • disabled Это указывает, включена ли кнопка или нет. Это правда (отключено) по умолчанию и принимает логическое значение.
  • title Это свойство игнорирует всплывающую подсказку, которая отображается, когда пользователь наводит курсор на кнопку.
  • icon Это свойство определяет значок, используемый на кнопке. Если вы укажете размер, отличный от 18 × 18 пикселей, изображение будет масштабировано до такого размера.
  • onclick Функция для выполнения, когда пользователь нажимает на кнопку. Мы не используем это свойство для этого расширения.
  • onremove . Функция, выполняемая при удалении кнопки из ToolbarContext. Мы также не используем это свойство.

После того, как мы определили свойства кнопки в объекте ToolbarUIItemProperties , мы создаем фактическую кнопку и применяем свойства с помощью метода createItem :

1

theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

Наконец, мы добавляем кнопку на панель инструментов Opera, используя метод addItem :

1

opera.contexts.toolbar.addItem(theButton);

Вот полный код файла index.html :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html lang=”en”>

<head>

    <script>

       window.addEventListener(“load”, function()

       {

       var theButton;

       var ToolbarUIItemProperties = {

            title: “Nettuts+”,

            icon: “icons/icon.png”,

            popup: {href: “popup.html”, width: 300, height: 200}

        }

        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

        opera.contexts.toolbar.addItem(theButton);

      }, false);

    </script>

</head>

<body>

</body>

</html>

Шаг 3: Создание всплывающего окна

На втором шаге выше, когда мы создали файл index.html , мы определили свойства (расположение и размер окна) всплывающего объекта в объекте ToolbarUIItemProperties . На этот раз нам нужно только создать содержимое всплывающего окна. Это просто HTML-документ с установленным размером в окне просмотра. Мы можем использовать HTML, CSS, JavaScript или любую другую веб-технологию, которую мы обычно используем на веб-странице.

Создайте файл с именем popup.html , а затем добавьте следующие элементы в тело:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

<input id=”Text1″ type=”text” style=”width: 170px” />

<input id=”Button1″ type=”button” value=”Search” onclick=”SearchonNettutsplus()” />

<ul>

   <li><a href=”http://net.tutsplus.com/” target=”_blank”>Home</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/asp-net/” target=”_blank”>ASP.NET</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/cmss/” target=”_blank”>CMSs</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/databases/”

    target=”_blank”>Databases</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/design-tutorials/”

    target=”_blank”>Design</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/html-css-techniques/”

    target=”_blank”>HTML & CSS</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/javascript-ajax/”

    target=”_blank”>JavaScript & AJAX</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/php/” target=”_blank”>PHP</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/ruby/” target=”_blank”>Ruby</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/site-builds/” target=”_blank”>Site Builds</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/tools-and-tips/” target=”_blank”>Tools & Tips</a> </li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/wordpress/” target=”_blank”>Wordpress</a></li>

   <li><a href=”http://net.tutsplus.com/category/tutorials/other/” target=”_blank”>Other</a> </li>

</ul>

Обратите внимание, что мы используем атрибут onclick здесь только для удобства.

Чтобы управлять стилем всплывающего окна, мы добавляем следующую таблицу стилей в заголовок документа:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

<style>

body {

 line-height :1.5em;

}

h1 {

 font-family :Arial, Verdana ;

 font-size :1em;

}

ul {

 list-style-type:none;

 margin:0;

 padding:0;

}

li {

 display:inline;

 margin-right :10px;

}

</style>

Затем мы добавляем функцию JavaScript в Button1 документа для обработки Button1 нажатия кнопки Button1 :

1

2

3

4

5

6

7

8

9

<script”>

function SearchonNettutsplus() {

 // Get Text1 value

 var search = escape(document.getElementById(“Text1”).value) ;

 // Search articles on Nettuts+ and show the result on new window

 window.open(“http://net.tutsplus.com/?s=” + search);

}

</script>

Вот завершенный код для документа popup.html :

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>

<html lang=”en”>

<head>

 <title>Nettuts+</title>

 <style>

  body {

  line-height :1.5em;

  }

  h1 {

  font-family :Arial, Verdana ;

  font-size :1em;

  }

  ul {

  list-style-type:none;

  margin:0;

  padding:0;

  }

  li {

  display:inline;

  margin-right :10px;

  }

  </style>

  <script>

  function SearchonNettutsplus() {

  // Get Text1 value

  var search = escape(document.getElementById(“Text1”).value) ;

  // Search articles on Nettuts+ and show the result on new window

  window.open(“http://net.tutsplus.com/?s=” + search);

  }

  </script>

</head>

<body>

    <input id=”Text1″ type=”text” style=”width: 170px” />

    <input id=”Button1″ type=”button” value=”Search” onclick=”SearchonNettutsplus()” />

    <br /><br />

    <ul>

       <li><a href=”http://net.tutsplus.com/” target=”_blank”>Home</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/asp-net/” target=”_blank”>ASP.NET</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/cmss/” target=”_blank”>CMSs</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/databases/”

    target=”_blank”>Databases</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/design-tutorials/”

    target=”_blank”>Design</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/html-css-techniques/”

    target=”_blank”>HTML & CSS</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/javascript-ajax/”

    target=”_blank”>JavaScript & AJAX</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/php/” target=”_blank”>PHP</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/ruby/” target=”_blank”>Ruby</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/site-builds/” target=”_blank”>Site Builds</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/tools-and-tips/” target=”_blank”>Tools & Tips</a> </li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/wordpress/” target=”_blank”>Wordpress</a></li>

       <li><a href=”http://net.tutsplus.com/category/tutorials/other/” target=”_blank”>Other</a> </li>

    </ul>

</body>

</html>

Шаг 4: Упаковка и установка расширения

Наше расширение теперь закончено! Осталось только выбрать все файлы и сжать их. Как только это будет сделано, мы можем переименовать zip-файл в Nettutsplus.oex (не забудьте заменить расширение .zip на .oex ), и все готово.

На данный момент мы можем загрузить наше расширение на http://addons.labs.opera.com/ .

Чтобы установить его как обычный пользователь, просто перетащите расширение (Nettutsplus.oex ) в Opera, и он спросит вас, хотите ли вы установить его. После установки вы найдете кнопку Nettuts + на панели инструментов Opera.

Вот расширение Nettuts +, работающее на Opera 11:

Расширение Nettutsplus

Вывод

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

Удачного кодирования!

Источник

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

Оригинал:

https://dev.opera.com/extensions/basics/

Введение

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

.

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

Источник

27.06.2014, 08:45. Показов 57577. Ответов 1

1. Что такое расширения к браузерам?
Расширения к браузерам — это программы, которые внедряются в браузер и добавляют в него новые функции или настраивают имеющиеся.
Расширения к браузерам могут:

  • изменять html-код страниц, открываемых в браузере. В том числе внедрять в них скрипт, который на страницах не отображается, но выполняется для каждой странице при её загрузке.
    В хроме такой скрипт называется скриптом содержимого или контентным скриптом, в мазиле и опере — юзерскриптом.
    Примечание: в отличие от обычных видимых скриптов, этот скрипт может делать кроссдоменные запросы XMLHttpRequest.
  • добавлять кнопки на панели инструментов браузера и создавать новые тулбары
  • управлять вкладками браузера: создавать, закрывать, обновлять, посылать по определённому urlу
  • управлять закладками браузера: создавать, изменять, удалять
  • делать редиректы с одних url на другие, причём не только при открытии того или иного url во вкладке, но и при доступе к нему из фреймов, а также через XMLHttpRequest или через script, img, video.
  • просматривать и изменять историю посещенных страниц в браузере
  • и другое, в зависимости от браузера и его версии

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

Не стоит путать расширения с плагинами.

2. Что представляют собой расширения и как их пишут?
Расширения к браузерам обычно состоят из:

  • файла настроек расширения (ini, json, xml), где указаны, например, название расширения, его версия, автор, поддерживаемые версии браузера, а также файлы скриптов и html страниц, необходимых расширению
  • фонового JS-скрипта (или фоновой страницы с таким скриптом), который выполняется 1 раз при загрузке браузера, не отображается ни на каких страницах, но может менять какие-то настройки в браузере, скажем добавлять кнопку на тулбар
  • юзерскрипта, который внедряется в страницы, не отображается в их коде, но может их изменять так же свободно, как и если бы он был на данном сайте изначально
  • вспомогательных html-страниц, например, страницы настроек для пользователя или диалогового окна, открывающегося при нажатии на кнопку на тулбаре

Всё это либо упаковывают в zip-архив и устанавливают в браузер через страницу Расширения/Дополнения (предварительно сменив расширение архива в зависимости от браузера), либо просто помещают в отдельную папку и опять устанавливают через страницу Расширения/Дополнения, указав путь к этой папке (ручная установка в распакованном виде доступна в хроме).
Возможна программная установка расширений.

Логику расширения пишут на JS, интерфейс пользователя создают с помощью HTML+CSS, а файл настроек пишут на INI/JSON/XML.
Для написания расширений достаточно блокнота.

Исключение — Internet Explorer, расширения для которого пишутся на компилируемом ЯП (C#, C++, Delphi, ..) с помощью COM. Его мы здесь рассматривать не будем.

3. С чего начать?
1. Сначала Chrome.
Во-первых, по нему больше всего инфы в инете.
Во-вторых, он попросту проще.
В-третьих, он не только популярнее сам по себе, но имеет множество клонов, которые, также как и он, основаны на Chromium и обычно совместимы с расширениями Chrome. Это Яндекс.Браузер, Амиго, Интернет от Mail.Ru… Тысячи их.
2. Потом Opera.
Когда вышла Opera 15 (Opera Next) на хромовском движке, оф. документацию по расширениям к старой опере аффффтары просто потёрли, глубоко наплевав на тех, кто привык к старой опере и вообще в гробу видел хром. А таких вот топиков в своё время никто не создал. В результате инфы в инете по опере не Next почти не осталось.
Мы в данном топике будем рассматривать оперу ниже 15, т.е. не Next.
3. Потом Firefox.
Расширения к нему можно создавать двумя способами — как я описал в пункте 2 и каким-то левым способом с помощью специального SDK, причём способы плохо совмещаются друг с другом. Поэтому добрая половина кода в инете, касаемо огнелиса, у вас может просто не заработать. Мы в данном топике будем учиться юзать именно способ без SDK, ибо он проще.
4. Ну и потом IE.
Который по вышеупомянутой причине рассматриваться в топике не будет.

4. Зачем нужен этот топик? Вон статья на хабре, вон оф. документация, вон ещё статья на хабре, что ещё надо?
1) Вам не нужно — вы и не создавайте топиков, и этот не читайте. А некоторым нужно. Мне бы в своё время пригодился.
2) По расширениям к хрому инфа и правда есть, но вот с огнелисом и оперой сложнее. Про оперу — см. выше.
3) Я не прошу отправлять этот топик в важные (хотя буду рад, если он туда попадёт), не буду его апить каждые полчаса. Так что вам он не мешает ничем. Не нужно его трогать.
4) Этот топик нужен мне. Чтобы в свободное время или просто когда лень работать продолжать углублять свои знания и расширять специализацию. И вы бы лучше занялись чем-то таким, нежели ругать и портить чужое.

5. Пишем простое расширение к Chrome.
Расширение будет добавлять всплывающий баннер с текстом «Ура!» на каждую страницу в браузере, в левый-верхний угол.
Итак, приступим.
1. Создаём отдельную папку. Называем её, например, HelloChromeAPI.
2. В папке создаём файл настроек расширения.
Для этого запускаем блокнот, пишем такой код

JSON 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
    "name": "Hello Chrome API",
    "version": "1.0.0.0",
 
    "manifest_version": 2,
 
    "content_scripts": [
        {
            "matches": [ "http://*/*" ],
            "js": [ "content_scripts/end.js" ],
            "run_at": "document_end"
        }
    ]
}

сохраняем в нашу папку под именем manifest.json обязательно в кодировке UTF-8.
Такой формат представления данных называется JSON: записи через запятую, имена их в кавычках, каждая запись может включать в себя подзаписи разного типа (тогда заключается в {}) или подзаписи одного и того же типа (тогда называется массивом и заключается в []).
«name» — имя расширения, которое будет видно в браузере
«version» — версия расширения, которую тоже будет видно в браузере
«manifest_version», равное 2, указывает, что расширение будет совместимо с Chrome выше версии 13. Если вместо 2 указать 1, то расширение будет работать в хромах с 5 по

12. Такие хромы сейчас редки, но если уж писать серьёзный проект, то нужно сделать дубликаты расширения для обоих поколений хрома.
«content_scripts» — это массив контентных скриптов (то есть скриптов, которые, как говорилось выше, выполняются на каждой странице в браузере). В данном случае в списке один элемент (он ограничен скобками {}), так как скрипт в нашем расширении будет только 1
«matches» — маска, указывающая, на каких страницах будет выполняться скрипт. * означает любую последовательность символов. Наш скрипт будет выполнять на всех страницах протокола http. Почему только http? Потому что на страницах протокола https браузер проверяет, нет ли левого html-кода, и если есть, то ругается. Может ругаться и антивирус.
«run_at» указывает, на каком этапе загрузки страницы скрипт будет выполняться.
Значение «document_start» = не загружено ничего (скрипт сможет вывести окошко alert или изменить window.location.href, но не сможет работать с document.body, его просто не будет)
Значение «document_end» = загружен код страницы, доступны document и document.body, но могут выполнять какие-то скрипты, которые ещё просто не успели выполниться
Значение «document_idle» = простой, когда никакой другой скрипт не выполняется. точнее ближайший период простоя с начала загрузки. Рекомендуется использовать для сложных ресурсоёмких скриптов, когда в то же время не требуется, чтобы скрипт выполнился прямо сразу после загрузки.
«js» — это массив путей к скриптам, выполняющимся с данными matches. Скрипт один, он будет называться end.js (это будет означать, что скрипт выполняется по document_end) и лежать в подпапке content_scripts в нашей папке расширения.
3. Создадим подпапку content_scripts, а в ней скрипт end.js.
В нём пропишем код

Javascript 
1

document.body.innerHTML += '<div style="background-color: #FFFFFF; border-color: black; border-style: solid; color: black; font-family: 'Segoe UI'; font-size: 24px; position: fixed; left: 0; top: 0; width: 300px; height: 110px; padding: 8px; z-index: 1000000000">Ура!</div>';

Этот скрипт добавляет код баннера в код body той страницы, на которой выполняется.
Он тоже обязательно должен быть сохранён в UTF-8.
Примечание: стилей так много затем, чтобы перекрыть стили, применённые на сайте, куда вставляется баннер, и баннер на всех сайтах выглядел одинаково.
4. Установим расширение в браузер.
Откроем меню браузера кнопкой справа-вверху, затем пункт Инструменты, затем выберем пункт Расширения.
Или просто пройдём по ссылке chrome://extensions
Поставим флажок Режим разработчика, нажмем Загрузить распакованное расширение и укажем нашу папку.
5. Теперь зайдём на любую страницу, использующую http (см. выше)
mail.ru подойдёт, наш форум подойдёт, а google.ru нет.
Когда страница загрузится до конца, слева-вверху появится обещанный баннер.
6. На странице расширений мы можем отключить или удалить расширение с помощью соотв. кнопок.
А если мы решим изменить код manifest.json, end.js и т.д., то чтобы изменения применились, мы должны воспользоваться кнопкой Обновить.

6. Добавляем кнопочку на панель инструментов Chrome
Теперь оно будет ещё добавлять кнопочку на панель инструментов хрома и при нажатии на кнопку открывать диалоговое окно.
Нам понадобится Chrome 20 или новее.
1. Откроем наш файл manifest.json
Изменим его таким образом

JSON 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
    "name": "Hello Chrome API",
    "version": "1.0.0.0",
 
    "manifest_version": 2,
 
    "content_scripts": [
        {
            "matches": [ "http://*/*" ],
            "js": [ "content_scripts/end.js" ],
            "run_at": "document_end"
        }
    ], // <-- здесь добавим запятую
 
    "browser_action": {
          "default_icon": {                       // иконки для кнопки 
            "19": "/images/br-icon19.png",         // иконка 19x19 пкс
            "38": "/images/br-icon38.png"          // иконка 38x38 пкс
          },
          "default_title": "Наша кнопка",         // всплывающая подсказка появл при наведении мыши на кнопку
          "default_popup": "popup/popup.html"     // страница появл во всплывающем окне откр при нажатии на кнопку
    }
}

и сохраним.
2. Создадим подпапки images и popup.
В images создадим две картинки, как указано в манифесте. Картинки могут быть одинаковыми, отображается только одна, в зависимости от расширения монитора (на больших мониторах — 38×38, на маленьких — 19×19).
В popup создадим файл popup.html и запишем в него такой код

HTML5 
1

<div style="width: 300px; height: 100px">Ура!</div>

Сохранять тоже лучше в UTF-8.
3. Чтобы изменения вступили в силу, зайдём в Расширения и нажмём кнопку Обновить под нашим расширением.
4. На панели инструментов (слева вверху) появится кнопка с заданной иконкой.
Нажав на кнопку, увидим окошко, в котором будет надпись «Ура!».
Заметим, что размер окошка соответствует размеру, указанному в style корневого элемента popup.html (т.е. 300 x 100 пкс).
Если этот размер не указывать, окошко будет таким, чтобы в него поместилось содержимое этого элемента, т.е. надпись «Ура!».

7. Добавляем иконку в расширение к Chrome.
1. Подправим манифест.

JSON 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

{
    "manifest_version": 2,
 
    "name": "Hello Chrome API",
    "version": "1.0.0.0",
 
    "manifest_version": 2,
 
    // добавим такие строчки
    "icons": {
        "48": "/images/icon48.png"
    },
 
    "content_scripts": [
        {
            "matches": [ "http://*/*" ],
            "js": [ "content_scripts/end.js" ],
            "run_at": "document_end"
        }
    ],
 
    "browser_action": {
          "default_icon": {
            "19": "/images/br-icon19.png",
            "38": "/images/br-icon38.png"
          },
          "default_title": "Наша кнопка",
          "default_popup": "popup/popup.html"
    }
}

2. Создадим файл icon48.png в папке images.
Это будет иконка расширения, отображаемая на странице расширений вместо дефолтного значка с фрагментом мозаики.
Примечание: помимо иконки размером в 48 пкс, мы можем сделать иконки размером 16, 32, 128 пкс, дописав внутрь ветви «icons:» соотв. строчки, не забывая про запятые. Но это нужно только если мы решим нарисовать действительно разные иконки для расширения. Просто растянув иконку под 16, 32, 128 пкс, мы ничего не достигнем — хром это сделает и сам, где оно понадобится. Я ограничился 48 пкс.
3. Обновим расширение на странице расширений.

8. Пишем простое расширение к Opera.
Расширение будет работать аналогично расширению к хрому.
Опера у меня версии 12. На других не пробовал. На 15 и выше, ещё раз, работать не должно.
Все файлы, как и с хромом, лучше сохранять в UTF-8, иначе кириллица будет отображаться неверно.
Приступим.
1. Создаём отдельную папку. Называем её, например, HelloOperaAPI.
2. В папке создаём файл настроек расширения.
Для этого запускаем блокнот, пишем такой код

XML 
1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <name>Hello Opera API</name>
    <version>1.0.0.0</version>
</widget>

сохраняем в нашу папку под именем config.xml обязательно в кодировке UTF-8.
Такой формат представления данных называется XML.
<name> — имя расширения, которое будет видно в браузере
<version> — версия расширения, которую тоже будет видно в браузере
А вот никакого упоминания о скриптах в файле не будет. Мы просто создадим в папке с расширением подпапку include и файл .js с любым именем. Этого будет достаточно, чтобы скрипт работал.
3. Сказано — сделано. Создаём подпапку include и файл script_end.js

Javascript 
1
2
3
4
5
6
7

// ==UserScript==
// @include [url]http://*/*[/url]
// ==/UserScript==
 
document.addEventListener("DOMContentLoaded", function() {
    document.body.innerHTML += '<div style="background-color: #FFFFFF; border-color: black; border-style: solid; color: black; font-family: 'Segoe UI'; font-size: 24px; position: fixed; left: 0; top: 0; width: 300px; height: 110px; padding: 8px; z-index: 1000000000">Ура!</div>';
}, false);

DOMContentLoaded позволяет создать эффект «document_end» из хрома (а сам юзерскрипт в опере выполняется фактически по «document_start».
«==UserScript==…==/UserScript==» вверху — это не просто комментарий. Там указываются настройки данного скрипта. @include здесь работает по принципу «matches» из Chrome.
Скрипт тоже обязательно должен быть сохранён в UTF-8.
Этот скрипт добавляет код баннера в код body той страницы, на которой выполняется.
4. В папке с расширением создадим index.html. Это фоновая страница. Мы можем оставить её пустой, потому что фоновых скриптов пока нет и она нам не нужна, но в расширении для оперы она должна быть обязательно.
5. Упакуем расширение в zip-архив. Сменим его расширение с zip на oex.
6. Запустим оперу, зайдём в меню, выберим пункт Дополнения, перетащим туда oex.
7. Проверим, появляются ли баннеры при загрузке страниц.

9. Добавляем кнопку на панель инструментов Opera
На панели инструментов справа-вверху появится кнопка. При нажатии на неё откроется всплывающее окошко с заданной страницей. Всё как в хроме.
Нам понадобится Chrome 20 или новее.
1. Изменим фоновую страницу index.html таким образом

HTML5 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!doctype html>
<html lang="en">
    <head>
        <script>
            window.addEventListener("load", function(){
                var ToolbarUIItemProperties = {
                    title: "Наша кнопка",
                    icon: "/images/br-icon19.png",
                    popup: {
                        href: "popup/popup.html",
                        width: 300,
                        height: 100
                    }
                }
                opera.contexts.toolbar.addItem(opera.contexts.toolbar.createItem(ToolbarUIItemProperties));
            }, false);
        </script>
    </head>
    <body>
    </body>
</html>

и сохраним.
opera.contexts.toolbar — это класс из Opera API.
У хрома тоже есть API — chrome.*.
2. Создадим подпапки images и popup.
В images создадим картинку, как указано в манифесте.
В popup создадим файл popup.html и запишем в него такой код

Примечание:

в отличие от хрома, размер окошка формируется не через style корневого элемента popup.html, а через width и height, прописанные в ToolbarUIItemProperties в index.html.
3. Чтобы изменения вступили в силу, удалим расширение и установим его обратно.
4. На панели инструментов (слева вверху) появится кнопка с заданной иконкой.
Нажав на кнопку, увидим окошко, в котором будет надпись «Ура!».

10. Добавляем иконку в расширение Opera.
1. Путь к иконке указывается в файле настроек — config.xml.
За него отвечает тэг icon с атрибутом src, в котором указывается относительный путь к иконке (относительно основной папке расширения).
Откроем файл config.xml.
Внутри <widget> добавим строчку

XML 
1

<icon src="/images/icon48.png" />

Должно получиться так:

XML 
1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <name>Hello Opera API</name>
    <version>1.0.0.0</version>
    <icon src="/images/icon48.png" />
</widget>

2. Создадим файл icon48.png (это может любая картинка 48×48 пкс) в папке images.
3. Перепакуем и переустановим расширение.
В списке расширений вместо дефолтного значка (сиреневого фрагмента мозаики) будет отображаться наша иконка.


11. Пишем простое расширение Firefox.
12. Добавляем панель инструментов в Firefox.
13. Добавляем иконку в расширение Firefox.
Продолжение следует…
Пока что читаем здесь и экспериментируем.

Пара советов и ссылок на закуску
Конечно, информации из этого топика ещё недостаточно, чтобы написать любое расширение к браузеру Chrome, Firefox или Opera.
Но общее представление о расширениях и особенностях их разработки вы получили.
Поэтому, воспользовавшись данными ссылками в связке с гуглом, Вы при желании сможете углубиться в расширения и писать крупные, уникальные продукты.
Здесь же обещанные магазины расширений.
CHROME
https://developer.chrome.com/extensions/ — официальная документации.
Вот описание в ней контентных скриптов и кнопки browser-action:
https://developer.chrome.com/e… nt_scripts
https://developer.chrome.com/e… wserAction
https://chrome.google.com/webs… ions?hl=ru — магазин.
OPERA
https://addons.opera.com/ru/extensions/ — магазин.
FIREFOX
https://addons.mozilla.org/ru/firefox/ — магазин.

Добавлено через 2 минуты
В процессе написания топика нашёл на форуме баг.
В кодах JSON, XML и др. текст «https://www.cyberforum.ru/images/картинка.png» заменяется на «https://www.cyberforum.ru/images/картинка.png».
То есть если написать

JSON 
1
2
3

{
    "48": "ЗДЕСЬ_НЕТ_НИЧЕГОimages/icon48.png"
}

то получится

JSON 
1
2
3

{
    "48": "https://www.cyberforum.ru/images/icon48.png"
}

Правда, написав

JSON 
1
2
3

{
    "48": "/images/icon48.png"
}

мы получим то, что ожидали. Но иной код от этого может сделаться также нечитабельным, как и из-за добавления «https://www.cyberforum.ru/».



2



Источник

В чём суть задачи, и в чём сложности

Задача состоит в разработке расширения, которое будет
реагировать на открытие определенных HTML-страниц в браузере. Например, модифицировать
HTML-код страницы сайта для более удобного использования этого сайта.
Решение опробовано на Opera 12.14 (Debian 6.0.6, amd64).

План решения задачи (общая схема для написания подобных расширений)

1. Расширение, которое мы пишем для браузера Opera, будет состоять из двух частей:
«фоновая страница» (browser-related code/background page, start file) и скрипт для работы с открытыми
страницами (page-related code, includes).
Обмениваются эти страницы посредством сообщений (messages): вызов функции postMessage() + обработчики onmessage. Background-страницу можно настроить через config.xml.

2. В background’е у нас будет «крутиться» скачиваемая база сайтов, запросы к которой
будет присылать content-script. База скачивается по таймауту. Таймаут задаём через вызов
функции window.setTimeout(func, timeout), скачивание — через XMLHttpRequest().
Парсинг — через responseXML + getElementsByTagName() + textContent.

3. База данных — в localStorage (появилось в Опере с версии 10.5, в начале 2010 года). WebSQL использовать уже не модно, так как W3C прекратила работу над спецификацией в 2010 году (частная имплементация WebSQL существует сейчас в Chrome, Opera, Android browser и проч.). В общем, люди в основном используют IndexedDB или localStorage.

4. Code injection — простым доступом к event.target.body.innerHTML из content-скрипта.
Injected HTML определять с important-атрибутами, чтобы перекрыть установки сайта.

5. Как проверять текущий URL, обрезать его и вычислять хэш — уже решённая задача для браузеров Firefox и Chrome.

6. Расширение упаковывается в .oex-формат очень просто:

#!/bin/bash
7z a -tzip ../poskidke-opera.zip *
mv ../poskidke-opera.zip ../poskidke-opera.oex

Как опубликовать расширение, рассказано здесь.

?. Подумать над «локализацией» (locales/en/background.*);

Гладко было на бумаге, да забыли про овраги … (конкретные вопросы реализации)

1. В начале includes-скриптов надо писать такую конструкцию (эти скрипты являются UserJS-скриптами?):

// ==UserScript==
// @include *
// ==/UserScript==

2. JavaScript в фоновом процессе надо оформлять в «head» страницы index.html, внутрь тэга «script».

<script language=»JavaScript»>
…

3. Пример использования XMLHttpRequest() идентичен версии для Chrome/Chromium:

function loadXMLConfig(url)
{
xmlreq.open(«GET», url, true);
xmlreq.onreadystatechange = function (e) {
try { // Важно!
// только при состоянии «complete»
if (xmlreq.readyState == 4) {
// для статуса «OK»
if (xmlreq.status == 200) {
// обработка ответа
var xml = xmlreq.responseXML.documentElement;
var ts = xml.getElementsByTagName(«timeout»);
var timeout = ts[0].textContent;
}
else {
console.log(«Cannot load file»);
}
}
}
catch( e ) {
console.log(«Error»);
}
}
xmlreq.send(null);
}

Чтобы не выскакивало в логах: «Uncaught exception: DOMException: NETWORK_ERR»,
надо указать в config.xml:

<?xml version=»1.0″ encoding=»utf-8″?>
<widget xmlns=»http://www.w3.org/ns/widgets» id=»http://domain.ru/path/»>
…
<access origin=»*» subdomains=»true»/>
</widget>

4. Для обмена сообщениями между background page и content script,
надо использовать такую конструкцию:

content_script.js:
opera.extension.postMessage(event.target.href);
…
opera.extension.onmessage = function(event) {
alert(«reply from bg:» + event.data);
};

background.html:
opera.extension.onconnect = function(event) {
event.source.postMessage(«y»);
};

Вызов alert() в background-процессе не работает.

5. Вставку кода нужно правильно оформить, чтобы не поломались другие элементы на странице
(например, не пропал набор соц.кнопок от Яндекса).

6. Ещё одна трабла — Опера скоро перейдёт на WebKit, возможно многое поменяется.

Источник

Сегодня речь пойдет о том как создать свое первое расширение для браузера 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.

Более подробная информация тут.

Источник

Понравилась статья? Поделить с друзьями:
  • Как написать расширение для chrome
  • Как написать расчет ущерба
  • Как написать расчертить
  • Как написать растут цветы
  • Как написать растопленным шоколадом на торте